前言
提示:以下是本篇文章正文内容,下面案例可供参考
一、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('复制失败,请手动复制'))
}
}
二、图片复制功能
代码如下(示例):
<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>
总结
提示:图片复制功能无法在微信中复制出来 建议把路径转换为Blob格式使用第一种方式更为妥当