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

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中创建了我的数据(包含模板的图像、文本、标签等)现在我想把它转换成图像格式。有没有什么技术可以在不使用canvas的情况下将特定的div内容转换成图像。谁来帮帮我!我想要将整个“mydiv”内容转换成图像并将该图像保存到我的图像目录中，当我单击save时?

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

2 个解决方案

#1

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: 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).

如果您不能使用

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/是使用Flash对

Can you provide more insight into what your restrictions around <canvas> are and what you've attempted to try already?

您能提供更多关于

//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().

根据你的评论下面你可以使用 <帆布> ,在这种情况下,你可以尝试使用http://html2canvas.hertzen.com,这是一个JavaScript解决方案,基本上重写指定的DOM代码的一部分 <帆布> ,然后允许你然而你想与之交互,包括将其转化为图像数据通过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调用或somesuch将图像数据发送到一个PHP脚本,该脚本将生成的数据:URL,以一个实际的图像,然后保存到一个目录有写权限。如果这是您需要做的，而不是在这里，我建议您从这个堆栈溢出问题开始:如何将HTML5 Canvas保存为服务器上的映像?

#2

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>

here is a sample demo

这是一个示例演示

#1