如何修复JS中的“ DOMException：在'HTMLCanvasElement'上执行'toDataURL'失败：可能无法导出污染的画布”错误

Question

错误：函数“ toDataURL”显示错误“无法在'HTMLCanvasElement'上执行'toDataURL'：可能无法导出污染的画布”

我需要合并画布中的2张图像并将其转换为png文件。我有一个从其他画布转换的png图像，第二个图像是png文件。

// Initializing
window.onload = function()
{
    var canvas = document.getElementById('qr_canvas'),
        frontImg = document.getElementById('postcard_front_image'),
        context = canvas.getContext('2d');

    var originalFrontImg = new Image();
    originalFrontImg.src = frontImg.src;

    canvas.width = originalFrontImg.width;
    canvas.height = originalFrontImg.height;

    //console.log(originalFrontImg.width);

    // Drawing a postcard image
    context.beginPath();
    context.drawImage(/* source rectangle */ originalFrontImg, 0, 0, originalFrontImg.width, originalFrontImg.height);

    // Drawing a QR code
    context.beginPath();
    var qrDiv = document.getElementById('qrcode');
    var qr = qrDiv.getElementsByTagName('img')[0];
    var qrSize = 0.15; // Multiplier value (of image width)
    var ofset = 0.015; // Multiplier value (of image width)
    var width = originalFrontImg.width * qrSize;
    var height = originalFrontImg.width * qrSize;
    context.drawImage(/* source rectangle */ qr, 0, 0, qr.width, qr.height - qr.height / 10,/* destination rectangle */ canvas.width - width - originalFrontImg.width * ofset, canvas.height - height - originalFrontImg.width * ofset, width, height);

    var canvasImg = new Image();
    canvasImg.setAttribute('crossOrigin', 'anonymous');
    canvasImg.src = canvas.toDataURL("image/png");
}

我尝试将'crossOrigin'属性设置为“ anonymous”，但仍会引发相同的错误。