Question

我正在开发一款使用大型图像的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";

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

Answer 1

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

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Answer 2

tempCanvas.style.visibility = 'hidden';

这可能会给你带来问题。

我建议你制作一个相对定位的游戏包装div 然后添加这个绝对定位的画布，然后给它一个负的z-index，这样它就会在画布后面消失，但技术上仍然可见。

 <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>

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

2 个答案: