24

我已经在 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>
4

2 回答 2

31

更新（2018 年 3 月）：未来的人们你好！这个答案仍然有很多流量，我注意到我放在一起的旧 JSFiddle 已经坏了，所以它已经更新了。展示这种技术的新 JSFiddle 在这里：https ://jsfiddle.net/Sq7hg/1913 。

--

如果你不能使用，你可能想研究一个基于 Flash 的解决方案<canvas>（尽管除非这特别需要在旧版本的 IE 中工作，我不确定你为什么不能）。

http://flashcanvas.net/是<canvas>使用 Flash 的模拟，它可能会带你去你需要去的地方。该文档说它支持toDataURL()，因此可能对您有用。

您能否更深入地了解您的限制<canvas>是什么以及您已经尝试过什么？

//编辑

根据您在下面的评论，您可能可以使用<canvas>，在这种情况下，您可以尝试使用http://html2canvas.hertzen.com - 这是一个 JavaScript 解决方案，基本上将代码的指定部分的 DOM 重写为 a<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 转换为实际图像，然后将其保存到您拥有的目录写入权限。如果这是您需要做的，而不是在这里进行，我建议从这个 Stack Overflow 问题开始：如何将 HTML5 Canvas 保存为服务器上的图像？

于 2013-08-31T06:16:23.250 回答
16

这完美地工作......必须是最简单的解决方案。

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

这是一个示例演示

于 2013-09-02T06:02:59.403 回答