qrcode. js 는 QR 코드 를 생 성하 여 canvas 를 img 으로 바 꾸 고 길 게 누 르 면 저장 합 니 다.
2388 단어 전단
qrcode. js QR 코드 생 성:
1, qrcode. js 설치: npm install qrcode
2. html 내용:
3. js 부분:
import QRCode from 'qrcode' // qrcode
export default{
data(){
return {
}
},
components: {
QRCode: QRCode // QRCode
},
methods:{
useqrcode(url){//url
var canvas = document.getElementById('canvas')
QRCode.toCanvas(canvas, url, function (error) {
if (error) console.error(error)
console.log('success!');
})
}
},
mounted(){
this.useqrcode('www.baidu.com');//
}
}
canvas 를 img 으로 변경:
방법 useqrcode (url) 에 다음 코드 를 추가 합 니 다:
useqrcode(url){//url
let _this = this;
let fatherQrcode = document.getElementById('QRCode');
// fatherQrcode img :
let childs = fatherQrcode.children;
console.log(childs);
for(var i = childs .length - 1; i >= 0; i--) {
// console.log(typeof childs[i])
if(childs[i].className == "QRCode"){
fatherQrcode.removeChild(childs[i]);
}
}
//
var canvas = document.getElementById('canvas')
QRCode.toCanvas(canvas, url, function (error) {
if (error) console.error(error)
console.log('success!');
// canvas img
var mycanvas1=document.getElementsByTagName('canvas')[0];
mycanvas1.style.display = 'none'// canvas
// img html
var img=_this.convertCanvasToImage(mycanvas1);
img.classList.add("QRCode");// img QRCode
fatherQrcode.append(img);//imagQrDiv id
})
},
// img
convertCanvasToImage(canvas) {
// Image , DOM
var image = new Image();
// canvas.toDataURL Base64 URL, ,
// PNG
image.src = canvas.toDataURL("image/png");
return image;
},
길 게 눌 러 서 그림 저장
css 부분:
/* */
.share>>>img.QRCode{
-webkit-touch-callout:default;
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
전단 자동화 워 크 플 로 의 hooks예 를 들 어 우 리 는 git commt 전에 eslint 코드 검사, npm install 전에 프로젝트 의존 도 를 검사 하고 싶 습 니 다.전형 적 인 상황 에서 각종 도 구 는 특정한 동작 이 발생 할 때 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.