Fatal编程技术网
  • php/
  • Php 如何在不使用画布的情况下将整个div数据转换为图像并保存到目录中？

Php 如何在不使用画布的情况下将整个div数据转换为图像并保存到目录中？

php javascript jquery html css

Php 如何在不使用画布的情况下将整个div数据转换为图像并保存到目录中？,php,javascript,jquery,html,css,Php,Javascript,Jquery,Html,Css,我已经在div中创建了我的数据（包含图像、文本、标签等的模板），现在我想将其转换为图像格式。有没有什么技术可以在不使用canvas的情况下将特定的div内容转换为图像。有人请帮助我！ 当我点击save时，我想将整个“mydiv”内容转换成图像，并将该图像保存到我的图像目录中 <html> <header> </header> <body> <label> Template Design</label>

我已经在div中创建了我的数据（包含图像、文本、标签等的模板），现在我想将其转换为图像格式。有没有什么技术可以在不使用canvas的情况下将特定的div内容转换为图像。有人请帮助我！ 当我点击save时，我想将整个“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月）：未来的人们好！这个答案仍然有很多流量，我注意到我组装的旧JSFIDLE已经坏了，所以它被更新了。显示此技术的新JSFIDLE如下所示：

--

如果您不能使用
，您可能需要研究基于Flash的解决方案（不过，除非这在旧版本的IE中特别需要，否则我不确定您为什么不能）

是对使用Flash的
的模拟，它可以帮助您找到需要去的地方。文档中说它支持
toDataURL（）
，因此这可能适合您

您能否更深入地了解
的限制以及您已经尝试过的限制

//编辑

根据您在下面的评论，您可能可以使用
，在这种情况下，您可以尝试使用–这是一种JavaScript解决方案，基本上可以将指定代码部分的DOM重新写入
，然后允许您以任何方式与之交互，包括通过
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
    }
});
我已经在这里快速地整理了一个JSFIDEL：（注意：更新了上面的链接）

这个jsfiddle展示了如何使用
toDataURL（）
方法将画布转换为图像并将其附加到文档中。将生成的图像保存到服务器是一项极其复杂的任务，因为它需要一个AJAX调用或类似的方法将图像数据发送到PHP脚本，该脚本将生成的
数据：
URL转换为实际图像，然后将其保存到您有权写入的目录中。如果这是您需要做的，我建议您从堆栈溢出问题开始：

这非常有效……必须是最简单的解决方案

//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>
//剧本

  <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>


html2canvas（[document.getElementById（'mydiv'））]{
onrendered：函数（画布）{
document.getElementById（'canvas'）.appendChild（canvas）；
var data=canvas.toDataURL（'image/png'）；
//显示64位图像
var image=新图像（）；
image.src=数据；
document.getElementById（'image'）.appendChild（image）；
//AJAX调用将“data”发送到一个PHP文件，该文件从dataURI字符串创建一个PNG图像，并将其保存到服务器上的一个目录中
var file=dataURLtoBlob（数据）；
//创建新表单数据
var fd=新FormData（）；
追加（“imageNameHere”，文件）；
$.ajax({
url:“uploadFile.php”，
类型：“POST”，
数据：fd，
processData:false，
contentType:false，
}).完成（功能（响应）{
$（“.return data”）.html（“上传的画布图像链接：”）.hide（）.fadeIn（“快速”）；
});
}
});
函数dataURLtoBlob（dataURL）{
//解码数据URL
var binary=atob（dataURL.split（'，）[1]）；
//创建8位无符号数组
var数组=[]；
对于（var i=0；i

我相信会有一个浏览器插件可以为您完成这项工作。您到目前为止做了什么？这只是html。是的，但我希望在单击“保存”按钮后将“mydiv”的所有内部数据转换为图像格式？有什么解决方案吗？如果没有画布，你可以使用这个方法，但是你需要php和其他一些库。谢谢Scottie，但是我已经在div中创建了我的数据（包含图像、文本等的模板），现在我想把它转换成图像格式。是否有任何技术可以将特定的div内容转换为图像，或者先将其转换为画布，然后再转换为图像。如果你有它的代码，那么请写在这里？更新了我的答案，上面包括了一个基于
的解决方案。是的，有一个解决方案，但我无法从那里得到一个清晰的代码，因为我想让我困惑，你能从那里给我一个过滤代码吗谢谢你这么多，你能现在就给我提供画布到图像的转换吗，如何将此输出画布转换为图像格式？回答再次更新，并提供有关toDataURL（）的更多信息。干得好！谢谢你真的帮了我。你能再解释一下吗？我试着打开你的示例演示链接，但我仍然不明白，因为那里什么都没有发生。你可以检查我的小提琴链接：，我也在我的答案中更新了链接@dapidmini 
  <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>