Javascript 使用drawImage将大型图像复制到画布会导致大量内存使用
我有一个23552px乘以8192px的大图像，用于将多个1024px×1024px的单个图像组合成一个图像，类似于精灵图像用于组合图标/资源的方式 我使用JavascriptJavascript 使用drawImage将大型图像复制到画布会导致大量内存使用,javascript,html,canvas,Javascript,Html,Canvas,我有一个23552px乘以8192px的大图像，用于将多个1024px×1024px的单个图像组合成一个图像，类似于精灵图像用于组合图标/资源的方式 我使用Javascriptimage对象加载该图像 然后我用drawImage将1024 x 1024个平铺中的一个从大图中复制出来，并复制到相同大小的屏幕外画布（1024 x 1024）中 然后，我使用drawImage将该屏幕外画布复制到另一个相同大小的屏幕外画布上。通常，在我的真实应用程序中，第二个画布实际上是屏幕上的画布，但为了简化问题的再
image function drawcanvas() {
var oImage = new Image();
oImage.onload = function() {
console.log('image loaded');
// tile size in pixels, the image loaded is 23552 x 8192, which has 23 x 8 tiles
var tileSize = 1024;
// create a canvas that is not on DOM
var hiddenCanvas = document.createElement('canvas');
hiddenCanvas.width = tileSize;
hiddenCanvas.height = tileSize;
var hiddenContext = hiddenCanvas.getContext('2d');
// create another canvas that is not on DOM
var masterCanvas = document.createElement('canvas');
masterCanvas.width = tileSize;
masterCanvas.height = tileSize;
var masterContext = masterCanvas.getContext('2d');
// 1) drawing one tile, 1024 x 1024, from the big image into a canvas that is 1024 x 1024
// this causes negligible memory increaase by itself
hiddenContext.drawImage(oImage, 0, 0, tileSize, tileSize, 0, 0, tileSize, tileSize);
// 2) copy the 1024 x 1024 canvas into another canvas that is 1024 x 1024
// this causes about 700MB of memory usage in both Chrome & Firefox on Mac
masterContext.drawImage(hiddenContext.canvas, 0, 0, tileSize, tileSize, 0, 0, tileSize, tileSize);
console.log('processing done');
};
oImage.src = "http://i.imgur.com/VcIOEJF.png";
}
Image