canvas.toDataUrl() zwraca 'dane :,'

Question

Próbuję zmienić rozmiar obrazu i odzyskać reprezentację ciągu 64 za pomocą canvas.toDataUrl().

Mój kod jest następujący (patrz poniżej). Mój problem polega na tym, że za każdym razem, kiedy go inicjuję, zwraca "dane:".

Następnie, gdy ponownie zmieniam rozmiar (wywołanie za pomocą przycisku), działa poprawnie i zwraca mi niepusty łańcuch base64. Co się dzieje?

function drawAndResizeFunction(images) 
var qDraw = $q.defer(); 

// 1 
     drawCanvasWrapper().then(function(canvasData){ 
      qDraw.resolve(canvasData) 
     }); 

     // 2 
     function drawCanvasWrapper() { 
      var pResults = images.map(function (imageObj) { 
       //return drawCanvassIter(imageObj.tempURL); // tempUrl 
       return resizeIter(imageObj.tempURL).then(function(result){ 
        console.log("resized", result) // *** RETURNS data:, in first attempt 
        return result; 
       }) 
      }); 
      return $q.all(pResults); 
     }; 

     // 3inval 
     // returns canvasdata 
     function resizeIter(nativeURL) { 

      console.log("resizeIter") 

      var qResize = $q.defer(); 

      var canvas = document.getElementById("resizecanvas"); 
      var ctx = canvas.getContext("2d"); 
      var img = new Image(); 
      img.src = nativeURL; 

      var newScales = resizeDimensions(img.width, img.height) 

      var iw =canvas.width =img.width  =newScales.iw; 
      var ih =canvas.height =img.height  =newScales.ih; 

      img.onload = function() { 

       // --> 4 
       ctx.drawImage(img, 0, 0, iw, ih); 
       $timeout(function(){ 
        qResize.resolve(canvas.toDataURL("image/jpeg")); 
       }, 200) 


      }; 

      return qResize.promise; 



      // 
      // 
      function resizeDimensions(iw, ih) { 
       var scaleFactor = 1; 
       var targetSize = 800; 

       if (iw > targetSize || ih > targetSize) { 
        if(iw > ih) { 
         scaleFactor = targetSize/iw; 
        } else { 
         scaleFactor = targetSize/ih; 
        } 
       } 
       var iwAdj = Math.floor(iw*scaleFactor); 
       var ihAdj = Math.floor(ih*scaleFactor); 

       return { 
        ih: ihAdj, iw: iwAdj 
       } 
      }; 
     }; 

return qDraw.promise; 
    }; // done 

Answer 1

Przyczyna

Powodem jest to, że plandeka zawiera invalid size:

[...] Wyjątkiem jest sytuacja, gdy obszar roboczy ma albo ma wysokość lub szerokość nie , w którym przypadku wynik może być po prostu "data :,".

Nieprawidłowy rozmiar jest w tym coś < 1.

Gdy element obrazu nie ma danych załadowane właściwości width i height są domyślnie 0, aż obraz jest w pełni załadowany i dekodowane do bitmapy, w którym to czasie wyzwala onload handler:

var img = new Image(); 
 
document.write("w: " + img.width + " h: " + img.height);

Rozwiązanie

Upewnij się, że obraz został załadowany przed przeczytaniem dowolny rozmiar od niego (uproszczony przykład, przyjąć jak widać pasuje do kodu):

var img = new Image(); 
 
var w, h; 
 
img.onload = function() { 
 
    w = this.width;  // here we can extract image size 
 
    h = this.height; 
 
    // set canvas size here as well before drawing the image in 
 
    // continue you code from here using f.ex. a callback 
 
    document.write("w: " + w + " h: " + h); 
 
}; 
 
img.src = "http://i.imgur.com/eekEotAb.jpg"; // set src last

Answer 2

Obraz nie został jeszcze w pełni załadowany, gdy dzwonisz pod numer resizeDimensions. Próbujesz zmienić rozmiar obszaru roboczego, zanim zostaną ustawione wymiary img.

Wpisz ten kod w swój uchwyt img.onload, aby zagwarantować, że obraz będzie w pełni załadowany.