Question

我正試圖在畫布上繪製圖像。該圖像位於html文件的文件夾內。但是當我調用drawImage（）函數時，圖像不會繪製。這裏是我的代碼，

var upcan = document.createElement("canvas"); 
upcan.width = "190"; 
upcan.height = "380"; 
upcan.style.cssText = 'border-radius:25px; ' 
var upctx = upcan.getContext('2d'); 

var pb = new Image(); 

pb.onload = function() { 
upctx.drawImage(pb,0,0,100,400); 
}; 
pb.src = "photobooth.png"; 
var canvasData = upcan.toDataURL("image/png"); 

Answer 1

問題出在upcan.toDataURL（「image/png」）;.由於安全原因，它不會繪製來自外部的圖像。

Answer 2

var upcan; 
    var img = d.createElement('img'); 
    var reader = new FileReader(); 
    reader.onload = (function(aImg, aName) { 
     return function(e) { 
     aImg.src = e.target.result; 
     aImg.onload = function(){ 
      var upcan = createImgCanvas(aImg, 100, 400); 
     } 
    }; })(img, file.name); 
    reader.readAsDataURL(file); 

function createImgCanvas(img, imgWidth, imgHeight) { 
    var canvas = document.createElement('canvas'); 
    canvas.width = imgWidth; 
    canvas.height = imgHeight; 
    var imageCanvas2D = canvas.getContext("2d"); 
    try{ 
     imageCanvas2D.drawImage(img, 0, 0, imgWidth, imgHeight); 
    } catch(err) { alert(err);} 
    return canvas; 
} 

Answer 3

試試這個：

var upcan = document.createElement("canvas"); 
upcan.width = "190"; 
upcan.height = "380"; 
upcan.style.cssText = 'border-radius:25px; ' 
var upctx = upcan.getContext('2d'); 

var pb = new Image(); 
pb.src = "photobooth.png"; 
pb.onload = function() { 
upctx.drawImage(pb,0,0); 
}; 

Answer 4

首先，你的畫布添加到文檔或任何其他元素？

Answer 5

試試這個代碼...您所提供的src戰平後的圖像，因此現正制定..

var upcan = document.createElement("canvas"); 
    upcan.width = "190"; 
    upcan.height = "380"; 
    upcan.style.cssText = 'border-radius:25px; ' 
    var upctx = upcan.getContext('2d'); 

    var pb = new Image(); 
    pb.src = "~/../urpath/photobooth.png"; //give here proper path 
    pb.onload = function() { 
    upctx.drawImage(pb,0,0,100,400); 

    }; 

我認爲這將解決問題烏爾

Answer 6

我試着在Chrome瀏覽器的代碼，右邊在此頁面上使用開發人員工具，使用此頁面中現有的圖像之一併將畫布附加到主體。代碼工作得很好，問題必須在其他地方。

Answer 7

負載處理程序異步運行;它將不會執行，直到圖像下載完成。當前腳本將繼續執行，以便在圖像下載之前拍攝畫布的快照。將您的處理移到負載處理程序中，以確保在捕獲之前繪製了所有內容。

pb.onload = function() { 
    upctx.drawImage(pb,0,0,100,400); 
    var canvasData = upcan.toDataURL("image/png"); 
    // do stuff 
}; 
pb.src = "photobooth.png";