Menu
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> 
484
DIV content can be saved as an image with the help of html2canvas() function in JavaScript. DIV tag defines a section in HTML document.
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); $.
You can save a canvas to an image file by using the method canvas. toDataURL() , that returns the data URI for the canvas' image data. The method can take two optional parameters canvas.
UPDATE (March 2018): Hello people of the future! This answer still gets a lot of traffic and I noticed that the old JSFiddle I'd put together was broken so it's been updated. New JSFiddle showing this technique is here: https://jsfiddle.net/Sq7hg/1913.
--
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).
http://flashcanvas.net/ is 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 using http://html2canvas.hertzen.com – 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 } }); I've knocked together a quick jsfiddle of this in action here: https://jsfiddle.net/Sq7hg/1913/ (note: updated link as per above)
This jsfiddle shows how to use the toDataURL() method to convert the canvas to an image and append it to the document. Saving the generated image to a server is an infinitely more complex task as it will require an AJAX call or somesuch to send the image data to a PHP script that converts the generated data: URL to an actual image and then saves it to a directory that you have permission to write to. If that's what you need to do, rather than going into that here I'd recommend starting with this Stack Overflow question: How to save an HTML5 Canvas as an image on a server?
100
This works perfectly...must be the simplest solution .
//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> //Style
#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 = []; for(var i = 0; i < binary.length; i++) { array.push(binary.charCodeAt(i)); } // Return our Blob object return new Blob([new Uint8Array(array)], {type: 'image/png'}); } </script> here is a sample demo
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With