convert div to single image with canvas-javascript css

Question

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>

Hydrothermal · Accepted Answer · 2016-08-10 20:49:27Z

4

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.

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.

edited Aug 10, 2016 at 20:49

answered Aug 10, 2016 at 20:32

Hydrothermal

5,1317 gold badges33 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jack King Over a year ago

great answer thank you sir but you can add button to save result image

Hydrothermal Over a year ago

@JackKing I've edited my answer to include the download button.

Jack King Over a year ago

After pressing the loading and when I do I open the image location loading .. picture does not open

Hydrothermal Over a year ago

@JackKing My mistake; tainted canvases can't be exported via .toDataURL(). In order to download the canvas as an image you will have to host all the images on the same domain as the HTML file.

Jack King Over a year ago

Can you solve this problem .. because i used in mobile so i need button to download :(

|

Sven Eberth · Accepted Answer · 2021-06-24 20:04:37Z

1

Download and import this JS file to the page where you need to convert div to image. Link

Image format can be changed to PNG or JPG.

Use the below function on onclick functionality.

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();
});

Reference link: https://codepedia.info/convert-html-to-image-in-jquery-div-or-table-to-jpg-png

edited Jun 24, 2021 at 20:04

Sven Eberth

3,09012 gold badges27 silver badges31 bronze badges

answered Jun 24, 2021 at 16:31

Elanchezhiyan P

869 bronze badges

Collectives™ on Stack Overflow

convert div to single image with canvas-javascript css

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related