Question

我尝试将下面的内容div转换为单个图像可下载转换后如何使用画布或其他代码显示下载图像按钮我是怎么做的

＆＃13;

 #content{
          position: absolute;
          width: 300px;
          height: 200px;
          border: 5px solid red;
          overflow: hidden;
      }
      #img1{
          width: 300px;
          height: 200px;
                 position: absolute;
          z-index: 5;
    
      }
      #img2{
          position: absolute;
          z-index: 6;
          
           width: 150px;
          height: 190px;
      }
      #img3{
          position: absolute;
          z-index: 7;
          width: 200px;
          height: 100px;
          
          
      }

＆＃13;

<div id="content">
    <img id="img1" src="http://www.completeleasing.co.uk/media/sector%20images/software-2.jpg">
    <img id="img2" src="http://www.ipwatchdog.com/wp-content/uploads/2015/08/programing-software.jpg">
     <img id="img3" src=" http://www.sikich.com/blog/image.axd?picture=%2F2014%2F04%2FTeam.jpg">
   
    </div><br><br><br><br><br><br><br><br><br><br><br><br>
    <input type="button" value="convert div to image"><br>
    <h3>result:</h3>

＆＃13;

Answer 1

您应该使用html2canvas library。确保将allowTaint设置为true，以便它也会渲染跨源图像。有关示例，请参阅this JSFiddle。

html2canvas函数返回一个承诺，该承诺提供<canvas>元素，您可以将其放在任何想要显示渲染图像的位置。然后，您可以像对待任何其他画布一样对待它，包括右键单击它作为图像下载。

This updated JSFiddle包含下载图片的链接。请注意，这仅适用于支持download代码a属性的浏览器。

Answer 2

将这个JS文件下载并导入到需要将div转成图片的页面。 Link

图片格式可以更改为 PNG 或 JPG。

在点击功能上使用以下函数。

var tagName = document.getElementsByClassName("grid-div-tag").id;
html2canvas(document.getElementById(tagName)).then(function (canvas) {
    var anchorTag = document.createElement("a");
    document.body.appendChild(anchorTag);
    anchorTag.download = "Picture.png";
    anchorTag.href = canvas.toDataURL();
    anchorTag.target = '_blank';
    anchorTag.click();
});

参考链接：https://codepedia.info/convert-html-to-image-in-jquery-div-or-table-to-jpg-png

使用canvas-javascript css将div转换为单个图像

2 个答案: