將畫布保存到DataURL時的空白PNG

我使用函數toDataURL將畫布保存爲URL base64。但是，當我想要使用它時，我會得到完整的空白圖像。我認爲這是在保存時不滿載畫布或東西...將畫布保存到DataURL時的空白PNG

這裏的問題是我的小提琴，我想確保我的變量dataURL是在canvas2表示的圖像

var ctx = document.getElementById('canvas').getContext("2d"); 
var ctx2 = document.getElementById('canvas2').getContext("2d"); 
var img = new Image(); 
img.src = "https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/10400072_76198580294_2746326_n.jpg?oh=b8cc93c35d6badfffb65ab5c9cbfce28&oe=5941AAB6"; 
var img2 = new Image(); 
img2.src = "https://icc-static-files.s3.amazonaws.com/ICC/photo/2017/01/31/f3a228a9-30ca-453e-99c5-ee6150c714a5/Facebook_Logo.png"; 
img.addEventListener('load', function(e) { 
    ctx.arc(150, 150, 150, 0, Math.PI * 2, true); 
    ctx.save(); 
    ctx.clip(); 
    ctx.drawImage(this, 0, 0, 300, 300); 
    ctx.restore(); 
    ctx2.drawImage(ctx.canvas, 35, 60, 230, 230); 
    ctx2.drawImage(img2, 200, 60, 75, 75); 
}, true); 

var dataURL = canvas2.toDataURL();

當我把toDataURL中的addEventListener我不確定變量。

來源

2017-02-26 DionysoSong

如果你不把'VAR dataURL = canvas2.toDataURL（）;'onload事件裏面。這樣圖像將呈現在畫布上而不是空白。 – Blindman67

我得到了一些未定義的內容：http://jsfiddle.net/acbo6m6o/9/ – DionysoSong

因爲圖像尚未加載。 onload事件之外的任何代碼在圖像加載之前運行。在toDataURL行 – Blindman67

你需要做類似如下：

** 注：您的圖像意有所指被存儲在本地服務器或支持跨域（CORS）請求網站。

var ctx = document.getElementById('canvas').getContext("2d"); 
 
var ctx2 = document.getElementById('canvas2').getContext("2d"); 
 
var ctx3 = document.getElementById('canvas3').getContext("2d"); 
 
var img = new Image(); 
 
img.src = "https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/10400072_76198580294_2746326_n.jpg?oh=b8cc93c35d6badfffb65ab5c9cbfce28&oe=5941AAB6"; 
 
var img2 = new Image(); 
 
img2.src = "https://icc-static-files.s3.amazonaws.com/ICC/photo/2017/01/31/f3a228a9-30ca-453e-99c5-ee6150c714a5/Facebook_Logo.png"; 
 
img.addEventListener('load', function(e) { 
 
    ctx.arc(150, 150, 150, 0, Math.PI * 2, true); 
 
    ctx.save(); 
 
    ctx.clip(); 
 
    ctx.drawImage(this, 0, 0, 300, 300); 
 
    ctx.restore(); 
 
    ctx2.drawImage(ctx.canvas, 35, 60, 230, 230); 
 
    ctx2.drawImage(img2, 200, 60, 75, 75); 
 
    var dataURL = new Image(); 
 
    dataURL.src = ctx2.canvas.toDataURL(); 
 
    ctx3.drawImage(dataURL, 0, 0); 
 
}, true);

#canvas2 { 
 
    background-color: lightgrey; 
 
} 
 
#canvas3 { 
 
    background-color: grey; 
 
}

<canvas width="300" height="300" id="canvas"></canvas> 
 
<canvas width="300" height="300" id="canvas2"></canvas> 
 
<canvas width="300" height="300" id="canvas3"></canvas>

來源

2017-02-26 14:02:44 m87

感謝您的幫助，但是我真的需要擁有圖像的url，因爲我只能使用url顯示標記的圖標。我不能使用html元素...... – DionysoSong

@DionysoSong，但即使使用toDataURL保存圖像，它也會將整個畫布保存爲圖像而不僅僅是圖標。 – m87

是的，我想要整個圖像：照片+標誌^^ – DionysoSong

將畫布保存到DataURL時的空白PNG

回答

相關問題