canvas.toDataUrl() restituisce 'data :,'

Question

Sto provando a ridimensionare un'immagine e recuperare la rappresentazione della stringa base64 usando canvas.toDataUrl().

Il mio codice è il seguente (vedi sotto). Il mio problema è che ogni volta che lo avvio, restituisce "data :,".

Quindi, quando si ripristina il ridimensionamento (chiamata con il pulsante), funziona correttamente e restituisce una stringa base vuota non vuota. Cosa sta succedendo?

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

La Causa

La ragione è che la tela ha invalid size:

[...] L'unica eccezione a questa è se la tela ha o senza altezza o nessuna larghezza, in cui caso il risultato potrebbe essere semplicemente "dati:".

formato valido è compreso nulla < 1.

Quando un elemento di immagine non ha dati caricato le proprietà di altezza e larghezza sono 0 per impostazione predefinita finché l'immagine è stata completamente caricato e decodificato in un bitmap, momento in cui innesca il onload gestore:

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

La soluzione

Assicurarsi che l'immagine è stata caricata prima di leggere qualsiasi formato da esso (esempio semplificato, adotta come pensato bene per il codice):

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

L'immagine non è ancora a pieno carico quando si sta chiamando resizeDimensions. E stai tentando di ridimensionare la tela prima che siano state impostate le dimensioni img.

Inserire il codice all'interno del gestore img.onload in modo che l'immagine sia completamente caricata.