Saturday, 17 May 2014

Save google map as binary image

There are some situations we have to save google map as an image. It is always better to convert as a binary image and save to DB so that we can reuse very easily.

Here we are plotting the google map


 <div id="googlemap"></div>

Here we are displaying the converted binary image


 
 <div id="googlemapimage">
 <img id="googlemapbinary"/>
 </div>

 

Let us check the code now



function convertasbinaryimage()
{ 
html2canvas(document.getElementById("googlemap"), {

useCORS: true,

onrendered: function(canvas) {
     
 var img = canvas.toDataURL("image/png"); 
   
 img = img.replace('data:image/png;base64,', '');
 
 var finalImageSrc = 'data:image/png;base64,' + img;
 
 $('#googlemapbinary').attr('src', finalImageSrc);                    
 
 return false;                    
}
});
}
 

What I have done is that, I used html2canvas plugin support and then converting to binary image .Now you can take this html or binary code and can save to DB

Don't forget to add html2canvas plugin


http://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js

References

1. html2canvas

2. Google Map Api

Related Posts

1. Save high chart as binary image

2. Responsive high chart

3. Integration of CK-Editor to ui

4. Dynamic height for side bar

5. Auto complete using html5


2 comments :

  1. shower full code with demo i am new to it

    ReplyDelete
  2. lol bro you got it thx you really help me but one question how can use the imege in the controller im using aps.net mvc4

    ReplyDelete