QRCode react 二维码复制功能以及图片复制功能

---

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、QRCode react 二维码复制功能

代码如下（示例）：

	<QRCode
	   id={`${"qrCode" + index}`}
	   value={record.qrcodeLink} //value参数为生成二维码的链接
	   size={90} //二维码的宽高尺寸
	   fgColor="#000000" //二维码的颜色
	 />
	 <a onClick={() => this.clickCopyImg(index)} >
       {intl.get('复制二维码图片')}
     </a>

	
     // 将base64转成blob格式
     base64ToBlob(urlData, type) {
	    let arr = urlData.split(',');
	    let mime = arr[0].match(/:(.*?);/)[1] || type;
	    // 去掉url的头，并转化为byte
	    let bytes = window.atob(arr[1]);
	    // 处理异常,将ascii码小于0的转换为大于0
	    let ab = new ArrayBuffer(bytes.length);
	    // 生成视图（直接针对内存）：8位无符号整数，长度1个字节
	    let ia = new Uint8Array(ab);
	    for (let i = 0; i < bytes.length; i++) {
	      ia[i] = bytes.charCodeAt(i);
	    }
	    return new Blob([ab], {
	      type: mime
	    });
	 }
	// 复制图片
  clickCopyImg = async(i) => {
    // 将 qrcode 生成的二维码利用canvas自带的 toDataURL 转成base64 格式 然后再转成 Blob格式 使用 clipboard.write 复制
    const canvasImg = document.getElementById(`qrCode${ i }`); // 获取canvas类型的二维码
    let file = canvasImg.toDataURL('image/jpg'); // 把整个base64给file
    let type = "image/png"; // 定义图片类型（canvas转的图片一般都是png，也可以指定其他类型）
    let conversions = this.base64ToBlob(file, type);
    try {
      await navigator.clipboard.write([
        // eslint-disable-next-line no-undef
        new ClipboardItem({
          [conversions.type]: conversions
        })
      ])
      message.success(intl.get('复制成功'))
    } catch (error) {
      message.error(intl.get('复制失败，请手动复制'))
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

二、图片复制功能

代码如下（示例）：

	<div id="imgDyaminQrcodeContent">
        <div class="zf-mass-code-img">
            <img id="imgDyaminQrcode" src="图片路径" alt="" >
        </div>
        <a id="linkCopyImage" href="#">复制图片</a>
    </div>


	js部分
	<script type="text/javascript">
		//复制图片
        var copyImage = document.getElementById("linkCopyImage");
        copyImage.onclick = function(e){
            const div = document.getElementsByClassName('zf-mass-code-img')[0]
            div.setAttribute('contenteditable', true)
            SelectText(div);
            document.execCommand('copy');
            window.getSelection().removeAllRanges();
            div.removeAttribute('contenteditable')
        }
		
		var SelectText = function (element) {
            var doc = document;
            if (doc.body.createTextRange) {
                var range = document.body.createTextRange();    
                range.moveToElementText(element);
                range.select();
            } else if (window.getSelection) {
                var selection = window.getSelection();
                var range = document.createRange();
                range.selectNodeContents(element);
                selection.removeAllRanges();
                selection.addRange(range);
            }
        }
	</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

---

总结

提示：图片复制功能无法在微信中复制出来 建议把路径转换为Blob格式使用第一种方式更为妥当

url转换blob以及blob与base64的相互转换.