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的图像后，可能会发生错误：

无法解析网址上的图片： '斑点：D5EFA3E0-EDE2-47E8-A91E-EAEAD97324F6'

然后我得到一个异常“未指定的错误”，没有更多的信息。你现在可以在代码中看到我添加了一个再次尝试的litle机制，但所有新的尝试都失败了。

我认为原因是Internet Explorer使用了太多内存。我认为有些资源没有正确清理，但我似乎无法在我的代码中发现内存泄漏（如果可以的话，请告诉我）。

有没有人知道如何解决这个问题，或解决这个问题？

Answer 1

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

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

Blob：无法解码网址

1 个答案: