React生成二维码并将canvas转换成img格式

最新推荐文章于 2025-04-02 16:17:50 发布

要做前端的一股清流

最新推荐文章于 2025-04-02 16:17:50 发布

阅读量5k

点赞数 2

分类专栏： web前端学习文章标签： canvas转image js生成二维码 react生成二维码二维码保存到相册

本文链接：https://blog.youkuaiyun.com/qq_31915745/article/details/88981190

版权

web前端学习专栏收录该内容

22 篇文章

订阅专栏

1. 导入包生成二维码

npm install qrcode.react

npm包链接： https://www.npmjs.com/package/qrcode.react

1.1 生成二维码：

import * as QrCode from 'qrcode.react'

render() {
    return (
        <QrCode value={“二维码内容”} size={80} id="qrCode"/>
    )
}

/* 注意这个id下文转图片格式的时候会用到 */

2.将生成的canvas格式二维码转换成image格式

基本思路是： canvas -> toDataUrl -> 转换成base64编码的image格式

延展开来如果要做 web端的点击下载： canvas -> toDataUrl() -> image -> a标签, a.download = "下载文件名"

H5的点击按钮下载二维码楼主暂时没有实现，如果以后做出来了会更新，或者有大佬可以分享一下。

2.1 转图片

let canvasImg = document.getElementsByTagName('canvas')[0];
let image = new Image();

// canvas.toDataUrl() 可以将canvas格式的文件转换成基于base64的指定格式的图片
// 注意这个api ie9以下不支持

image.src = canvasImg.toDataURL("image/png");
let alink = document.createElement("img");
    alink.className = 'qrcode';
    alink.src = image.src;
    alink.download = "下载文件的名字.png";

//然后用这个我们创造的 img 节点去替换 canvasImg节点 这样原来在dom节点里的canvas就会被替换成image拉

canvasImg.parentNode.replaceChild(alink,canvasImg);

2.2

一直用框架的朋友可能对原生的一些语句生疏了，比如我本人... 所以最后来复习一下dom节点操作的方法:

2.2.1、创建元素节点：createElement

用法：document.createElement("p");//创建p标签；

创建文本节点：createTextNode;

用法：document.createTextNode("txt");//创建文本标签；

2.2.2、插入节点：appendchild:在要插入的元素节点上调用，他插入指定的节点使其成为那个节点的最后一个子节点。

insertBefore:在已有的元素前插入一个新元素；

insertAfter:在现有的元素后面插入一个新元素；

2.2.3、删除节点：removeChild;从文档树中删除一个节点（先找到要删除节点的父节点，用父节点删除）；

用法：var para1=document.getElementById("p1");

para1.parentNode.removeChild(para1);

2.2.4、替换节点：replaceChild;将一个节点替换为另一个节点（先找到要替换的节点的父节点，用父节点替换）；

补充：

上述方法只是将指定的二维码换成了image，但是只是静态换一次。为了动态的换二维码，楼主封了个土味方法，有更好的方法的话可以赐教一下。

原理就是不替换节点，而是插入节点，同时把 canvas节点 display:none

changeCanvasToPic = () => {
        let canvasImg = document.getElementsByTagName('canvas')[0];
        let image = new Image();
        image.src = canvasImg.toDataURL("image/png");
        //将canvas格式图片转换成image
        let alink = document.createElement("img");
        alink.className = 'qrcode';
        alink.id ="qr-img";
        alink.src = image.src;
        alink.download = "ceshi.png";
        let qrImg = document.getElementById('qr-img');
        if(qrImg){
            canvasImg.parentNode.replaceChild(alink,qrCode);
        } else{
            canvasImg.parentNode.insertBefore(alink,canvasImg);
        }
    }


render(){
    return(
    <QRCode value={this.state.address} size={100} style={{display:'none'}} 
            id="qrCode" />
)
}

上文资料参考：

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL

https://www.jianshu.com/p/d91216d465d9

https://blog.youkuaiyun.com/qq_38130094/article/details/80509131