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

+1 vote

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>
Apr 29, 2020 in Java-Script by kartik
• 37,490 points
23,032 views

2 answers to this question.

+2 votes

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="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
 <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!!

Thank You!!

answered Apr 29, 2020 by Niroj
• 82,680 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

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!!

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

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!

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.

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

cheers!!

Love this code...it worked
0 votes

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
    }
});
answered Dec 15, 2020 by Gitika
• 65,870 points

Related Questions In Java-Script

0 votes
1 answer

How to send data in request body with a GET when using jQuery $.ajax()?

Hello @kartik, Sending the data in your scenario,I ...READ MORE

answered Jun 18, 2020 in Java-Script by Niroj
• 82,680 points
8,501 views
0 votes
1 answer

How to convert HTML to JSON using PHP?

Hello @kartik, If you are able to obtain ...READ MORE

answered Jun 19, 2020 in Java-Script by Niroj
• 82,680 points
2,232 views
0 votes
1 answer

How do I pass variables and data from PHP to JavaScript?

Hello @kartik, Simply use one of the following ...READ MORE

answered Jul 6, 2020 in Java-Script by Niroj
• 82,680 points
330 views
0 votes
1 answer

How to adjust width and height of iframe to fit with content in it?

Hello @kartik, <script type="application/javascript"> function resizeIFrameToFitContent( iFrame ) { ...READ MORE

answered Sep 4, 2020 in Java-Script by Niroj
• 82,680 points
2,183 views
0 votes
1 answer

What are the vulnerability related to PHP Form?

Hii, The $_SERVER["PHP_SELF"] variable can be used by ...READ MORE

answered Feb 13, 2020 in PHP by Niroj
• 82,680 points
331 views
+1 vote
1 answer

How can we send message multiple time to a specific person or group in whatsapp using loop?

Hii @kartik,  This is simple task to send single ...READ MORE

answered Feb 28, 2020 in Java-Script by Niroj
• 82,680 points
1,686 views
0 votes
1 answer

How can we parse JSON using Node.js?

Hello @kartik, You can simply use JSON.parse. The definition of ...READ MORE

answered Apr 24, 2020 in Java-Script by Niroj
• 82,680 points
131 views
0 votes
1 answer

Error:npm not working after clearing cache

Hello @kartik, Try this: npm cache clean --force OR It ...READ MORE

answered Jul 17, 2020 in Node-js by Niroj
• 82,680 points
1,979 views
0 votes
1 answer

How to select and manipulate CSS pseudo-elements such as ::before and ::after using jQuery?

Hii @kartik, Here is the way to access ...READ MORE

answered May 18, 2020 in Java-Script by Niroj
• 82,680 points
2,012 views
0 votes
2 answers

How can I set a session var using javascript and get it via php code?

Yes it is possible. You can either ...READ MORE

answered Aug 9, 2020 in Java-Script by Okugbe
• 280 points
6,931 views