php 如何在不使用画布的情况下将我的整个 div 数据转换为图像并将其保存到目录中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18545034/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I convert my entire div data into image and save it into directory without using canvas?
提问by luckyamit
i have already created my data (template-containing image,text,label etc) inside div now i want to convert it into image format. is there any technique to convert a specific div content into images without using canvas.anybody plz help me ! i want to convert entire "mydiv" content into image and save that image into my image directory, when i click on save ?
我已经在 div 中创建了我的数据（包含模板的图像、文本、标签等），现在我想将其转换为图像格式。是否有任何技术可以在不使用画布的情况下将特定 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>
回答by Scott
UPDATE (March 2018): Hello people of the future! This answer still gets a lot of traffic and I noticed that the old JSFiddle I'd put together was broken so it's been updated. New JSFiddle showing this technique is here: https://jsfiddle.net/Sq7hg/1913.
更新（2018 年 3 月）：你好未来的人们！这个答案仍然获得了大量流量，我注意到我放在一起的旧 JSFiddle 已损坏，因此已更新。展示此技术的新 JSFiddle 在这里：https://jsfiddle.net/Sq7hg/1913 。
--
——
You might want to look into a Flash-based solution if you can't use <canvas>(though unless this specifically needs to work in old versions of IE I'm not sure why you can't).
如果您不能使用，您可能想研究基于 Flash 的解决方案<canvas>（尽管除非这特别需要在旧版本的 IE 中工作，否则我不确定为什么不能）。
http://flashcanvas.net/is an emulation of <canvas>using Flash that might get you where you need to go. The documentation says that it supports toDataURL()so that might work for you.
http://flashcanvas.net/是<canvas>使用 Flash的模拟，可以让您到达需要的地方。文档说它支持，toDataURL()因此可能对您有用。
Can you provide more insight into what your restrictions around <canvas>are and what you've attempted to try already?
您能否更深入地了解您周围的限制<canvas>以及您已经尝试过的内容？
//EDIT
//编辑
According to your comment below you might be able to use <canvas>, in which case you can try using http://html2canvas.hertzen.com– it's a JavaScript solution that basically re-writes the DOM of a specified part of your code to a <canvas>and then allows you to interact with it however you want, including turning it into image data via toDataURL().
根据您下面的评论，您可能可以使用<canvas>，在这种情况下，您可以尝试使用http://html2canvas.hertzen.com– 这是一个 JavaScript 解决方案，它基本上将代码的指定部分的 DOM 重写为 a<canvas>和然后允许您随心所欲地与其进行交互，包括通过 将其转换为图像数据toDataURL()。
I've not used it before, but your JavaScript code would look something like this:
我以前没有使用过它，但你的 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
}
});
I've knocked together a quick jsfiddle of this in action here: https://jsfiddle.net/Sq7hg/1913/(note: updated link as per above)
我在这里拼凑了一个快速的 jsfiddle：https://jsfiddle.net/Sq7hg/1913/ （注意：更新链接如上所述）
This jsfiddle shows how to use the toDataURL()method to convert the canvas to an image and append it to the document. Saving the generated image to a server is an infinitely more complex task as it will require an AJAX call or somesuch to send the image data to a PHP script that converts the generated data:URL to an actual image and then saves it to a directory that you have permission to write to. If that's what you need to do, rather than going into that here I'd recommend starting with this Stack Overflow question: How to save an HTML5 Canvas as an image on a server?
这个 jsfiddle 展示了如何使用该toDataURL()方法将画布转换为图像并将其附加到文档中。将生成的图像保存到服务器是一项极其复杂的任务，因为它需要 AJAX 调用或类似调用将图像数据发送到 PHP 脚本，该脚本将生成的data:URL 转换为实际图像，然后将其保存到您拥有的目录中写入权限。如果这就是你需要做的，而不是在这里我建议从这个堆栈溢出问题开始：如何将 HTML5 画布保存为服务器上的图像？
回答by luckyamit
This works perfectly...must be the simplest solution .
这非常有效......必须是最简单的解决方案。
//html
//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
//脚本
<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>
