画布保存到DataURL时的空白png答案

【问题标题】：Blank png when canvas is saved toDataURL画布保存到DataURL时的空白png
【发布时间】：2017-02-26 13:23:38
【问题描述】：

我正在使用 toDataURL 函数将我的画布保存为 url base64。但是，当我想在之后使用它时，我会得到一个完整的空白图像。我认为这是在画布未完全加载时保存画布的问题......

这是我的小提琴，我想确定我的变量 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 时，我得到了未定义的变量。

【问题讨论】：

您是否应该将var dataURL = canvas2.toDataURL(); 放入 onload 事件中。这样，图像将被渲染到画布上，而不是空白。
我得到了一些未定义的东西：jsfiddle.net/acbo6m6o/9
因为图片还没有加载。 onload 事件之外的任何代码都会在图像加载之前运行。您需要在 toDataURL 行之后将警报移动到事件中
警报不显示：/
那是因为画布被污染了，toDataURL 正在抛出错误。

标签： javascript html canvas

【解决方案1】：

您需要执行以下操作：

** 注意： 您的图像必须存储在您的本地服务器或支持跨域 (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>

【讨论】：

感谢您的帮助，但是我确实需要图像的 url，因为我只能显示带有 url 的标记图标。我不能使用 html 的元素...
@DionysoSong 但即使您使用 toDataURL 保存图像，它也会将整个画布保存为图像而不仅仅是图标。
是的，我想要整个图像：照片 + 徽标 ^^
那么为什么不使用drawImage() 绘制整个画布。它与 toDataURL 相同
我正在使用谷歌地图，为标记添加图标我有一个这样的参数：map.addMarker({ 'icon': 'img/Facebook-Logo.png' ... } );我不能使用画布并在那里显示它。