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

0 votes

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 in Java-Script by kartik
• 11,890 points
160 views

1 answer to this question.

0 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 by Niroj
• 23,950 points

Related Questions In Java-Script

0 votes
1 answer

How to Scroll to the top of the page using JavaScript?

Hii @kartik, Using javascript <script> $("a[href='#top']").click(function() { ...READ MORE

answered Apr 2 in Java-Script by Niroj
• 23,950 points
15 views
0 votes
1 answer

How to Abort Ajax requests using jQuery?

Hello kartik, Just use ajax.abort(). For example you could ...READ MORE

answered Apr 27 in Java-Script by Niroj
• 23,950 points
42 views
0 votes
1 answer

How to change url after success in ajax without page reload?

Hello @kartik, Use the browser history to change ...READ MORE

answered Apr 29 in Java-Script by Niroj
• 23,950 points
70 views
0 votes
1 answer

How can I update NodeJS and NPM to the next versions?

Hello @kartik, First check your NPM version npm -v 1).Update ...READ MORE

answered May 5 in Java-Script by Niroj
• 23,950 points
29 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 in PHP by Niroj
• 23,950 points
71 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 in Java-Script by Niroj
• 23,950 points
41 views
0 votes
0 answers

Anyone can help me out to understand the semantic of (document.getElementBYId("demo").innerHTML="Hello") ?

Hello guys, Can Someone helps me to find ...READ MORE

Jan 17 in Web Development by anonymous
• 11,890 points
48 views
0 votes
1 answer
+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 in Java-Script by Niroj
• 23,950 points
250 views