怎么做自己公司的网站,手机网站建设分析,章丘市建设局网站,企查查企业信息查询在线需求
想要做如下图的二维码带文字#xff0c;且能够长按保存
前期准备
一个canvas安装qrcode#xff08;命令#xff1a;npm i qrcode#xff09;
画二维码及文字
初始化画布
templatedivcanvas refcanvas width300 he…需求
想要做如下图的二维码带文字且能够长按保存
前期准备
一个canvas安装qrcode命令npm i qrcode
画二维码及文字
初始化画布
templatedivcanvas refcanvas width300 height400/canvas/div
/templatescript setup
import { ref, onMounted } from vue;
const canvas ref(null);
onMounted(() {// 初始化画布let ctx canvas.value.getContext(2d);
})
/script画文字
templatedivcanvas refcanvas width300 height400/canvas/div
/templatescript 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 YaHeictx.textBaseline middle;ctx.textAlign center;ctx.fillStyle #333333;ctx.fillText(简单教程简单编程, canvas.value.width / 2, 40);
})
/script画二维码
二维码需要使用qrcode转换
templatedivcanvas refcanvas width300 height400/canvas/div
/templatescript 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 YaHeictx.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长按保存
通过监听触摸事件的时间判定长按
templatedivdiv classfriend touchstartgtouchstart() touchmovegtouchmove() touchendshowDeleteButton()canvas refcanvas width300 height400/canvas/div/div
/templatescript 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 YaHeictx.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();
}
/scriptstyle scoped/style
