Blob：无法在 URL 处解码图像

Question

我目前正在制作 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 使用了太多内存。我认为某些资源没有被正确清理，但我似乎无法在我的代码中发现内存泄漏（如果可以，请告诉我）。

有人知道我该如何解决这个问题，或者解决这个问题吗？

Answer 1

如果您尝试调整图像大小，为什么不直接使用 office API？可以先获取图片，然后使用 height/width 属性调整大小，如

image1.height = 5; image1.width = 5;