我目前正在製作Word Web插件。 這使用Internet Explorer作爲引擎。 我的加載項需要從用戶計算機加載多個選定的圖像。Blob:無法解碼URL上的圖像
由於某些選定的圖像可能相當大,我使用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」,「帆布」和「CTX」是全局變量,因此相同的元件重複使用。 'imgcontainer.largedata'是一個uint8array。爲了避免大量的內存使用,我正在逐個加載和調整圖像大小。
儘管在裝入例如10MB的120張圖像後,可能會發生,我得到一個錯誤:
Unable to decode image at URL: 'blob:D5EFA3E0-EDE2-47E8-A91E-EAEAD97324F6'
然後我得到一個異常「未指定的錯誤」,有沒有更多的信息。 您現在可以在代碼中看到我添加了litle機制以再次嘗試,但是所有新嘗試都失敗。
我認爲原因是Internet Explorer使用的內存太多。我認爲一些資源沒有被正確清理,但我似乎無法在我的代碼中發現內存泄漏(如果可以的話,請讓我知道)。
有沒有人有我如何解決這個問題的想法,還是解決這個問題?
某些圖像已用錯誤的擴展名重命名。例如。 jpg圖像用gif擴展名重新命名。確定哪些圖像會引發「無法解碼URL處的圖像」,並使用Irfranview這樣的圖像編輯器打開它們,Irfranview可以檢測文件擴展名與MIME類型字節不匹配,並提供將圖像文件轉換回其「自然」 'extension/mime-type。 –
感謝您對@RobParsons的評論,但我不認爲是這樣。它也發生在來自相機的照片上。 – Bram