将div转换为可下载的图片

Question

这是我正在使用的代码，用来将div转换为图片并使用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>

这里生成的图像分辨率不够好。

是否有其他方法可以生成高分辨率的图像？

可以使用PHP函数来完成这个任务吗？

- Siren Brown

---

https://jsfiddle.net/enjoythedaycsk/9L966sdd/1/ 是一个示例。 - Siren Brown

Check - Litestone

我可以将它转换成图片并下载吗？ - Siren Brown

请看这里使用html2canvas的示例：http://www.freakyjolly.com/convert-html-document-into-image-jpg-png-from-canvas/ - Code Spy

Answer 1

这里有一个简单的方法来实现这个目标。

<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/ 第一个库用于将dom转换为图片，第二个库用于下载图片。

更新： 如果你想要得到一个base64格式的图片而不仅仅是以blob格式下载图片，可以按照以下步骤进行：

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 来完成操作。

- Lying_cat

---

请在以后的帖子中包含所有相关代码，不要仅包含代码托管站点的链接。您的帖子应该独立于任何其他资源；考虑一下如果该站点将来关闭会发生什么！您可以通过[编辑]您的答案，轻松地直接将JS Fiddle代码合并到答案中。 - Tom Aranda

Answer 2

通过增加像素来提高分辨率

分辨率有点类似于像素密度。如果您想要更高的分辨率，那么一种尝试创建更多像素的方法是创建一个具有比例更大的宽度和高度的第二个画布，然后使用secondaryContext.scale和secondaryContext.drawImage(mainCanvas,0,0)将主画布内容放大并绘制到第二个画布上。例如，在打印机上使用此较大的画布。

以下是一个以牺牲一些清晰度为代价来增加像素密度的示例。您没有说明为什么需要更高的分辨率，但是如果您要将图像输出到打印机，则此示例非常有用。注意：打印出的页面会比您提供给打印机的密度增加的图像更清晰，因为打印机的分辨率更高（可能是300dpi打印机分辨率与72/96ppi之间的差异）。

var divX2=document.createElement('canvas');
divAt2X('#download',1.5);

$('#go').on('click',function(){
    // save
    var a = document.createElement('a');
    a.href = divX2.toDataURL("image/png");       
    a.download = 'image.png';
    a.click();                
});

function divAt2X(id,upscale){
    var w=$(id).width();
    var h=$(id).height();
    html2canvas($(id),{
        onrendered:
            function(canvasDiv){
                // scale up
                ctx=divX2.getContext('2d');
                divX2.width=w*upscale;
                divX2.height=h*upscale;
                ctx.scale(upscale,upscale);
                ctx.drawImage(canvasDiv,0,0);
            }
        }
    );
}

        #download{
            margin:10% 20%;
        }
        .download-btn{
          padding:10px;
          font-size:20px;
          margin:0 20px;
        }
        #test{
          background:#3399cc;
          padding:50px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='https://html2canvas.hertzen.com/build/html2canvas.js'></script>
<button id='go'>Download 1.5X</button><span>(IE/Edge don't support download)</span>
<div id="download"><h1 id="test">Testing Download</h1></div>

如果您已经放弃使用 html2Canvas，那么您的前进道路会更加困难，因为 html2Canvas 是我们阅读 html+css 并将其绘制到画布元素中的工具之一（也许是唯一的工具）。

使用图像处理库增加分辨率

您可以使用 ImageMagick 库。特别是，ImageMagick resize 方法将使用重采样来改变.png 图像的嵌入式分辨率，从而提高质量。

在服务器上使用无头浏览器捕获 Div

如果您需要跨浏览器兼容性，则可以使用像 PhantomJS 这样的服务器端无头浏览器。 CaptureJS 扩展程序可让 PhantomJS 按照标准 CSS 选择器指定目标 div。CaptureJS 允许您指定视口大小-有效地让您增加像素密度。

- markE

---

Phantomjs不是解决方案，因为它无法将HTML div转换为图像。https://jsfiddle.net/enjoythedaycsk/9L966sdd/1/我尝试在这个示例中实现高分辨率的东西，但没有成功...点击下载pngx2按钮。是否有可能在后端进行操作，例如当按钮被点击时，画布变成两倍大小，然后捕获图片，然后再将画布恢复到常规大小？ - Siren Brown

如果您能解释一下为什么需要更高的分辨率，比如打印、视网膜显示等，那会很有帮助。在进一步解释之前，我已经对我的答案中的建议进行了一些详细说明。我展示了如何增加html2canvas输出的像素密度。我指向了一个更具体的PhantomJS扩展，它允许您捕获仅div并更改像素密度。我还建议使用图像处理库来使用传统的上采样和重采样方法提高html2canvas图像的分辨率。干杯！ - markE

Answer 3

在工作中，我们使用了一种非常好的方法，在每天超过100万用户的生产系统中完全在服务器端完成 - 生成一个浏览器（Chrome）；然后对其进行截屏；然后将其流式传输到客户端。结果非常清晰/没有像素化 - 所有其他选项都会出现相当多的像素化。

- Alex Weinstein

---

你能否详细地解释一下给我听？ - Siren Brown

这更像是一条评论，而不是一个答案，因为没有包含任何代码。 - Mark Schultheiss