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


7 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
    Replies
    1. If you are using Angular js you can simply write
      bind-html = "binaryimage";

      Delete
  3. I found your this post while searching for some related information on blog search...Its a good post..keep posting and update the information. recover money lost to binary options

    ReplyDelete
  4. Thanks for a wonderful share. Your article has proved your hard work and experience you have got in this field. Brilliant .i love it reading. what county am i in now

    ReplyDelete
  5. Easily, the article is actually the best topic on this registry related issue. I fit in with your conclusions and will eagerly look forward to your next updates. How to make success with affiliate marketing

    ReplyDelete
  6. Great post, and great website. Thanks for the information! sinais iq option

    ReplyDelete