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

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格式图片转换成imagelet 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.csdn.net/qq_38130094/article/details/80509131