vue 画二维码及长按保存

需求

想要做如下图的二维码带文字,且能够长按保存

前期准备

  1. 一个canvas
  2. 安装qrcode(命令:npm i qrcode)

画二维码及文字

初始化画布

html 复制代码
<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>

画文字

html 复制代码
<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转换

html 复制代码
<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>

长按保存

通过监听触摸事件的时间判定长按

html 复制代码
<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转换为数据URL
    const dataURL = canvas.value.toDataURL();

    // 设置链接的href属性为数据URL
    link.href = dataURL;

    // 设置链接的下载属性和文件名
    link.download = "canvas_image.png";

    // 模拟点击链接进行下载
    link.click();
}
</script>

<style scoped></style>
相关推荐
栈老师不回家16 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙22 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠26 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果1 小时前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长1 小时前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
阿伟来咯~2 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app