如何将整个div数据转换为图片并保存到目录中，而不使用canvas？

Question

如何将整个div数据转换为图片并保存到目录中，而不使用canvas？

phpjavascriptjqueryhtmlcss

24

我已经在

标签中创建了包含图像、文本、标签等的数据模板，现在我想将其转换为图像格式。有没有一种技术可以将特定的

内容转换为图像而不使用canvas？请有人帮帮我！

当我点击保存时，我想将整个“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>

- luckyamit

我相信一定有浏览器插件可以为您完成这个任务。 - leftclickben

你目前做了什么？这只是HTML。 - HIRA THAKUR

是的，但我想在单击“保存”按钮后将“mydiv”的所有内部数据转换为图像格式？有什么解决方案吗？ - luckyamit

如果没有canvas，你可以使用这种方法http://buffernow.com/html-to-image-php-script/，但需要使用PHP和其他一些库。 - Rohit

2个回答

17

这个方案完美地起作用了...一定是最简单的解决方法。

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

//样式

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

这里是一个示例演示

- luckyamit

1

干得好！谢谢！你真的帮了我。 - r3mmel

你能再解释一下吗？我尝试打开你的示例演示链接，但是我仍然不理解，因为那里什么都没有发生... - dapidmini

1

你可以检查我的fiddle链接：http://jsfiddle.net/Sq7hg/3120/，我也在我的回答中更新了链接@dapidmini - luckyamit

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Scott · Accepted Answer

更新（2018年3月）：未来的朋友们好！这个答案仍然有很多访问量，我注意到我之前编写的旧JSFiddle已经无法使用，所以进行了更新。这里是展示此技术的新JSFiddle：https://jsfiddle.net/Sq7hg/1913。

--

如果您不能使用<canvas>，则可能需要考虑基于Flash的解决方案（尽管除非需要在旧版本的IE中运行，否则我不确定为什么您不能使用<canvas>）。

http://flashcanvas.net/是使用Flash模拟<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调用或类似的方法来发送图像数据到将data： URL转换为实际图像的PHP脚本，然后将其保存到您具有写入权限的目录中。如果这就是你要做的事情，而不是在这里讨论它，我建议从这个Stack Overflow问题开始：如何将HTML5 Canvas保存为服务器上的图像？