Question

我将画布保存为url base64，其功能为toDataURL。但是，当我想在之后使用它时，我得到一个完整的空白图像。我认为这是一个在没有完全加载的时候保存画布的问题......

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

Answer 1

您需要执行以下操作：

** 注意： 您的图片必须存储在本地服务器或支持跨源（CORS）请求的网站中的

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

画布保存到DataURL时的空白png

1 个答案: