html js 打印图片不显示 canvas

最新推荐文章于 2025-05-28 08:15:00 发布

远方的李子

最新推荐文章于 2025-05-28 08:15:00 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascripter

本文链接：https://blog.csdn.net/freedom_fd/article/details/103602744

javascripter 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何解决HTML5中使用Canvas打印图片时显示不全的问题，通过将Canvas转换为Image元素，确保打印时图片完整呈现。文章提供具体代码示例，包括获取Canvas元素、创建Image对象及替换原有Canvas的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

让我们试一下效果
在这里插入图片描述
对比一下现在的元素结构
不显示前

修改后: