Save image with text as image in javascript photo gallery

Question

I have a temporary image that I want to copy to the gallery using javascript (phonegap). Any help?

function save() { var image = document.getElementById("tempImg"); //upload image to gallery of mobile . But how?? } 

My image contains photos and text together ...

I just want to arrange all the div data, including the image inside the div, with some text on it and save it as a full image with any format .jpg, png, etc. in javascript. I referenced this link, but for a canvas image, but I want a div for the image. Canvas to PhotoLibrary [Phonebook]

Answer 1

You might want to check out this URL: http://html2canvas.hertzen.com/ .

Using this script, you can convert your div to canvas and then use "Canvas to PhotoLibrary [Phonegap]" to do the rest.

Your code will look something like this:

 function save() { var image = document.getElementById("tempImg"); html2canvas(image, { onrendered: function(canvas) { // use "Canvas to PhotoLibrary [Phonegap]" on the canvas variable } }); } 

Answer 2

you save this using session store (or) local store

save:

 var z1,z2,z3; function save() { var a=$("#theme1_text").val(); var b=$("#image_div").css("background-image"); var c=$("#background_theme1").css("background-image"); sessionStorage.z1=a; sessionStorage.z2=b; sessionStorage.z3=c; }; 

View:

 function view() { $("#theme1_text").val(sessionStorage.z1); $("#image_div").css("background-image",sessionStorage.z2); $("#background_theme1").css("background-image",sessionStorage.z3); };