Vue中使用Canvas實(shí)現(xiàn)繪制二維碼
在 Vue 中使用 Canvas 繪制二維碼可分為以下幾個(gè)步驟：
安裝 qrcode 庫(kù)：npm install qrcode --save
在 Vue 組件中導(dǎo)入 qrcode 庫(kù)
import QRCode from 'qrcode';
創(chuàng)建 Canvas 元素
<canvas ref="canvas"></canvas>
在 Vue 組件的生命周期鉤子函數(shù) mounted 中編寫(xiě) Canvas 繪制二維碼的代碼
mounted() {
const canvas = this.$refs.canvas;
const ctx = canvas.getContext('2d');
QRCode.toDataURL('https://www.google.com', { errorCorrectionLevel: 'M' }, function(err, url) {
if (err) throw err;
const img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
img.src = url;
});
},
在上面的代碼中，我們使用 QRCode 庫(kù)的 toDataURL 方法生成二維碼圖片的 base64 編碼，并將其轉(zhuǎn)換為 Image 對(duì)象，最后在 Canvas 上繪制。
樣式設(shè)置
canvas {
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
根據(jù)頁(yè)面的需求，可以設(shè)置 Canvas 元素的寬、高和邊框等樣式。
完整的 Vue 組件代碼如下：
<template>
<div>
<canvas ref="canvas"></canvas>
</div>
</template>
<script>
import QRCode from 'qrcode';
export default {
mounted() {
const canvas = this.$refs.canvas;
const ctx = canvas.getContext('2d');
QRCode.toDataURL('https://www.google.com', { errorCorrectionLevel: 'M' }, function(err, url) {
if (err) throw err;
const img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
img.src = url;
});
}
};
</script>
<style>
canvas {
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
</style>
到此這篇關(guān)于Vue中使用Canvas實(shí)現(xiàn)繪制二維碼的文章就介紹到這了,更多相關(guān)Vue Canvas繪制二維碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
關(guān)于el-col的使用,占據(jù)寬度的應(yīng)用解析
這篇文章主要介紹了關(guān)于el-col的使用,占據(jù)寬度的應(yīng)用解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue如何實(shí)現(xiàn)接口統(tǒng)一管理
這篇文章主要介紹了vue如何實(shí)現(xiàn)接口統(tǒng)一管理，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
element-ui中Table表格省市區(qū)合并單元格的方法實(shí)現(xiàn)
這篇文章主要介紹了element-ui中Table表格省市區(qū)合并單元格的方法實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了vue路由跳轉(zhuǎn)后刷新指定頁(yè)面的方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
基于element日歷組件實(shí)現(xiàn)簽卡記錄
這篇文章主要為大家詳細(xì)介紹了基于element日歷組件實(shí)現(xiàn)簽卡記錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
VUE實(shí)現(xiàn)強(qiáng)制渲染,強(qiáng)制更新
今天小編就為大家分享一篇VUE實(shí)現(xiàn)強(qiáng)制渲染,強(qiáng)制更新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue2.x 對(duì)象劫持的原理實(shí)現(xiàn)
這篇文章主要介紹了vue2.x 對(duì)象劫持的原理實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了vue 如何開(kāi)啟或關(guān)閉熱更新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue?serve及其與vue-cli-service?serve之間的關(guān)系解讀
這篇文章主要介紹了vue?serve及其與vue-cli-service?serve之間的關(guān)系,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vuex如何獲取getter對(duì)象中的值(包括module中的getter)
這篇文章主要介紹了Vuex如何獲取getter對(duì)象中的值(包括module中的getter)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08