我已经在div内创建了我的数据（包含模板的图像，文本，标签等），现在我想将其转换为图像格式。是否有任何技术可以在不使用canvas的情况下将特定的div内容转换为图像.任何人请帮助我！我想将整个“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>
更新（2018年3月）：大家好！大家好！这个答案仍然有很多流量，我注意到我放在一起的旧JSFiddle坏了，所以它已经更新了。展示这种技术的新JSFiddle在这里：https://jsfiddle.net/Sq7hg/1913。
--
如果您无法使用，则可能需要研究基于Flash的解决方案（尽管除非这特别需要在旧版本的IE中工作，否则我不确定为什么您不能）。<canvas>
http://flashcanvas.net/ 是使用Flash的模拟，可能会让你到达你需要去的地方。文档说它支持，所以这可能适用于你。<canvas>toDataURL()
您能否更深入地了解您的限制是什么以及您已经尝试过什么？<canvas>
编辑
根据您在下面的评论，您可能可以使用 ，在这种情况下，您可以尝试使用 http://html2canvas.hertzen.com - 它是一个JavaScript解决方案，基本上将代码的指定部分的DOM重写为a，然后允许您根据需要与它进行交互，包括通过将其转换为图像数据。<canvas><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 演示如何使用该方法将画布转换为图像并将其附加到文档中。将生成的图像保存到服务器是一项无限复杂的任务，因为它需要 AJAX 调用或类似方法将图像数据发送到 PHP 脚本，该脚本将生成的 URL 转换为实际图像，然后将其保存到您有权写入的目录中。如果这是你需要做的，而不是在这里讨论这个问题，我建议从这个堆栈溢出问题开始：如何将HTML5 Canvas保存为服务器上的图像？toDataURL()data:
这很完美...必须是最简单的解决方案。
断续器
<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>
