view raw
Jack King Jack King - 9 months ago 52
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

position: absolute;
width: 300px;
height: 200px;
border: 5px solid red;
overflow: hidden;
width: 300px;
height: 200px;
position: absolute;
z-index: 5;

position: absolute;
z-index: 6;

width: 150px;
height: 190px;
position: absolute;
z-index: 7;
width: 200px;
height: 100px;


<div id="content">
<img id="img1" src="">
<img id="img2" src="">
<img id="img3" src="">

<input type="button" value="convert div to image"><br>


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.