问

javascript - canvas转换成img显示，为什么用toDataURL一直报is not a function错误

angel青彤雪发布于 2022-11-15 17:59

图片

canvas转为img图片的toDataURL报错

页面上用canvas显示二维码进行打印，但是用jqprint打印插件无法显示canvas元素
所以要把canvas转换为img图片放到img元素中显示
看到网上的方法是用toDataURL这个方法，但是我用就一直报is not a function错误

代码如下

for(var i = 0; i < data.length; i++)
{
    $("#qrCode_" + i).qrcode({
        text: data[i]["qrcode"],
        height: 100,
        width: 100,
        //logo图片地址
        src: ""
    });
    $("#qrImg_" + i).src = $("#qrCode_" + i).find("canvas").toDataURL("image/png");
}

报错信息

html的结构是

按照这种结构根据js代码可以找到id为qrCode_0下面的canvas
可是不知道为什么toDataURL一直报错（这里用了qrcode.js生成二维码）

在网上看到是这么将canvas转换为img图片放到元素上，可是这里为什么toDataURL报错呢？
找了很多也没找到解决办法，而且我感觉这里也不应该出错啊，想不明白！

1 个回答

toDataURL是原生canvas对象上的方法，$("#qrCode_" + i).find("canvas")返回的是jQuery对象，不是原生canvas

var c = document.createElement('canvas');
c.toDataURL();        

// or 
var c = document.getElementById('myCanvas');
c.toDataURL();

// or in your case
$("#qrCode_" + i).find("canvas")[0].toDataURL(); // [0]拿到原生的canvas元素

2022-11-15 18:22 回答

娃娃亲莹莹世界

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签