BLOB : URL의 이미지를 디코딩 할 수 없습니다.

Question

현재 Word Web Add-in을 만들고 있습니다. 이것은 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입니다. 많은 메모리 사용량을 피하기 위해 이미지를 하나씩로드하고 크기를 조정합니다.

그에도 불구하고, 예를 들어 10메가바이트 120 개 이미지를로드 한 후, 내가 오류가 발생하는 일이 발생할 수 있습니다

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

는 그때하지 더 많은 정보와 함께, "지정되지 않은 오류"예외를 얻을. 코드에서 다시 시도 할 litle 메커니즘을 추가했음을 알 수 있지만 새로운 시도는 모두 실패합니다.

인터넷 익스플로러가 너무 많은 메모리를 사용하고있는 것 같습니다. 일부 리소스가 제대로 정리되지 않은 것 같아요,하지만 여기에 내 코드에서 메모리 누수가 발견 할 수없는 것입니다 (가능한 경우 알려주십시오).

아무에게도이 문제를 해결할 수있는 방법이나 해결 방법이 있습니까?

Answer 1

이미지의 크기를 조정하려고하면 직접 Office API를 사용하지 않는 이유는 무엇입니까? 먼저 이미지를 가져온 다음 높이/너비 속성을 사용하여 크기를 조정하십시오 (예 :

).

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