将div转换为可下载的图像 [英] Convert div into downloadable Image

问题描述

这是我用来将div转换成图像并使用html2canvas.js下载的代码

This is the code which I am using to convert div into image and download that using html2canvas.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://html2canvas.hertzen.com/build/html2canvas.js"></script>
<style>
    #download{
        margin:10% 40%;
    }
    .download-btn{
        padding:10px;
        font-size:20px;
        margin:0 20px;
    }
    #test{
        background:#3399cc;
        padding:50px;
    }
    .x2{
        transform: scale(2,2);
    }
</style>


   <div id="download">
      <h1 id="test">Testing Download</h1>
   </div>

    <center>
        <button id="download-window" class="download-btn">New Window</button>
        <button id="download-png" class="download-btn">Download png</button>
        <button id="download-jpg" class="download-btn">Download jpg</button>
        <button id="download-pngx2" class="download-btn">Download pngx2</button>
    </center>


<script>
    $('#download-window').click(function(){

            html2canvas($('#download'), 
             {
                onrendered: function (canvas) {
                    var img = canvas.toDataURL("image/png");
                    window.open(img);
                }
             });
            });

    $('#download-png').click(function(){

            html2canvas($('#download'), 
             {
                onrendered: function (canvas) {
                var a = document.createElement('a');
                    a.href = canvas.toDataURL("image/png");       
                    a.download = 'image.png';
                    a.click();
                }
             });
            });

    $('#download-pngx2').click(function(){
         $('#download').addClass('x2');
            html2canvas($('#download'), 
             {
                onrendered: function (canvas) {
                var a = document.createElement('a');
                    a.href = canvas.toDataURL("image/png");       
                    a.download = 'image.png';
                    a.click();
                }
             });
        });

  $('#download-jpg').click(function(){
    html2canvas($('#download'), 
    {
      onrendered: function (canvas) {
        var a = document.createElement('a');
        // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
        a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
        a.download = 'image.jpg';
        a.click();
      }
    });
  });
</script>

此处生成的图像分辨率不佳。

Here image generated is not having good resolution.

有没有其他方法可以生成具有良好分辨率的图像？

Is there any other way to generate image with good resolution?

可以使用php函数执行此任务吗？

Can php function be used for doing this task?

推荐答案

这是一种简单的方法。

<div id="my-node">
  You will get a image downloaded.
</div>

<button id="foo">download img</button>

<script>
var node = document.getElementById('my-node');
var btn = document.getElementById('foo');
btn.onclick = function() {
node.innerHTML = "I'm an image now."
  domtoimage.toBlob(document.getElementById('my-node'))
    .then(function(blob) {
      window.saveAs(blob, 'my-node.png');
    });
}
</script>

这是一个演示：这个JSFiddle 。

在这个小提琴中，使用了两个库：

dom-to-image ： https：// github.com/tsayen/dom-to-image

FileSaver.js ： https://github.com/eligrey/FileSaver.js/

In this fiddle, two libraries are used:
dom-to-image: https://github.com/tsayen/dom-to-image
FileSaver.js: https://github.com/eligrey/FileSaver.js/

First一个用于将dom转换为图像，第二个用于下载图像。

First one is used to turn dom into image, second one is used to download the image.

更新：
如果你想得到一个img的base64，而不是只是下载img作为blob格式。你可以这样做：

Update: If you want to get a img of base64 instead of just downloading img as the blob format. You can do as below:

domToImage
    .toBlob(document.getElementById("my-node"))
    .then(function(blob) {
      saveBlobAsFile(blob, "XX.png");
    });
  // this function is to convert blob to base64 img
  function saveBlobAsFile(blob, fileName) {
    var reader = new FileReader();
    reader.onloadend = function() {
      var base64 = reader.result;
      var img = document.createElement("img");
      img.classList.add("me-img");
      img.setAttribute("src", base64);
      // insert the img to dom
      document.getElementById("bar").appendChild(img);
    };
    reader.readAsDataURL(blob);
  }

此处 FileSaver.js 不需要，我们使用html5 api FileReader来做这个伎俩。

Here FileSaver.js is not needed, we use html5 api FileReader to do the trick.

这篇关于将div转换为可下载的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！