ブロブ：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」、「キャンバス」と「CTXのグローバル変数であるため、同じ要素が再利用されます。 'imgcontainer.largedata'はuint8arrayです。たくさんのメモリ使用量を避けるために、イメージを1つずつ読み込んでサイズを変更しています。

ことのにもかかわらず、例えば10メガバイトの120枚の画像をロードした後、私がエラーを取得することを起こるかもしれない：

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

は、私は、ないより多くの情報と、「予期しないエラー」の例外を取得します。 コードで、litleメカニズムを追加してもう一度試してみることができますが、新しい試みはすべて失敗します。

私はインターネットエクスプローラがあまりにも多くのメモリを使用しているという理由が考えられます。私はいくつかのリソースが正しくクリーンアップされていないと思うが、私はここで私のコードでメモリリークを見つけることができない（あなたができるなら、私に知らせてください）。

どのように私はこれを解決するか、またはこの問題を回避する方法のアイデアはありますか？

Answer 1

イメージのサイズを変更しようとすると、オフィスAPIを直接使用しないのはなぜですか？最初に画像を取得してから、height/widthプロパティを使用してサイズを変更します（

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