javascript - 无法读取未定义的 toDataURL 属性

Question

在 Canvas 上使用createElement作为临时放置来绘制形状并遇到错误。在转换为图像之前， Canvas 是否必须可见，或者创建 Canvas 并展平为图像的解决方案是什么？

var ctx = document.createElement("canvas");
ctx.width = 200;
ctx.height = 100;
var ctx1 = ctx.getContext("2d");    
var tan30=Math.tan( 0.1 );
ctx1.setTransform(1, tan30, 0,1,0,0);
ctx1.lineWidth = 10;
ctx1.beginPath();
ctx1.moveTo(0, 0);
ctx1.lineTo(200, 0);
ctx1.stroke();
var asd=convertCanvasToImage(ctx1)
console.log(asd)

function convertCanvasToImage(aaa) {
    var image = new Image();
    image.src = aaa[0].toDataURL("image/png");
    return image;
}

Answer 1

你的代码是这样的

var ctx  = document.createElement("canvas");

var ctx1 = ctx.getContext("2d");    

var asd  = convertCanvasToImage(ctx1)


function convertCanvasToImage(aaa) {

    something = aaa[0].toDataURL("image/png");

}

看看你如何将上下文传递给函数，所以你确实在做

var ctx  = document.createElement("canvas");

var ctx1 = ctx.getContext("2d");    

var asd  = ctx1[0].toDataURL("image/png");

但是，上下文不是数组，并且 toDataURL 是 Canvas 元素上的方法，而不是上下文，因此您应该这样做

var ctx = document.createElement("canvas");
ctx.width = 200;
ctx.height = 100;
var ctx1 = ctx.getContext("2d");    
var tan30=Math.tan( 0.1 );
ctx1.setTransform(1, tan30, 0,1,0,0);
ctx1.lineWidth = 10;
ctx1.beginPath();
ctx1.moveTo(0, 0);
ctx1.lineTo(200, 0);
ctx1.stroke();
var asd = convertCanvasToImage(ctx)
console.log(asd)

function convertCanvasToImage(aaa) {
    var image = new Image();
    image.src = aaa.toDataURL("image/png");
    return image;
}

将 Canvas 传递到函数中，并直接访问它的 toDataURL 方法。
该参数也不是真正必要的，因为默认类型实际上是 "image/png"，如果您选择的是 png 以外的类型，则只需传入参数即可。

FIDDLE