How to convert entire div data into image and save it into directory without using canvas

Question

I have already created my data (template-containing image,text,label etc) inside div now i want to convert it into image format. is there any technique to convert a specific div content into images without using canvas.anybody plz help me ! i want to convert entire "mydiv" content into image and save that image into my image directory, when i click on save ?

<html>
  <header>
  </header>
  <body>
    <label> Template Design</label>
    <div id="mydiv">
      <label> Good Morning</label>
      <img src="mug.png" id="img1" height="100" width="100"  />
    </div>
    <input name="save" type="button" value="SAVE" />
  </body>
</html>

Niroj · Answer 1 · Apr 29, 2020

Hello @kartik,

You can try the sample code below: .

Html

<div id="mydiv" style="background-image:url(Koala.jpg) ;background-size: 100%;
background-size :200px 200px;
background-repeat: no-repeat;">
<p>text!</p>
<img src="mug.png" height="100" width="100"/></div>
<div id="canvas">
<p>Canvas:</p>
</div>

 <div style="width:200px; float:left" id="image">
 <p style="float:left">Image: </p>
 </div>
 <div style="float:left;margin-top: 120px;" class="return-data">
 </div>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

CSS

#mydiv {
background-color: lightblue;
width: 200px;
height: 200px
}

Script

  <script language="javascript">
    html2canvas([document.getElementById('mydiv')], {
    onrendered: function (canvas) {
    document.getElementById('canvas').appendChild(canvas);
    var data = canvas.toDataURL('image/png');
     //display 64bit imag
     var image = new Image();
    image.src = data;
    document.getElementById('image').appendChild(image);
    // AJAX call to send `data` to a PHP file that creates an PNG image from the dataURI string and saves it to a directory on the server

    var file= dataURLtoBlob(data);

// Create new form data
var fd = new FormData();
fd.append("imageNameHere", file);

$.ajax({
   url: "uploadFile.php",
   type: "POST",
   data: fd,
   processData: false,
   contentType: false,
}).done(function(respond){

    $(".return-data").html("Uploaded Canvas image link: <a href="+respond+">"+respond+"</a>").hide().fadeIn("fast");
    });

  }
});

function dataURLtoBlob(dataURL) {
// Decode the dataURL    
var binary = atob(dataURL.split(',')[1]);
// Create 8-bit unsigned array
var array = [];

Hope this work!!

To know more about Angular, It's recommended to join Angular Certification today.

Thank You!!

answered Apr 29, 2020 by Niroj
• 82,880 points

i'm having the same question can you explain a little bit more please?I still don't understand because nothing's happening there

commented Jul 30, 2020 by anonymous
• 100 points

Hello,

For better Understanding in order to know what I did you can check my fiddle link: jsfiddle.net/Sq7hg/3120

Hope this clear your doubts!!

commented Jul 30, 2020 by Niroj
• 82,880 points

Thank you so much... it worked finally and special thanks for the IDE you have refered...i"ll start using fiddle.

commented Jul 30, 2020 by anonymous
• 100 points

Hi, @There,

Thank you for your contribution to the Edureka Community.

Register/Sign up on the community to gain points for further contributions. You may ask questions, answer, upvote, and downvote an answer. Each of these would fetch you points and you could be among the top contributors and win exciting merchandise from Edureka.

Cheers!

commented Aug 3, 2020 by Edureka

No doubt @niroj solution is great but i want to add to soulution that you can use the ImageMagick library. In particular, the ImageMagick resize method will change the embedded resolution of a .png image using resampling for better quality.

commented Nov 20, 2020 by anonymous
• 100 points

Thanks for your contribution.. ImageMagick library is also great to use.

cheers!!

commented Nov 23, 2020 by Niroj
• 82,880 points

Love this code...it worked

commented Dec 12, 2020 by anonymous
• 100 points

Gitika · Answer 2 · Dec 15, 2020

You might want to look into a Flash-based solution if you can't use <canvas> (though unless this specifically needs to work in old versions of IE I'm not sure why you can't).

An emulation of <canvas> using Flash that might get you where you need to go. The documentation says that it supports toDataURL() so that might work for you.

Can you provide more insight into what your restrictions around <canvas> are and what you've attempted to try already?

//EDIT

According to your comment below you might be able to use <canvas>, in which case you can try – it's a JavaScript solution that basically re-writes the DOM of a specified part of your code to a <canvas> and then allows you to interact with it however you want, including turning it into image data via toDataURL().

I've not used it before, but your JavaScript code would look something like this:

html2canvas([document.getElementById('mydiv')], {
    onrendered: function(canvas) {
       var data = canvas.toDataURL('image/png');
       // AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server
    }
});