将 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到图像
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/

第一个用于将dom转为图像，第二个用于下载图像.

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

更新:如果您想获得 base64 的 img 而不是仅仅将 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屋！