html js 打印 图片不显示 canvas

html js 打印 图片不显示 canvas
出现这个原因是因为 用的是 canvas
我们要将canvas 转成img 将之前的 canvas 替换掉 !!!

要打印的结构

你们的结构可能和我不一样, 我的结构是

 		var ids = document.getElementById(""+id).getElementsByTagName('canvas')[0]; //通过ID 获取 子元素 canvas
        var image = new Image(); //创建IMG
        image.src = ids.toDataURL("image/png"); //生成img
        $("#"+id).html(image)  //再将canvas 替换成 img

总体代码

var osload = function(){
        $('.rf-qr-p').each(function (letter, rows) { //查询  canvas 元素 然后 循环生成二维码
            let value = $(rows).data('src');
            // let id = $(rows).data('id');
            $(rows).qrcode({
                text: '' + value,
                width: 200,
                height: 200,
            });
            catoimg(rows,value) //这里是替换
        })
    }
    var catoimg = function(canvas,id){

        var ids = document.getElementById(""+id).getElementsByTagName('canvas')[0];
        var image = new Image();
        image.src = ids.toDataURL("image/png");
        $("#"+id).html(image)
    }

让我们试一下效果

对比一下现在的元素结构
不显示前

修改后: