我目前正在制作 Word Web 加载项。这使用 Internet Explorer 作为引擎。我的加载项需要从用户计算机加载多个选定的图像。
因为某些选定的图像可能非常大,我使用 HTML5 画布调整它们的大小。这是我调整大小的代码:
function makeSmallImage(imageContainer, retries)
{
if (retries === undefined)
retries = 0;
console.log('Resizing image..')
return new Promise(function (resolve, reject)
{
img = img || new Image();
img.onload = function ()
{
// calculate new size
var width = 200;
var height = Math.floor((width / img.naturalWidth) * img.naturalHeight);
console.log('new size', width, height);
try
{
// create an off-screen canvas
canvas = canvas || document.createElement('canvas'),
ctx = ctx || canvas.getContext('2d');
// antialiasing
ctx.imageSmoothingEnabled = true;
// set its dimension to target size
canvas.width = width;
canvas.height = height;
// draw source image into the off-screen canvas:
ctx.drawImage(img, 0, 0, width, height);
// clean up
imageContainer.largeData = undefined;
if (img.src.substr(0, 4) === 'blob')
URL.revokeObjectURL(img.src);
img.src = '';
// encode image to data-uri with base64 version of compressed image
var newDataUri = canvas.toDataURL();
ctx.clearRect(0, 0, canvas.width, canvas.height);
console.log('Image resized!');
imageContainer.resizedData = newDataUri;
resolve(imageContainer);
}
catch (e)
{
if (img.src !== undefined && img.src.substr(0, 4) === 'blob')
URL.revokeObjectURL(img.src);
console.log(e);
if (e.message === "Unspecified error." && retries < 5)
{
setTimeout(function (imgContainer, re)
{
makeSmallImage(imgContainer, re).then(resolve).catch(reject);
}, 2000, imageContainer, retries + 1);
}
else
reject('There was an error while trying to resize one of the images!');
}
};
try
{
var blob = new Blob([imageContainer.largeData]);
img.src = URL.createObjectURL(blob);
} catch (e)
{
reject(e);
}
});
}
'img'、'canvas' 和 'ctx' 是全局变量,因此相同的元素会被重用。'imgcontainer.largedata' 是一个 uint8array。为了避免大量内存使用,我将一张一张地加载和调整图像大小。
尽管如此,在加载了例如 120 张 10mb 的图像后,我可能会收到一个错误:
无法在 URL 处解码图像:'blob:D5EFA3E0-EDE2-47E8-A91E-EAEAD97324F6'
然后我得到一个异常“未指定的错误”,没有更多信息。您现在可以在代码中看到我添加了一个小机制来重试,但所有新尝试都失败了。
我认为原因是 Internet Explorer 使用了太多内存。我认为某些资源没有被正确清理,但我似乎无法在我的代码中发现内存泄漏(如果可以,请告诉我)。
有人知道我该如何解决这个问题,或者解决这个问题吗?