Copying image without a src to printable window

Question

I have a javascript project that TLDR creates a barcode. On the button click I want to print the barcode that gets generated by the internal guid I am using the jsBarcode.js plugin which takes a string and turns it into a barcode. Here is the html markup for that div.

<div id="printable">
    <img id="barcode"></img>
</div>

The barcode shows up perfectly it's just when trying to copy it over to a new window it doesnt show up :(

I have tried multiple ways of doing this and have had no luck. Right now I have this code and on the window that pops up it just shows object Object

var printContent = new $('#barcode').clone();
var w = window.open('','','width=340,height=260');

var windowContent = '<!DOCTYPE html>';
    windowContent += '<html>';
    windowContent += '<head><title>Print canvas</title>';
    windowContent += '</head>';
    windowContent += '<body>';
    windowContent += '<img id="printWindowBarcode">' + printContent + '</img>';
    windowContent += '</body>';
    windowContent += '</html>';
    w.document.write(windowContent);
    w.focus();
    w.print();
    w.close();

I have had no luck with doing this.. I can make just text content show up now problem, but have no clue on how to do it when linking an image with no source... Any help would be greatly appreciated.

On the plugin page, example barcodes actually have sources : http://lindell.me/JsBarcode/ It's a base64 image, directly hardcoded into the image source. You can very well save/print base64 images. — Jeremy Thille, Feb 16 '15 at 20:24
`'' + printContent + ''` – is that how image elements are supposed to look in HTML? (Hint: If it was, I wouldn’t be asking …) And trying to concatenate a jQuery object into a string doesn’t make sense either. — CBroe, Feb 16 '15 at 20:29
@JeremyThille Do you know to access the source then? I was not aware it had a hardcoded src attached to it, so this should be a lot easier than I thought. — BesaseB, Feb 16 '15 at 20:33
How to access the source? Simply with `$('#myImg').attr('src')` and voila, you get your base64 data. You can draw it on a canvas etc. — Jeremy Thille, Feb 16 '15 at 20:37
@JeremyThille So then when I go to re-draw the image I just would do `$('#barcode').getContext('src;);` ? (Sorry I havent used canvas really I just know of it... :( ) — BesaseB, Feb 16 '15 at 20:45
Nope, have a look here : http://stackoverflow.com/questions/4409445/base64-png-data-to-html5-canvas — Jeremy Thille, Feb 16 '15 at 20:50
@JeremyThille nevermind, I'm just going to try and keep it as an img and make the `src=$('#barcode').attr('src');` If you want to post an answer I'll accept it for you so you get your rep :) — BesaseB, Feb 16 '15 at 20:52
@JeremyThille it works now thank you! Make an answer so I can accept it! — BesaseB, Feb 16 '15 at 20:56

score 0 · Accepted Answer · edited May 23 '17 at 11:43

0

On the plugin page, example barcodes actually have sources : lindell.me/JsBarcode It's a base64 image, directly hardcoded into the image source. You can access the source simply with $('#myImg').attr('src') and voila, you get your base64 data. You can draw it on a canvas, etc. Have a look here : Base64 png data to html5 canvas

edited May 23 '17 at 11:43

Community

1
1

answered Feb 16 '15 at 20:55

Jeremy Thille

26,047
12
43
63

Copying image without a src to printable window

1 Answers1