如何在不使用画布的情况下将整个 div 数据转换为图像并将其保存到目录中？
Posted
技术标签:
【中文标题】如何在不使用画布的情况下将整个 div 数据转换为图像并将其保存到目录中？【英文标题】：How do I convert my entire div data into image and save it into directory without using canvas? 【发布时间】：2013-09-03 21:34:41 【问题描述】：我已经在 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" />
</div>
<input name="save" type="button" value="SAVE" />
</body>
</html>
【问题讨论】：
我相信会有一个浏览器插件可以为你做到这一点。 到目前为止你做了什么？这只是 html。 是的，但我希望在单击“保存”按钮后将“mydiv”的所有内部数据转换为图像格式？有什么解决办法吗？ 如果没有画布，你使用这个方法buffernow.com/html-to-image-php-script 但你需要php和其他一些库 【参考方案1】：更新（2018 年 3 月）：未来的人们您好！这个答案仍然有很多流量，我注意到我放在一起的旧 JSFiddle 已经坏了，所以它已经更新了。展示这种技术的新 JSFiddle 在这里：https://jsfiddle.net/Sq7hg/1913。
--
如果您不能使用<canvas>，您可能需要研究基于 Flash 的解决方案（尽管除非这特别需要在旧版本的 IE 中工作，否则我不确定您为什么不能）。
http://flashcanvas.net/ 是<canvas> 的模拟，使用 Flash 可能会带您去您需要去的地方。文档说它支持toDataURL()，所以这可能对你有用。
您能否更深入地了解您对<canvas> 的限制以及您已经尝试过的尝试？
//编辑
根据您在下面的评论，您也许可以使用<canvas>，在这种情况下，您可以尝试使用http://html2canvas.hertzen.com——它是一种 javascript 解决方案，基本上将代码中指定部分的 DOM 重写为 @ 987654332@，然后允许您随心所欲地与之交互，包括通过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 问题开始：How to save an HTML5 Canvas as an image on a server?
【讨论】：
感谢 Scottie，但我已经在 div 中创建了我的数据（包含模板的图像文本等），现在我想将其转换为图像格式。是否有任何技术可以将特定的 div 内容转换为图像，或者先将其转换为画布，然后再转换为图像。如果你有它的代码，那么请写在这里？ 更新了我上面的答案以包含基于<canvas> 的解决方案。
是的，html2canvas.hertzen.com 有一个解决方案，但我无法从那里获得清晰的代码，因为我希望它让我感到困惑，你能从那里提供一个过滤器代码吗
非常感谢你现在能提供我画布到图像的转换吗，我怎样才能把这个输出画布转换成图像格式？
答案再次更新，提供了有关 toDataURL() 的更多信息。【参考方案2】：
这很好用……一定是最简单的解决方案。
//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" /></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>
here is a sample demo
【讨论】：
干得好！谢谢！你真的帮了我。 你能解释一下吗？我尝试打开您的示例演示链接，但我仍然不明白，因为那里没有发生任何事情.. 你可以查看我的小提琴链接：jsfiddle.net/Sq7hg/3120，我的答案中也更新了链接@dapidmini以上是关于如何在不使用画布的情况下将整个 div 数据转换为图像并将其保存到目录中？的主要内容，如果未能解决你的问题，请参考以下文章
如何在不使用 Google 地图的情况下将纬度/经度转换为 HTML5 坐标？
如何在不复制的情况下将画布 imageData 传递给 emscripten c++ 程序？