当前位置: 首页 > news >正文

vue2实现生成二维码和复制保存图片功能(复制的同时会给图片加文字)

<template><divstyle="display: flex;justify-content: center;align-items: center;width: 100vw;height: 100vh;"><div><!-- 生成二维码按钮和输入二维码的输入框 --><input v-model="url" placeholder="输入链接" type="text" /><button @click="generateQRCode">输入网址链接生成二维码</button><hr /><!-- 生成图片主要的容器部分 --><divclass="container"style="margin-top: 20px;border: 1px solid;display: flex;flex-direction: column;align-items: center;"><div v-if="qrCode"><img :src="qrCode" alt="QR Code" /></div></div><!-- 保存图片和复制图片按钮 --><divstyle="width: 100%;display: flex;justify-content: space-around;align-items: center;height: 100px;"><button @click="saveImage">保存图片</button><button @click="copyImage">复制图片</button></div></div></div>
</template><script>
// yarn add qrcode 执行命令安装
import QRCode from "qrcode";
// yarn add html2canvas@1.0.0-rc.4 执行命令安装
import html2canvas from "html2canvas";
export default {data() {return {url: "", // 这个是输入框的值qrCode: "", // 这个是二维码图片的urlbase64Image: "", // 这个是保存图片和复制图片使用的base64图片地址};},methods: {// 将页面内容生成图片的逻辑generateimages() {// 获取容器元素const container = document.querySelector(".container");const that = this;// 使用 html2canvas 生成图片return html2canvas(container, {useCORS: true, // 开启跨域配置allowTaint: false, // 允许跨域图片scale: 2, // 按比例增加分辨率 (2=双倍).dpi: window.devicePixelRatio * 2, // 设备像素比}).then((canvass) => {// 在canvas上添加文字const title = "小米科技";const src = "链接为:" + this.url;const text = "图片复制到的内容";const canvas = document.createElement("canvas");// 设置 Canvas 元素的宽度和高度,与生成的canvas宽高一致canvas.width = canvass.width;canvas.height = canvass.height;// 获取 Canvas 的 2D 绘图上下文const ctx = canvas.getContext("2d");// 创建一个图片对象const image = new Image();image.src = canvass.toDataURL();return new Promise((resolve, reject) => {image.onload = function () {// 下面三个是定义生成的图片里面的文字的const textWidth = ctx.measureText(text).width;const titleWidth = ctx.measureText(title).width;const srcWidth = ctx.measureText(src).width;// 在 Canvas 上绘制图片(每个参数含义(图片源,横坐标,纵坐标,宽,高))ctx.drawImage(image,canvas.width / 2 - canvas.width / 4,canvas.height / 2 - canvas.height / 4,canvas.width / 2,canvas.height / 2);// 绘制其他内容ctx.fillStyle = "blue"; // 指定文字颜色ctx.font = "16px Arial"; // 指定文字字号大小(只需要改前面的数字就行)ctx.fillText(text,canvas.width / 2 - textWidth / 2,canvas.height - 30); // 将文字定位到指定位置(参数(文字,横坐标,纵坐标))ctx.fillText(title, canvas.width / 2 - titleWidth / 2, 30);ctx.fillText(src, canvas.width / 2 - srcWidth / 2, 50);// 将 Canvas 转换为 base64 图片并保存console.log("canvas.toDataURL()", canvas.toDataURL());that.base64Image = canvas.toDataURL();// 操作完成,resolve Promiseresolve("完成");};image.onerror = function (error) {// 操作失败,reject Promisereject(error);};});}).catch((error) => {console.error("生成图片出错:", error);throw error;});},generateQRCode() {// 生成二维码逻辑(参数指定url文字即可)QRCode.toDataURL(this.url).then(async (qr) => {this.qrCode = qr;// 生成完二维码重新对容器的内容进行图片的生成// 这里会有异步情况,会导致图片base64地址不对,因此这里执行了两次,如果自己跑还不够的话可以再往下补一次await this.generateimages();await this.generateimages();}).catch((error) => {console.error("生成二维码出错:", error);});},saveImage() {// 保存图片功能// 创建一个虚拟的链接元素const link = document.createElement("a");// 指定a元素href地址(指向base64图片)link.href = this.base64Image;// 下载图片的图片名后缀link.download = "image.png";// 使用点击事件模拟下载操作link.dispatchEvent(new MouseEvent("click"));},copyImage() {// 实现复制图片到剪贴板的逻辑// 创建一个Image元素并设置src为base64图片const image = new Image();image.src = this.base64Image;console.log("复制的图片为:", this.base64Image);// 等待图片加载完成image.onload = () => {// 创建一个canvas元素const canvas = document.createElement("canvas");// 获取canvas上下文对象const ctx = canvas.getContext("2d");// 设置canvas的尺寸与图片一致canvas.width = image.width;canvas.height = image.height;// 将图片绘制到canvas上ctx.drawImage(image, 0, 0, image.width, image.height);// 调用Clipboard API将canvas内容复制到剪贴板canvas.toBlob((blob) => {const item = new ClipboardItem({ "image/png": blob });navigator.clipboard.write([item]).then(() => {console.log("图片已复制到剪贴板");}).catch((err) => {console.error("复制图片失败:", err);});});};image.onerror = (err) => {console.error("图片加载失败:", err);};},},
};
</script>

效果图

在这里插入图片描述

相关文章:

vue2实现生成二维码和复制保存图片功能(复制的同时会给图片加文字)

<template><divstyle"display: flex;justify-content: center;align-items: center;width: 100vw;height: 100vh;"><div><!-- 生成二维码按钮和输入二维码的输入框 --><input v-model"url" placeholder"输入链接" ty…...

Redis之字符串类型深入之SDS底层结构

作为一名程序员不可能不知道redis 知道redis不可能不知道redis的字符串 如果你真的熟悉redis不能不知道sds, 我们探究一下redis字符串的底层结构 sds翻译过来就是动态扩容(Simple Dynamic String)、先看一下最早版本redis的sds结构体 struct sdshdr{int len; //记录数组中…...

Cesium 3dTileset 支持 uv 和 纹理贴图

原理: 使用自定义shader实现uv自动计算 贴图效果: uv效果:...

C++可变参数模板中的省略号

看可变参数模板代码时常会遇到省略号的使用&#xff0c;这类奇特的“...”出现位置还不固定&#xff0c;容易引起困惑。C最近一直不用都快废了&#xff0c;在此想对省略号的使用做个简单归纳以提醒自己。可变参数模板以两种方式使用省略号。 在参数名称的左侧&#xff0c;表示“…...

uni-ui 使用uni-icons有些图标显示不出来,如down,up图标

问题描述 我使用的是uni创建时勾选的uni-ui模板&#xff0c;一次偶然机会发现down图标显示不出&#xff0c;left&#xff0c;right等其他图标又可以。 最后发现使用uni-icons不是最新版本导致的&#xff0c;使用模板生成的icons是1.3.5版本&#xff0c;我在插件市场找到的是2.0…...

动态增删表格

期望目标&#xff1a;实现一个能通过按钮来动态增加表格栏&#xff0c;每次能添加一行&#xff0c;每行末尾有一个删减按钮。 <el-button type"text" class"primary"click"addMember()">添加</el-button> <el-table:data"m…...

Java-(乘法表之后)增强for循环

这里我们先做个了解&#xff0c;之后我会在数组中进行详细介绍Java5引入了一种主要用于数组或集合的增强型for循环Java增强型for循环语法格式如下 For(声明语句&#xff1a;表达式&#xff09;{ //代码语句 } 声明语句&#xff1a;声明新的局部变量&#xff0c;该变量的类型…...

Celery(分布式任务队列)入门学习笔记

Celery 的简单介绍 用 Celery 官方的介绍&#xff1a;它是一个分布式任务队列; 简单&#xff0c;灵活&#xff0c;可靠的处理大量消息的分布式系统; 它专注于实时处理&#xff0c;并支持任务调度。 Celery 如果使用 RabbitMQ 作为消息系统的话&#xff0c;整个应用体系就是下…...

【网络】tcp协议如何保证可靠性

TCP&#xff08;Transmission Control Protocol&#xff09;是一种面向连接的、可靠的传输层协议&#xff0c;为网络通信提供了可靠性和连接稳定性。本文将详细介绍 TCP 协议如何保证数据的可靠传输和连接的稳定性&#xff0c;并分析其优缺点。 可靠性保证 序号和确认机制&…...

select,poll,epoll

在 Linux Socket 服务器短编程时&#xff0c;为了处理大量客户的连接请求&#xff0c;需要使用非阻塞I/O和复用&#xff0c;select&#xff0c;poll 和 epoll 是 Linux API 提供的I/O复用方式。 \selectpollepoll操作方式遍历遍历回调底层实现数组链表哈希表IO效率每次调用都进…...

【48天笔试强训】day18

题目1 描述 有一种兔子&#xff0c;从出生后第3个月起每个月都生一只兔子&#xff0c;小兔子长到第三个月后每个月又生一只兔子。 例子&#xff1a;假设一只兔子第3个月出生&#xff0c;那么它第5个月开始会每个月生一只兔子。 一月的时候有一只兔子&#xff0c;假如兔子都…...

链表经典面试题01

目录 引言 面试题01:返回倒数第k个节点 题目描述: 思路分析: 代码展示: 面试题02:链表的回文结构 题目描述: 描述 思路分析: 代码展示: 面试题03:相交链表 题目描述: 思路分析: 代码展示: 小结: 引言 这次的题均来自力扣和牛客有关链表的经典面试题,代码只会展示…...

基于java的CRM客户关系管理系统的设计与实现(论文 + 源码 )

【免费】基于Java的CRM客户关系管理系统的设计和实现.zip资源-CSDN文库https://download.csdn.net/download/JW_559/89273409 基于Java的CRM客户关系管理系统的设计与实现 摘 要 随着互联网的高速发展&#xff0c;市场经济的信息化&#xff0c;让企业之间的竞争变得&#xff0…...

【动态规划-最长上升子序列模型part2】:拦截导弹、导弹防御系统、最长公共上升子序列【已更新完成】

1、拦截导弹 某国为了防御敌国的导弹袭击&#xff0c;发展出一种导弹拦截系统。 但是这种导弹拦截系统有一个缺陷&#xff1a;虽然它的第一发炮弹能够到达任意的高度&#xff0c;但是以后每一发炮弹都不能高于前一发的高度。 某天&#xff0c;雷达捕捉到敌国的导弹来袭。 由于…...

Spring 如何解决 Bean 循环依赖

循环依赖解释 bean A 属性注入时依赖bean B &#xff0c;并且bean B属性注入时也依赖bean A &#xff0c;造成 bean A 和bean B 都无法完成初始化问题&#xff0c;形成了闭环。 注意 项目中存在Bean的循环依赖&#xff0c;是Bean对象职责划分不明确、代码质量不高的表现&#…...

【driver4】锁,错误码,休眠唤醒,中断,虚拟内存,tasklet

文章目录 1.互斥锁和自旋锁选择&#xff1a;自旋锁&#xff08;开销少&#xff09;的自旋时间和被锁住的代码执行时间成正比关系2.linux错误码&#xff1a;64位系统内核空间最后一页地址为0xfffffffffffff000~0xffffffffffffffff&#xff0c;这段地址是被保留的&#xff0c;如果…...

python之 函数相关知识解析

01 函数的注释与嵌套 1.函数的注释 函数的注释与普通注释的区别&#xff1a;用来说明当前函数的参数含义 param 参数名: 参数的注释信息 return: 函数的返回值 例如&#xff1a; def fun1(name):""":param name: 参数的注释信息:return: 函数的返回值"…...

监视器和显示器的区别,普通硬盘和监控硬盘的区别

监视器与显示器的区别&#xff0c;你真的知道吗&#xff1f; 中小型视频监控系统中&#xff0c;显示系统是最能展现效果的一个重要环节&#xff0c;显示系统的优劣将直接影响视频监控系统的用户体验满意度。 中小型视频监控系统中&#xff0c;显示系统是最能展现效果的一个重要…...

Linux:升级OpenSSL和OpenSSH

原因是现有版本存在安全漏洞&#xff0c;需要升级到新版本 原有版本和升级后的版本 OpenSSL 1.0.2k-fips 26 Jan 2017 -> OpenSSL 1.1.1w 11 Sep 2023OpenSSH_7.4p1, OpenSSL 1.0.2k-fips 26 Jan 2017 -> OpenSSH_9.5p1, OpenSSL 1.1.1w 11 Sep 2023目录 查看现有版…...

方法的入栈和出栈

一.作用域问题 1.全局作用域 在全局都能进行访问的变量 var a 10;function fn() {var b 20;return a b;}console.log(fn()); 2.局部的作用域 只能在限定的范围内进行访问 function fn() {var b 20;}console.log(b); b is not defined 打印的结果是b这个变量没用定义 3…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

绕过 Xcode?使用 Appuploader和主流工具实现 iOS 上架自动化

iOS 应用的发布流程一直是开发链路中最“苹果味”的环节&#xff1a;强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说&#xff0c;这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发&#xff08;例如 Flutter、React Na…...

yaml读取写入常见错误 (‘cannot represent an object‘, 117)

错误一&#xff1a;yaml.representer.RepresenterError: (‘cannot represent an object’, 117) 出现这个问题一直没找到原因&#xff0c;后面把yaml.safe_dump直接替换成yaml.dump&#xff0c;确实能保存&#xff0c;但出现乱码&#xff1a; 放弃yaml.dump&#xff0c;又切…...

大模型——基于Docker+DeepSeek+Dify :搭建企业级本地私有化知识库超详细教程

基于Docker+DeepSeek+Dify :搭建企业级本地私有化知识库超详细教程 下载安装Docker Docker官网:https://www.docker.com/ 自定义Docker安装路径 Docker默认安装在C盘,大小大概2.9G,做这行最忌讳的就是安装软件全装C盘,所以我调整了下安装路径。 新建安装目录:E:\MyS…...

二叉树-144.二叉树的前序遍历-力扣(LeetCode)

一、题目解析 对于递归方法的前序遍历十分简单&#xff0c;但对于一位合格的程序猿而言&#xff0c;需要掌握将递归转化为非递归的能力&#xff0c;毕竟递归调用的时候会调用大量的栈帧&#xff0c;存在栈溢出风险。 二、算法原理 递归调用本质是系统建立栈帧&#xff0c;而非…...