Blob：无法解码URL上的图片

Question

I'm currently making a Word Web Add-in. This uses Internet Explorer as engine. My Add-in needs to load multiple selected images from the users computer.

Because some of the selected images might be quite big, I resize them using HTML5 canvas. This is my code to resize:

    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' and 'ctx' are global variables, so the same elements are reused. 'imgcontainer.largedata' is an uint8array. To avoid a lot of memory usage i'm loading and resizing the images one by one.

Despite of that, after loading for example 120 images of 10mb, it might happen that I get an error:

Unable to decode image at URL: 'blob:D5EFA3E0-EDE2-47E8-A91E-EAEAD97324F6'

I then get an exception "Unspecified error", with not a lot more info. You can see in the code now that I added a litle mechanism to try again, but all new attempts fail.

I think the reason is that internet explorer is using too much memory. I think some resources are not being cleaned up correctly, but I can't seem to spot a memory leak in my code here (if you can, please let me know).

Does anybody have an idea of how I could fix this, or work around this?

Answer 1

if you try to resize the image, why not directly use the office APIs? you can first get the images, then use the height/width property to resize it, such as

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