Javascript Canvas空白圖像

我正在嘗試使用FabricJs製作tshirt定製程序。一切工作正常..我可以上傳圖像並將其加載到畫布。圖像放在t恤上，但如果我想看（或發送到服務器）畫布圖像我得到一個空白圖像。Javascript Canvas空白圖像

我的代碼是：

document.getElementById('imgLoader').onchange = function handleImage(e) { 
     var reader = new FileReader(); 

     reader.onload = function (event) { 

      var imgObj = new Image(); 
      imgObj.src = event.target.result; 
      //imgObj.crossOrigin = 'anonymous'; 

      $('#imageCanvas').val(event.target.result); 
      imgObj.onload = function() { 
       // start fabricJS stuff 
       imgObj.width = 100 
       imgObj.height = 100 

       var image = new fabric.Image(imgObj); 
       image.set({ 
        top: 100, 
        left: 100 , 
        padding: 10, 
        cornersize: 10, 
       }); 

       //image.scale(0.1).setCoords(); 
       canvas.add(image); 

       // end fabricJS stuff 
      } 

     } 
     reader.readAsDataURL(e.target.files[0]); 
    } 
});//doc ready 

var dataURL = canvas.toDataURL("image/png"); 
document.getElementById('canvasImg').src = dataURL;

來源

2015-10-30 Rus Mine

我不明白這個問題。圖像是透明的圖像。 –

看起來你應該在'imgObj.onload'裏面做'canvas.toDataURL'。否則，FabricJS畫布將爲空。 – markE

發表評論作爲答案，我可以接受它。謝謝 –

看起來你應該做canvas.toDataURL內imgObj.onload。

否則，圖像將不會被繪製到FabricJS畫布上，並且畫布將在您將其轉換爲圖像的位置爲空，其中.toDataURL。

來源

2015-10-31 16:58:54 markE

Javascript Canvas空白圖像

回答

相關問題