luc*_*mit 22 html javascript css php jquery
我已经在div中创建了我的数据(包含模板的图像,文本,标签等),现在我想将其转换为图像格式.是否有任何技术将特定的div内容转换为图像而不使用canvas.anybody plz帮助我!我想将整个"mydiv"内容转换为图像并将该图像保存到我的图像目录中,当我点击保存？
<html>
<header>
</header>
<body>
<label> Template Design</label>
<div id="mydiv">
<label> Good Morning</label>
<img src="mug.png" id="img1" height="100" width="100" />
</div>
<input name="save" type="button" value="SAVE" />
</body>
</html>
Sco*_*tie 26
更新(2018年3月):你好,未来的人!这个答案仍然获得了大量的流量,我注意到我放在一起的旧JSFiddle已被破坏,所以它已被更新.显示这种技术的新JSFiddle在这里:https://jsfiddle.net/Sq7hg/1913 .
-
如果你不能使用,你可能想要研究一个基于Flash的解决方案<canvas>(虽然除非特别需要在IE的旧版本中工作,否则我不知道为什么你不能).
http://flashcanvas.net/是一个<canvas>使用Flash 的模拟,可能会让你到达你需要去的地方.文档说它支持toDataURL()所以可能对你有用.
您是否可以更深入地了解您的限制<canvas>是什么以及您尝试过尝试过什么？
//编辑
根据您下面的评论,您可以使用<canvas>,在这种情况下,您可以尝试使用http://html2canvas.hertzen.com - 它是一个JavaScript解决方案,基本上将代码的指定部分的DOM重写为<canvas>和然后允许您根据需要与其进行交互,包括将其转换为图像数据toDataURL().
我之前没有使用它,但您的JavaScript代码看起来像这样:
html2canvas([document.getElementById('mydiv')], {
onrendered: function(canvas) {
var data = canvas.toDataURL('image/png');
// AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server
}
});
我在这里敲了一个快速的jsfiddle:https ://jsfiddle.net/Sq7hg/1913/ (注意:更新链接如上)
这个jsfiddle展示了如何使用该toDataURL()方法将画布转换为图像并将其附加到文档.将生成的图像保存到服务器是一项无限复杂的任务,因为它需要AJAX调用或者某些事情将图像数据发送到PHP脚本,该脚本将生成的data:URL转换为实际图像,然后将其保存到您拥有的目录中写入权限.如果这是你需要做的,而不是进入这里,我建议从这个Stack Overflow问题开始:如何将HTML5 Canvas保存为服务器上的图像？
luc*_*mit 15
这完美地工作......必须是最简单的解决方案.
// HTML
<div id="mydiv" style="background-image:url(Koala.jpg) ;background-size: 100%;
background-size :200px 200px;
background-repeat: no-repeat;">
<p>text!</p>
<img src="mug.png" height="100" width="100"/></div>
<div id="canvas">
<p>Canvas:</p>
</div>
<div style="width:200px; float:left" id="image">
<p style="float:left">Image: </p>
</div>
<div style="float:left;margin-top: 120px;" class="return-data">
</div>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
//样式
#mydiv {
background-color: lightblue;
width: 200px;
height: 200px
}
//脚本
<script language="javascript">
html2canvas([document.getElementById('mydiv')], {
onrendered: function (canvas) {
document.getElementById('canvas').appendChild(canvas);
var data = canvas.toDataURL('image/png');
//display 64bit imag
var image = new Image();
image.src = data;
document.getElementById('image').appendChild(image);
// AJAX call to send `data` to a PHP file that creates an PNG image from the dataURI string and saves it to a directory on the server
var file= dataURLtoBlob(data);
// Create new form data
var fd = new FormData();
fd.append("imageNameHere", file);
$.ajax({
url: "uploadFile.php",
type: "POST",
data: fd,
processData: false,
contentType: false,
}).done(function(respond){
$(".return-data").html("Uploaded Canvas image link: <a href="+respond+">"+respond+"</a>").hide().fadeIn("fast");
});
}
});
function dataURLtoBlob(dataURL) {
// Decode the dataURL
var binary = atob(dataURL.split(',')[1]);
// Create 8-bit unsigned array
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
// Return our Blob object
return new Blob([new Uint8Array(array)], {type: 'image/png'});
}
</script>