如何在不使用画布的情况下将整个div数据转换为图像并保存到目录中？
我已经在div中创建了我的数据(包含模板的图像、文本、标签等)，现在我想将其转换为图像格式。有没有什么技术可以在不使用canvas.anybody的情况下将特定的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>回答 2
Stack Overflow用户
发布于 2013-08-31 14:16:23
更新(2018年3月)：大家好，未来的人们！这个答案仍然有很大的流量，我注意到我组装的旧JSFiddle坏了，所以它已经更新了。展示这项技术的新JSFiddle在这里：https://jsfiddle.net/Sq7hg/1913。
--
如果你不能使用<canvas>，你可能会想看看基于闪存的解决方案(不过，除非这特别需要在旧版本的IE中工作，否则我不知道为什么你不能)。
http://flashcanvas.net/是一个使用闪存的<canvas>仿真，它可能会带你去你需要去的地方。文档中说它支持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转换为实际的图像，然后将其保存到您有权写入的目录中。如果这就是你需要做的，而不是在这里开始，我建议从这个堆栈溢出问题开始：How to save an HTML5 Canvas as an image on a server?
Stack Overflow用户
发布于 2013-09-02 14:02:59
这是perfectly...must最简单的解决方案。
//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>//Style
#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>here is a sample demo
https://stackoverflow.com/questions/18545034
复制相似问题
腾讯云开发者
