javascript - JS调整图片大小然后保存调整后的图片

Question

我正在开发一个使用大图像的 JS 游戏。我希望能够在游戏开始之前(加载时)缩小它们以适应 Canvas 的大小。在网上查看时，我发现调整图像大小的唯一方法是通过drawImage，但我注意到如果通过drawImage缩小图像，性能不会提高。即使缩小的图像应该绘制得更快。所以我编写了这个脚本来预先调整图像大小，但它似乎有问题。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var resizeImage = function (img, newWidth, newHeight) {
    var image = new Image();
    var tempCanvas = document.createElement('canvas');
    var tempContext;

    tempCanvas.id = 'tempCanvas';
    tempCanvas.width = newWidth;
    tempCanvas.height = newHeight;
    tempCanvas.style.visibility = 'hidden';

    document.body.appendChild(tempCanvas);

    tempContext = tempCanvas.getContext('2d');
    tempContext.drawImage(img, 0, 0, newWidth, newHeight);
    image.src = tempCanvas.toDataURL("image/png");
    return image;
};

var img = new Image();
var resizedImg;
img.onload = function () {
    resizedImg = resizeImage(this, this.width / 4, this.height / 4);
    resizedImg.onload = function () {
        ctx.drawImage(resizedImg, 0, 0);
    }
};
img.src = "https://upload.wikimedia.org/wikipedia/en/3/39/Wakerlink.jpg";

我希望看到绘制的调整大小的图像，但我什么也没得到。

Answer 1

问题在于将外部(与脚本不在同一服务器上)图像与 toDataURL() 一起使用，这是不允许的。因此错误消息:

未捕获的安全错误:无法在“HTMLCanvasElement”上执行“toDataURL”:可能无法导出受污染的 Canvas 。