div to image to download

Question

i have problem puting div in the image. The thing is that I want to make div as downloadable (right click, download as image OR on button). This is my div which i want to be "downloadable"

<div style="display: block; background-color: transparent; background-repeat: no-repeat; background-image: url(&quot;images/fujairah-plates.png&quot;); background-size: contain; min-height: 90px;" class="" id="plate">      
          <div id="plate2"></div>             
          <div class="letter-left draw_code" id="draw_code">&nbsp;B</div>
          <div class="letter-right draw_num" id="draw_num">&nbsp;</div></div>

I hope for some constructive suggestions.

How looks like a 'downloadable' DIV? Could you explain better your expected behaviour? You want to download relevant DIV HTML or what??? — A. Wolff, Oct 03 '15 at 09:19
1st thing is how to tell browser that content of div is downloadable as image — benzo, Oct 03 '15 at 09:20
You could render HTML content into canvas but with some limitations regarding specific properties support. Here is an example using HTML2Canvas plugin: http://jsfiddle.net/fMeRC/1/ — A. Wolff, Oct 03 '15 at 09:21
image still dont get rendered... i dont know why http://jsfiddle.net/fMeRC/296/ — benzo, Oct 03 '15 at 09:51
That's part of limitation(s). Canvas are subject to cross domain origin policy. You could proxify it server side your images so they have same domain as your page or if your own images from different server, enable CORS. Read that for some ideas: http://stackoverflow.com/questions/18474727/canvas-has-been-tainted-by-cross-origin-data-work-around — A. Wolff, Oct 03 '15 at 09:56
well, i fixed problem with changing line 350 to topPos = isNaN(parseInt(bgposition[1], 10)) ? topPos : parseInt(bgposition[1], 10); — benzo, Oct 03 '15 at 10:12
Ok i see, you are referring to this fix: https://github.com/niklasvh/html2canvas/issues/265 But that's still has nothing to do with cross domain images (as i understand it). So be aware of it. EDIT: just find it, i wasn't aware about it, would help i guess in these cases: http://stackoverflow.com/questions/17114236/html2canvas-onrender-failed-because-of-cross-domain-images — A. Wolff, Oct 03 '15 at 10:37

score 0 · Answer 1 · answered Oct 03 '15 at 10:30

You can use HTML2Canvas JS library to convert the HTML into a canvas and after that, you can export the canvas to data URI using the toDataURI() JavaScript function. That data URI string can be then presented as a downloadable image. P. S: I've tried it and it works perfectly. ☺

div to image to download

1 Answers1