将画布保存到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

回答

相关问题