How to prevent black background when saving a div to png

Question

I´m using HTML2canvas, filesaver.js and canvas2blob.js to achieve an in-browser save-dialogue. The on-the-fly canvas-creation and saving works fine except the image background is black.

The problem is the base64-encoded image of the div with id="drop1" (the user drags and drops an image from his desktop to the html and then that image is put as background as base64).

How can I achieve a visible output in the png file?

my JS:

// save img magic
// html2canvas.js linked with filesaver.js and canvas2blob.js for compatibility polyfilling
$('#1stSave').click(function() {
    var html2obj = html2canvas($('#drop1'));
    var queue  = html2obj.parse();
    var canvas = html2obj.render(queue);
    canvas.toBlob(function(blob) {
        saveAs(blob, "teaser-384x168px.png");
    });
});

Thanks so much in advance :)

score 0 · Answer 1 · edited Sep 30 '13 at 15:19

0

$('#element').css('background-color','transparent');

edited Sep 30 '13 at 15:19

Tushar Gupta - curioustushar

58,085
24
103
107

answered Sep 30 '13 at 14:25

jnnj

1

sorry, that doesn´t work. I tried it with the element holding the background image. – Karl Sep 30 '13 at 14:31

score 0 · Accepted Answer · answered Sep 30 '13 at 15:12

Got it working with a different syntax:

   html2canvas($('#drop1'), {
     onrendered: function(canvas) {
            var img = canvas.toDataURL()
            canvas.toBlob(function(blob) {
            saveAs(blob, "teaser-384x168px.png");
        }, "image/png");
            }
    });

I hope you can use this for your own. Cheers

How to prevent black background when saving a div to png

2 Answers2

Linked