JS調整大小的圖像，然後保存調整大小的

我正在使用大型圖像的JS遊戲。我希望能夠在遊戲開始前（加載時）縮小它們以適應畫布的大小。在網上查找我發現調整圖像大小的唯一方法是通過drawImage，但我注意到如果我通過drawImage縮小圖像，性能不會提高。即使縮小的圖像應該繪製得更快。所以我寫了這個腳本來調整圖像的大小，但似乎有問題。JS調整大小的圖像，然後保存調整大小的

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

我希望看到調整大小的圖像，但我什麼都沒有。

來源

2015-06-29 user1546022

問題在於使用外部（與腳本不在同一服務器上）與toDataURL（）一起使用，這是不允許的。因此，錯誤消息：

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

來源

2015-06-29 14:34:37 Niddro

除非他/她是在wikimedia.org工作過程 –

的我想我的電腦上使用本地的圖像，但此相同的安全錯誤彈出。 – user1546022

您是否正在使用JavaScript代碼在計算機上運行該文件，或正在使用諸如jsfiddle或codepen之類的服務？爲此，所有組件（代碼和圖像）需要位於cyperspace中的相同位置;） – Niddro

tempCanvas.style.visibility = 'hidden';

這將可能給你的問題。

我建議你在遊戲中製作一個包裝div，相對定位然後將此帆布absosolutely定位，然後給它一個負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>

來源

2015-06-29 14:37:12 Tschallacka

JS調整大小的圖像，然後保存調整大小的

回答

相關問題