将 div 转换为可下载的图像

Posted 2023-02-24

【中文标题】将 div 转换为可下载的图像

【英文标题】：Convert div into downloadable Image

【发布时间】：2016-08-24 18:35:22

【问题描述】：

这是我用来将 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函数可以用来做这个任务吗？

【问题讨论】：

jsfiddle.net/enjoythedaycsk/9L966sdd/1 是例子

Check

可以转成图片下载吗？

使用html2canvas查看示例freakyjolly.com/…

【参考方案1】：

我们在生产系统中为 100 万以上的日常用户使用的一种好方法是完全在服务器端执行此操作 - 生成浏览器 (Chrome)；然后对其进行截图；然后将其流式传输到客户端。结果非常清晰/根本没有像素化 - 所有其他选项都非常像素化。

【讨论】：

你能详细解释一下吗？

【参考方案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 并将它们绘制到 canvas 元素上。

使用图像处理库提高分辨率

您可以使用ImageMagick 库。特别是，ImageMagick resize 方法将使用重采样来更改 .png 图像的嵌入分辨率以获得更好的质量。

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

如果您需要跨浏览器兼容性，那么您可以使用服务器大小的无头浏览器，例如 PhantomJS。

PhantomJS 的 captureJS 扩展允许您使用标准 CSS 选择器指定目标 div。 CaptureJS 允许您指定视口大小——有效地让您增加像素密度。

【讨论】：

Phantomjs 不是解决方案，因为它不会将 html div 捕获到图像中。 jsfiddle.net/enjoythedaycsk/9L966sdd/1我试图在这个例子中实现高分辨率的东西，但没有得到那个......点击下载pngx2按钮..是否可以在后端进行操作，比如点击按钮时画布变成两倍大小然后图片被捕获，然后画布再次恢复到正常大小..

如果您解释为什么需要更高的分辨率 - 打印、视网膜显示等，将会很有帮助。在等待进一步解释之前，我已在我的回答中为建议添加了一些细节。我已经展示了如何增加 html2canvas 输出的像素密度。我已经向您指出了 PhantomJS 的更具体的扩展，它允许您捕获仅 div 并更改像素密度。我还建议使用图像处理库来增加 html2canvas 图像的分辨率，方法是使用传统的 upscale-with-resampling。干杯！

【参考方案3】：

这是一个简单的方法。

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

这是一个演示：this JSFiddle。

在这个小提琴中，使用了两个库：dom-to-image:https://github.com/tsayen/dom-to-imageFileSaver.js:https://github.com/eligrey/FileSaver.js/

第一个用于将dom转为image，第二个用于下载image。

更新： 如果您想获得 base64 的 img 而不是仅仅将 img 下载为 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 来解决问题。

【讨论】：

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