加載圖像到織物畫布背景

嗨im試圖上傳圖像，並把它作爲畫布背景。代碼片段：加載圖像到織物畫布背景

function handleMenuImage(e){ 
    var reader = new FileReader(); 
    reader.onload = function(event){ 
     var img = new Image(); 
     img.src = event.target.result; 
     canvas.setWidth(img.width); 
     canvas.setHeight(img.height); 
     canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas)); 

     //set the page background 
     menuPages[currentPage].pageBackground.src = img.src; 
     canvas.backgroundImageStretch = false; 

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

問題是，畫布沒有顯示背景。我可以在chrome devtools中看到畫布背景src。背景實際上已經設置，但不知何故它不顯示。

來源

2012-07-12 Evgeni Roitburg

這似乎很奇怪的混淆。如果你想在HTMLCanvasElement上使用背景圖片，爲什麼不通過CSS設置背景圖片呢？

#myCanvas { 
    background-image: url(http://placekitten.com/100/100); 
}

或者設置通過JavaScript的CSS：

canvas.style.backgroundImage = 'url(http://placekitten.com/100/100)';

來源

2012-07-12 13:32:07

因爲IM加載通過文件API（的FileReader）這張圖片。 – 2012-07-12 13:50:46

解決了這個問題，只是在img.onload事件下做了所有的畫布任務。 – 2012-07-17 07:47:32

試試下面的代碼：從客戶端計算機

var raw_reader = new FileReader(); 
raw_reader.onload = function (event){ 
    var reader = new FileReader(); 
    reader.onload = function(event){ 
    var img = new Image(); 
    img.src = event.target.result; 
    canvas.setWidth(img.width); 
    canvas.setHeight(img.height); 
    canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas)); 

    //set the page background 
    menuPages[currentPage].pageBackground.src = img.src; 
    canvas.backgroundImageStretch = false; 

    } 
    reader.readAsDataURL(e.target.files[0]); 
} 
raw_reader.readAsBinaryString(e.target.files[0]);

來源

2013-06-21 09:16:18 bearxy39

加載圖像到織物畫布背景

回答

相關問題