canvas.toDataUrl() 'data :,' döner:

Question

Bir resmi yeniden boyutlandırmaya ve canvas.toDataUrl() yöntemini kullanarak base64 dizgi gösterimini geri almaya çalışıyorum.

Kodum aşağıdaki gibidir (aşağı bakın). Benim sorunum, ilk kez başlattığım her seferde, 'data :,' değerini döndürmesidir.

Yeniden boyutlandırmayı yeniden başlattığımda (düğmeyi kullanarak), o zaman iyi çalışıyor ve bana bir ana bilgisayar dışı dize döndürüyor. Ne oluyor?

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

Nedeni

nedeni tuval olmasıdır invalid size:

[...] tuval hiçbir yükseklik veya hiç genişliğini ya sahipse Bunun tek istisnası olduğu durumda sonuç basitçe "veri :," olabilir. bir görüntü elemanı yoktur olduğunda geçersiz boyut herhangi bir şey < 1.

de dahil olmak üzere

veri, görüntü tam yüklü olan ve bir bitmap halinde dekode kadar genişlik ve yükseklik özellikleri varsayılan olarak 0 olan yüklü

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

: bu süre zarfında onload işleyicisi tetikler Çözüm

(yanı kodunuz için uygun görülen benimsenmesi basit örneği) görüntü herhangi ondan boyutunu okumadan önce yükledi emin olun:

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

Eğer resizeDimensions ararken görüntü henüz tam yüklü değil. Ve img boyutları ayarlanmadan önce tuvali yeniden boyutlandırmaya çalışıyorsunuz.

Bu kodu, img.onload işleyicinizin içine koyun, böylece görüntünün tam olarak yükleneceğinden emin olun.