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

Question

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

 #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;
          
          
      }

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

Answer 1

你应该使用 html2canvas library为了这。确保设置 allowTaint至 true这样它也可以渲染跨源图像。参见 this JSFiddle举个例子。

html2canvas函数返回一个提供 <canvas> 的 promise 你可以把它放在任何你想显示渲染图像的地方。然后，您可以像对待任何其他 Canvas 一样对待它，包括右键单击它以下载为图像。

This updated JSFiddle包括下载图像的链接。请记住，这仅适用于支持 download 的浏览器。 a 上的属性标签。