canvas 保存图片纯黑

Question

两个canvas图形保存图片，都是调用的同一个方法。但是其中一个保存为黑的，另一个确实好的。

这第一个没问题，保存出来的图片就是网页上显示的。

但是，右边的保存就有问题了，保存不成功，保存出来的是一个png黑屏图。

function saveAsLocalImage() {
        var myCanvas = $('#demoCanvas')[0];
        console.log(myCanvas);
        saveImg(myCanvas, "draw_" + new Date().getTime() + ".png");
    }

    function saveImg(canvas,filename) {//canvas保存为图片
        if (canvas.msToBlob) {//IE9+浏览器
            console.log("1111111");
            var blob = canvas.msToBlob();
            window.navigator.msSaveBlob(blob, filename);
        } else {//firefox,chrome
            console.log("222222");
            var save_link = document.createElementNS(
                    'http://www.w3.org/1999/xhtml', 'a');
            save_link.href = canvas.toDataURL('image/png');
            save_link.download = filename;
            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0,
                    false, false, false, false, 0, null);
            save_link.dispatchEvent(event);
        }
    }

Answer 1

编码问题，网上找一下图像base64

Answer 2

这个问题很简单，就是画布需要先用白色填充一下。如果您不用白色填充，默认保存时背景是黑色的。所以就是黑黑的一片。

Answer 3

这估计是js的异步机制的问题吧，存在图片未onload完成就执行了 save_link.href = canvas.toDataURL('image/png');所以你的图片是空白的，至于黑色估计是设置了canvas填充为黑色或者容器背景为黑色

    img.onload = function() {
      // 确保要保存的图片都加载完成再执行canvas.toDataURL('image/png')  
    }