javascript - 画布下载为空白图像

Question

我正在尝试使用画布将表格中的背景颜色保存为图像。

该列表包含 625 种背景颜色 (RGBA)。

用于保存图像的代码部分。'#blank' 指向 25 x 25 像素的空白图像

window.addEventListener('load', function(ev) {
    var sourceimage = document.getElementById('blank');
    //sourceimage.style.display = 'none';
    var canvas = document.getElementById('out');
    // canvas.style.display = 'none';
    var context = canvas.getContext('2d');


    function transfer() {
        let pixels = context.getImageData(0, 0, canvas.width, canvas.height);
        let imgData = pixels.data;
        let saveData = getSaveDataImage();
        for (let i = 0; i < pixels.data.length; i++) {
            imgData[i] = saveData[i];
        }
        console.log(pixels.data);
        context.putImageData(pixels, 0, 0);
    }

    function canvasToImage(ev) {
        let T = ev.target;
        if (T.tagName === 'IMG') {
            canvas.height = T.offsetHeight;
            canvas.width = T.offsetWidth;
            context.drawImage(T, 0, 0, T.offsetWidth, T.offsetHeight);

            transfer();
            url =  canvas.toDataURL('image/png');

            let a = document.createElement('a');
            a.href = url;
            a.download = "pixelPaint.png";

            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        }
    }

    save_.addEventListener('click', function () {
        sourceimage.click();
    })

    document.body.addEventListener('click', canvasToImage, false);
} ,false);

如果我进行上述传输，然后使用 .toDataURL() 保存画布，我会下载一个空白图像

为什么会这样？

标签： javascripthtml5-canvas