前端生成二维码

直接img标签显示
npm i use_qrcode
npm包地址

<img :src="qrcode" alt="QR Code" />
const txt: any = ref('https://baidu.com')
const qrcode = useQRCode(txt)
const qrcodeLogo = useQRCode(txt, { logoSrc: 'https://www.antdv.com/assets/logo.1ef800a8.svg' })
import { useQRCode as _useQRCode } from "@vueuse/integrations/useQRCode";
import * as QRCode from "qrcode";
import { toRef, isClient } from "@vueuse/shared";
import { ref, watch } from "vue-demi";export function useQRCode(text: string, options?: any) {if (options?.logoSrc) return useLogoQRCode(text, options);return _useQRCode(text, options);
}export function useLogoQRCode(text, options) {const src = toRef(text);const result = ref("");const canvas: any = document.createElement("canvas");canvas.width = 132;canvas.height = 132;const logoImgSrc = ref(options.logoSrc);const labelText = "";watch(src,async (value) => {if (src.value && isClient) result.value = "";await QRCode.toDataURL(value, options, (err: any, url: string) => {let imgQRCode = new Image();imgQRCode.src = url;imgQRCode.crossOrigin = "anonymous";let img = new Image();img.src = logoImgSrc.value;img.crossOrigin = "anonymous";try {let ctx = (<HTMLCanvasElement>canvas).getContext("2d");// ctx.clearRect(0, 0, canvas.width, canvas.height);setTimeout(() => {ctx.drawImage(imgQRCode,0,0,imgQRCode.width,imgQRCode.height,0,0,canvas.width,canvas.width);let canvas_Centre_Horizontal = canvas.width / 2;let canvas_Centre_Vertical = canvas.width / 2;let logoSize_Horizontal = canvas.width * 0.16;let logoSize_Vertical = canvas.width * 0.16;let imageStart_Horizontal =canvas_Centre_Horizontal - logoSize_Horizontal / 2;let imageStart_Vertical =canvas_Centre_Vertical - logoSize_Vertical / 2;ctx.drawImage(img,//0, 0, THIS.img.nativeElement.width, THIS.img.nativeElement.height,imageStart_Horizontal,imageStart_Vertical,logoSize_Horizontal,logoSize_Vertical);ctx.font = "10px Arial";ctx.textAlign = "center";ctx.fillText(labelText, canvas.width / 2, canvas.height - 10);result.value = canvas.toDataURL("image/png");}, 50);} catch (ex) {console.log(ex);}});},{ immediate: true });return result;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/14579.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2.go环境配置与开发工具选择

go 环境配置 下载安装包 官网(https://go.dev/dl/) 下载地址(国内)(https://golang.google.cn/dl/) 根据自己的操作系统选择下载即可 下载后安装 记住地址 比如&#xff1a; D:\work\devtool\go 配置系统环境变量 PATH 指向 go 的安装 bin 目录 比如&#xff1a; D:\work…

若依前端vue实现 输入框下拉选择加搜索用户

探索代码以及详细的注解 <template><div><el-select v-model"selectedUserId" filterable placeholder"选择用户" change"handleChange"><el-optionv-for"user in filteredUsers":key"user.userId":l…

集合框框框地架

这一次来介绍一下常用的集合&#xff1a; 首先是两种集合的《家庭系谱图》&#xff1a; 接下来介绍一下集合的种类&#xff1a; Collection Set SetTreeSet&#xff1a;基于红⿊树实现&#xff0c;⽀持有序性操作&#xff0c;例如&#xff1a;根据⼀个范围查找元素的操作。但…

如何使用纯原生的ADO.NET技术进行数据读取

目录 1. 引用命名空间 2. 创建连接字符串 3. 打开数据库连接 4. 执行SQL查询 5. 读取结果集 6. 处理异常和关闭连接 1. 引用命名空间 在代码文件中引用几个关键的System.Data.SqlClient命名空间&#xff0c;这些命名空间包含了用于数据库操作的类。 using System.Data.Sq…

Unity实现TableView

基于Scrollview封装的TableView&#xff0c;实现对视野外的Cell回收利用&#xff0c;减少创建Cell的开销。 核心逻辑如下&#xff1a; /***************************************动态使用cell核心逻辑开始 **************************************///计算所有cell的坐标信息 …

利用java8 的 CompletableFuture 优化 Flink 程序,性能提升 50%

你好&#xff0c;我是 shengjk1&#xff0c;多年大厂经验&#xff0c;努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注&#xff01;你会有如下收益&#xff1a; 了解大厂经验拥有和大厂相匹配的技术等 希望看什么&#xff0c;评论或者私信告诉我&#xff01; 文章目录 一…

flume sink 简介及官方用例

1、HDFS Sink 此sink将事件写入 Hadoop 分布式文件系统 &#xff08;HDFS&#xff09; 中。它目前支持创建文本和序列文件。它支持两种文件类型的压缩。可以根据经过的时间或数据大小或事件数定期滚动文件&#xff08;关闭当前文件并创建一个新文件&#xff09;。它还按事件起…

AI图书推荐:用100个ChatGPT提示词掌握Python编程

《用100个ChatGPT提示词掌握Python编程》&#xff08;ChatGPT:Your Python Coach Mastering the Essentials in 100 Prompts&#xff09; 塞尔吉奥罗哈斯-加莱亚诺&#xff08;Sergio Rojas-Galeano&#xff09;是一位热情的计算机科学家&#xff0c;对人工智能、机器学习、进化…

C++中获取int最大与最小值(补)

上文中&#xff0c;我们学习了C中获取int最大与最小值的两种方法&#xff1a;C库和移位运算&#xff0c;这篇文章将解决在移位运算中遇到的各种报错&#xff0c;并提出一种新的生成int最值的方法 上文链接&#xff1a;http://t.csdnimg.cn/cn7Ad 移位运算取最值常见报错 Dev…

汇编语言(STC89C52)

指令是计算机计算CPU根据人的意图来执行某种操作的命令。一台计算机所执行的全部指令的集合&#xff0c;称为这个CPU的指令系统。而想要使计算机按照人们的要求完成一项工作&#xff0c;就必须让CPU按顺序执行预设的操作&#xff0c;即逐条执行人们编写的指令。这种按照人民要求…

C++ 写的_string类,兼容std::string, MFC CString和 C# 的string

代码例子&#xff1a; using namespace lf; int main() { CString s1 _t("http://www.csdn.net"); _string s2 s1; CString s3 s2; _pcn(s1); _pcn(s2); _pcn(s3); return 0; } 输出&#xff1a; _Str.h /***************************************…

网创教程:WordPress插件网创自动采集并发布

网创教程&#xff1a;WordPress插件网创自动采集并发布 使用插件注意事项&#xff1a; 如果遇到404错误&#xff0c;请先检查并调整网站的伪静态设置&#xff0c;这是最常见的问题。需要定制化服务&#xff0c;请随时联系我。 本次更新内容 我们进行了多项更新和优化&#x…

深入解析kube-scheduler的算法自定义插件

目录 ​编辑 一、问题引入 二、自定义步骤 三、最佳实践考虑 一、问题引入 当涉及到 Kubernetes 集群的调度和资源分配时&#xff0c;kube-scheduler 是一个关键组件。kube-scheduler 负责根据集群的调度策略&#xff0c;将 Pod 分配到适当的节点上。kube-scheduler 默认使…

python爬虫学习代码1

百度翻译&#xff1a;利用爬虫技术模拟人工查询英文单词&#xff0c;将查到的信息保存到本地 import requests import json # 1.指定url post_url https://fanyi.baidu.com/sug # 2.UA标识 headers {"User-Agent": Mozilla/5.0 (Windows NT 10.0; Win64; x64) Appl…

pyqt6入门案例

效果预览 hello.ui <?xml version"1.0" encoding"UTF-8"?> <ui version"4.0"><class>Dialog</class><widget class"QDialog" name"Dialog"><property name"geometry"><…

android studio接入facebook踩坑1

今天在接入facebook第三方登录的时候&#xff0c;点击登录按钮&#xff0c;APP闪退&#xff0c;并报错 java.lang.RuntimeException Failure delivering result ResultInfo{whonull,request64206,result-1} 新文章链接https://lengmo714.top/facebook1.html 如下图&#xff1a;…

OpenGL学习入门及开发环境搭建

最近学习OpenGL开发&#xff0c;被各种openGL库搞得晕头转向&#xff0c;什么glut, glew glfw glad等等。 可以参考这边博客:OpenGL 下面的 glut freeglut glfw 都是个啥_glx wgl的中文-CSDN博客 glfw是glut的升级版&#xff0c;跨平台的主要处理窗口 事件相关。 glad是glew…

React项目知识积累(四)

1.useMemo( ) 在 React 中&#xff0c;useMemo 是一个 Hook&#xff0c;用于记忆计算结果&#xff0c;只有当依赖项之一发生变化时&#xff0c;才会重新计算。这有助于避免不必要的计算和渲染&#xff0c;从而提高应用程序的性能。 基本语法如下&#xff1a; const memoized…

html多节点生成图片并导出zip包

html多节点生成图片并导出zip包 背景 在做项目时遇到一个要将html节点展示的图片列表统一导出为zip包的需求。 难点 将html节点生成图片将多张图片加入zip包中&#xff0c;然后下载 解决html生成图片问题 参考html截图的思路使用 pnpm add html-to-image如何将图片资源生成z…

鸿蒙OS开发:【一次开发,多端部署】(多设备自适应能力)简单介绍

多设备自适应能力 介绍 本示例是《一次开发&#xff0c;多端部署》的配套示例代码&#xff0c;展示了[页面开发的一多能力]&#xff0c;包括自适应布局、响应式布局、典型布局场景以及资源文件使用。 名称简介 开发前请熟悉鸿蒙开发指导文档&#xff1a;gitee.com/li-shizhe…