Javascript JS调整图像大小，然后保存调整大小的图像

我正在开发一款使用大图像的JS游戏。我希望能够在游戏开始之前（加载时）缩小它们，以适应画布的大小。在线查看我发现调整图像大小的唯一方法是通过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";

---

我希望看到绘制的已调整大小的图像，但没有得到任何结果。

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

Uncaught SecurityError:未能在“htmlcanvasement”上执行“toDataURL”：可能无法导出受污染的画布。

tempCanvas.style.visibility = 'hidden';

这可能会给你带来麻烦

我建议你在游戏中做一个包装div 然后将此画布绝对定位，然后给它一个负z索引，这样它将消失在画布后面，但技术上仍然可见

 <div style='position:relative'>
    <canvas id='forresize' style="z-index:-100;position;absoulte;top:0p;left:0px;">
    </canvas>
    <div id='wrapper' style='position:absolute;top:0px;left:0px;width:100%;height:100%;">
         Your game divs/elements here
    </div>
 </div>

我尝试在我的电脑上本地使用一个图像，但同样的安全错误突然出现。您是否也在计算机上使用JavaScript代码运行该文件，或者正在使用JSFIDLE或codepen之类的服务？要使其正常工作，所有组件（代码和图像）必须位于cyperspace中的同一位置；）我已经在我的计算机上本地复制了您的代码，并且行tempCanvas.style.visibility='hidden'；`正如Michael Dibbets的回答中所建议的，是导致问题的代码行。是的，具有可见性的代码行导致了问题，但当我删除该行时，我得到了另一个错误。我在本地运行所有东西，甚至是代码。此外，该代码在firefox上运行良好，但在chrome上运行不好。