CODEWITHSUNDEEP
javascriptjquerycsscanvashtml5-canvas
Jack King
Jack King

Reputation: 231

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>

Upvotes: 2

Views: 11843

Answers (2)

Elanchezhiyan P
Elanchezhiyan P

Reputation: 86

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

Upvotes: 1

Hydrothermal
Hydrothermal

Reputation: 5081

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.

Upvotes: 4

Related Questions