需求

想要做如下圖的二維碼帶文字，且能夠長按保存

前期準備

1. 一個canvas
2. 安裝qrcode（命令：npm i qrcode）

畫二維碼及文字

初始化畫布

<template><div><canvas ref="canvas" width="300" height="400"></canvas></div>
</template><script setup>
import { ref, onMounted } from 'vue';
const canvas = ref(null);
onMounted(() => {// 初始化畫布let ctx = canvas.value.getContext('2d');
})
</script>

畫文字

<template><div><canvas ref="canvas" width="300" height="400"></canvas></div>
</template><script setup>
import { ref, onMounted } from 'vue';
const canvas = ref(null);
onMounted(() => {// 初始化畫布let ctx = canvas.value.getContext('2d');// 填充白色ctx.fillStyle = "#fff";ctx.fillRect(0, 0, 300, 400);// 畫文字ctx.font = "14px Microsoft YaHei"ctx.textBaseline = "middle";ctx.textAlign = "center";ctx.fillStyle = "#333333";ctx.fillText("簡單教程，簡單編程", canvas.value.width / 2, 40);
})
</script>

畫二維碼

二維碼需要使用qrcode轉換

<template><div><canvas ref="canvas" width="300" height="400"></canvas></div>
</template><script setup>
import QRCode from 'qrcode';
import { ref, onMounted } from 'vue';
const canvas = ref(null);
onMounted(() => {// 初始化畫布let ctx = canvas.value.getContext('2d');// 填充白色ctx.fillStyle = "#fff";ctx.fillRect(0, 0, 300, 400);// 畫文字ctx.font = "14px Microsoft YaHei"ctx.textBaseline = "middle";ctx.textAlign = "center";ctx.fillStyle = "#333333";ctx.fillText("簡單教程，簡單編程", canvas.value.width / 2, 40);// 畫二維碼QRCode.toDataURL('I am a pony!', function (err, url) {let img = new Image()img.src = url;img.onload = function () {ctx.drawImage(img, 50, 50, 200, 200);}})
})
</script>

長按保存

通過監聽觸摸事件的時間判定長按

<template><div><div class="friend" @touchstart="gtouchstart()" @touchmove="gtouchmove()" @touchend="showDeleteButton()"><canvas ref="canvas" width="300" height="400"></canvas></div></div>
</template><script setup>
import QRCode from 'qrcode';
import { ref, onMounted } from 'vue';
const canvas = ref(null);
onMounted(() => {let ctx = canvas.value.getContext('2d');// 填充白色ctx.fillStyle = "#fff";ctx.fillRect(0, 0, 300, 400);// 畫文字ctx.font = "14px Microsoft YaHei"ctx.textBaseline = "middle";ctx.textAlign = "center";ctx.fillStyle = "#333333";ctx.fillText("簡單教程，簡單編程", canvas.value.width / 2, 40);// 畫二維碼QRCode.toDataURL('I am a pony!', function (err, url) {let img = new Image()img.src = url;img.onload = function () {ctx.drawImage(img, 50, 50, 200, 200);}})
})
let timeOutEvent = null //定時器 
//長按事件設置定時器
let gtouchstart = () => {timeOutEvent = setTimeout(() => {longPress()}, 700)
}//手釋放，如果在200毫秒內就釋放，則取消長按事件，此時可以執行onclick應該執行的事件
let showDeleteButton = () => {clearTimeout(timeOutEvent); //清除定時器if (timeOutEvent != 0) {timeOutEvent = 0;}return false;
}
//如果手指有移動，則取消所有事件，此時說明用戶只是要移動而不是長按
let gtouchmove = () => {clearTimeout(timeOutEvent); //清除定時器timeOutEvent = 0
}
//真正長按后應該執行的內容
let longPress = () => {timeOutEvent = 0;// 創建一個鏈接元素const link = document.createElement("a");// 將Canvas轉換為數據URLconst dataURL = canvas.value.toDataURL();// 設置鏈接的href屬性為數據URLlink.href = dataURL;// 設置鏈接的下載屬性和文件名link.download = "canvas_image.png";// 模擬點擊鏈接進行下載link.click();
}
</script><style scoped></style>