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

Question

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: "<c:url value='/media/image/logo_qr.png' />"
    });
    $("#qrImg_" + i).src = $("#qrCode_" + i).find("canvas").toDataURL("image/png");
}

报错信息

html的结构是

<img id="qcImg_0">
<span style="float: left; padding-top: 2px;" id="qrCode_0">
    <canvas width="140" height="140"></canvas>
</span>

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

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

Answer 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元素