How to prevent black background when saving a div to png

问题

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 :)

回答1:

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

回答2:

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

来源：https://stackoverflow.com/questions/19096546/how-to-prevent-black-background-when-saving-a-div-to-png