使用canvas-javascript css将div转换为单个图像 [英] convert div to single image with canvas-javascript css

问题描述

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

I try to convert content div below to a single image downloadable How is the piece with the canvas or other code after convert show Download Image button how i do it

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

推荐答案

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

You should use the html2canvas library for this. Make sure you set allowTaint to true so that it renders the cross-origin images as well. See this JSFiddle for an example.

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

The html2canvas function returns a promise that provides a <canvas> element which you can put wherever you want to display the rendered image. You can then treat it like you would any other canvas, including right-clicking it to download as an image.

此更新的JSFiddle 包含下载图像的链接。请记住，这仅适用于支持 a 标记上的下载属性的浏览器。

This updated JSFiddle includes a link to download the image. Keep in mind that this only works in browsers that support the download attribute on a tags.

这篇关于使用canvas-javascript css将div转换为单个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！