Blob：無法解碼URL上的圖像

我目前正在製作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使用的內存太多。我認爲一些資源沒有被正確清理，但我似乎無法在我的代碼中發現內存泄漏（如果可以的話，請讓我知道）。

有沒有人有我如何解決這個問題的想法，還是解決這個問題？

來源

2017-04-01 Bram

某些圖像已用錯誤的擴展名重命名。例如。 jpg圖像用gif擴展名重新命名。確定哪些圖像會引發「無法解碼URL處的圖像」，並使用Irfranview這樣的圖像編輯器打開它們，Irfranview可以檢測文件擴展名與MIME類型字節不匹配，並提供將圖像文件轉換回其「自然」 'extension/mime-type。 –

感謝您對@RobParsons的評論，但我不認爲是這樣。它也發生在來自相機的照片上。 – Bram

如果您嘗試調整圖像大小，爲什麼不直接使用office API？您可以先獲取圖像，然後使用高度/寬度屬性來調整其大小，如

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

來源

2017-04-05 03:19:39 Jipyua

這是不可能的，因爲那樣我必須將所有圖像保存在其原始大小的內存中。 – Bram

Blob：無法解碼URL上的圖像

回答

相關問題