Recently, there is a small project, fill in the information to generate a QR code, and then send it to others. When sending, you need to copy the name + QR code picture to send to WeChat. Before, each time, you copied the content information to the QR code of the grass material , and then copied the user's name, pasted, sent, then copied the picture, pasted, and sent... ...Sometimes a dozen of them are done at a time, and the repetitive mechanical actions often have to be repeated more than ten times, which is very troublesome. So I thought about optimizing it. The front-end generates the QR code by itself, and then makes a one-click copy. You don’t even need to click. After filling out and submitting, it will be automatically copied...to achieve the ultimate laziness.
The QR code is generated using the qrcodejs2 component
Install
npm i qrcodejs2Introduce in the page:
import QRCode from 'qrcodejs2';QR code pop-up window:
<el-dialog :visible.sync="qrCodeVisible" width="600px" style="background-color: black;">
<p class="pointer" @click="copy(certName)" style="font-size: 25px;font-weight: bold;">{
{ certName }}</p>
<br />
<div class="pointer" @click="copyQrCode()" id="qrCode" align="center"></div>
</el-dialog>The div whose id is "qrCode" is where the QR code is placed.
The pointer class is to achieve the effect of displaying fingers when the mouse is placed on it.
/*光标呈现为指示链接的指针（一只手）*/
.pointer:hover {
cursor: pointer;
}Realize text click to copy:
copy(item) {
const input = document.createElement('input');
document.body.appendChild(input);
input.setAttribute('value', item);
input.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
this.$message.closeAll();
this.$message({
showClose: true,
message: '已复制',
type: 'success'
});
}
document.body.removeChild(input);
},Realize the generation of QR codes:
//生成二维码
generateQrCode(md5Code) {
//这里的 'qrCode' 即前面 div 的 id 需要对应
let container = document.getElementById('qrCode');
//清空之前的二维码 如果不清空，再次执行本方法，就会有两张图片
if (container.innerHTML) {
container.innerHTML = '';
}
var qrcode = new QRCode(container, {
text: this.urlPrefix + md5Code, //这里就是二维码扫描后展示的内容了
width: 500,
height: 500,
colorDark: 'black ',
colorLight: 'white',
correctLevel: QRCode.CorrectLevel.L //二维码的纠错等级，等级越高，二维码呈现越复杂，同时被遮挡的多，也能扫出来
});
},Call the method of QR code generation:
//打开展示二维码的弹窗
openQrCode(data) {
this.qrCodeVisible = true;
this.certName = data.name;
//这里setTimeOut是延迟执行，作用是等待dom节点挂载，如果不加的话 会报下面的错
setTimeout(() => {
this.generateQrCode(data.md5Code);
}, 100); //100代表 100毫秒 即0.1s
},If the execution is not delayed, the error is as follows:
Click the button to call the method and open the QR code pop-up window:
Take a look at the effect:
Next, click to copy the picture:
Since my QR code image here is locally generated by the front end, and is in base64 format:
You can see that src is not a url, but a base64 string.
After reading a lot of csdn materials, I found that it is better to directly convert base64 to Blob type and write it directly.
base64 to Blob:
base64ToBlob(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},Click to copy the QR code:
//点击复制二维码
copyQrCode() {
let container = document.getElementById('qrCode').childNodes[1];
let myBlob = this.base64ToBlob(container.getAttribute('src'));
navigator.clipboard.write([new window.ClipboardItem({ [myBlob.type]: myBlob })]);
}Note that the dom obtained here is the second child node of qrCode
document.getElementById('qrCode').childNodes[1]
Because my picture is generated by qrcodejs2 , the actual dom structure is:
If you use the dom of qrCode directly, the width copied by clicking will be different from the original one, and there will be white borders.
Original image size: 500 x 500
Copied using qrCode's dom: 700 x 625
Not only the size has become larger, but after zooming, it is found that there are 30 more white borders on the left and right sides. After repeated inspection, it is found that the DOM selection is wrong. If you directly select img to copy, the size will be fine, and there will be no white borders.
Notice! ! !
navigator.clipboard.write
This method can only be used under the local localhost, 127.0.0.1 or https protocol, otherwise the navigator does not have a clipboard method.
Due to the security policy of the new browser, the clipboard can only be accessed under the secure domain name, undefined will be displayed under the http domain name, but the navigator.clipboard can be accessed by using the domain name starting with https, or localhost
Try pasting:
The effect is as expected.
If the picture url is on the Internet and displayed in the form of url, it is recommended to refer to:
In fact, my needs have not been fully realized. At first, I thought of clicking to directly copy [text + picture], but now I still have to copy them separately. After I tried it, I directly copied the picture + text on the web page to the QQ chat window or editor, word In the document, after pasting, I found that the effect is all right, and they are all supported, but only copied to the WeChat chat window on the computer. After pasting, the text will be displayed, but the picture will not be displayed, and it will become a space. Since the computer WeChat has already If it is not supported, then it is not a problem that can be solved by the front end.
Barely use it, at least you don't have to go to the forage QR code to generate it again.