Blob: Bild kann nicht unter URL

Question

dekodiert werden. Ich mache gerade ein Word-Web-Add-in. Dies verwendet den Internet Explorer als Engine. Mein Add-In muss mehrere ausgewählte Bilder vom Computer des Benutzers laden.

Da einige der ausgewählten Bilder möglicherweise ziemlich groß sind, ändere ich ihre Größe mit HTML5 Canvas. Dies ist mein Code, um die Größe:

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‘, ‚Leinwand‘ und ‚ctx‘ sind globale Variablen, so sind die gleichen Elemente wieder verwendet werden. 'imgcontainer.largedata' ist ein uint8array. Um viel Speicherplatz zu sparen, lade und verkleinere ich die Bilder einzeln.

Trotz, dass nach zum Beispiel des Laden 120 Bilder von 10 MB, kann es passieren, dass ich einen Fehler:

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

ich dann eine Ausnahme „Unbekannter Fehler“ erhalten, mit nicht viel mehr Informationen. Sie können jetzt im Code sehen, dass ich einen kleinen Mechanismus hinzugefügt habe, um es erneut zu versuchen, aber alle neuen Versuche scheitern.

Ich denke der Grund ist, dass Internet Explorer zu viel Speicher verwendet. Ich denke, einige Ressourcen werden nicht korrekt bereinigt, aber ich kann hier keinen Speicherleck in meinem Code finden (wenn du kannst, lass es mich wissen).

Hat jemand eine Idee, wie ich das beheben könnte, oder umgehen?

Answer 1

Wenn Sie versuchen, die Größe des Bildes zu ändern, warum nicht direkt die Office-APIs verwenden? Sie können zuerst die Bilder abrufen und dann die height/width-Eigenschaft verwenden, um die Größe zu ändern, z. B.

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