Jack King Jack King - 3 months ago 15
Javascript Question

convert div to single image with canvas-javascript css

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>




Answer

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.

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.

Comments