Vue3、Vite使用 html2canvas 把Html生成canvas转成图片并保存,以及填坑记录

这两天接到新需求就是生成海报分享,生成的格式虽然是一样的但是自己一点点画显然是不符合我摸鱼人的性格,就找到了html2canvas插件,开始动工。

安装

npm install html2canvas --save

文档
options 的参数都在里面按照自己需求使用
https://allenchinese.github.io/html2canvas-docs-zh-cn/docs/html2canvas-configuration.html

使用

import html2canvas from 'html2canvas'const shareBox = ref(null) //需要生成canvas的html
const saveImg = () => {showLoadingToast({duration: 0,forbidClick: true,});html2canvas(shareBox.value, {width: shareBox.value.offsetWidth,// height: shareBox.value.offsetHeight,scale: 2}).then(function (canvas) {canvas.toBlob((blob) => {if (blob) {//这个是下载blob文件的方法downloadByBinary(blob, +new Date(), "image/png")showToast('保存成功!')} else {showToast('保存失败,请稍后重试!')}});})
}

填坑记录踩了一路 (我是做移动端H5 如果是pc 后面的坑可能遇不到)

填坑一
ios、微信环境用下载blob的方式不行 有拦截不支持下载。找个了优化的方案就是把图片放大预览让用户自己长按保存

const saveImg = () => {showLoadingToast({ //vant 的lodingduration: 0,forbidClick: true,});html2canvas(shareBox.value, {width: shareBox.value.offsetWidth,// height: shareBox.value.offsetHeight,scale: 2}).then(function (canvas) {// 因为 移动端ios,微信环境 限制了自动下载所以生成预览图片用户自己长按保存// canvas.toBlob((blob) => {//   if (blob) {//     downloadByBinary(blob, +new Date(), "image/png")//     showToast('保存成功!')//   } else {//     showToast('保存失败,请稍后重试!')//   }// });const url = canvas.toDataURL("image/png")if (url) {closeToast() //vant 的lodingshowImagePreview([url])nextTick(() => {showToast('已为您生成图片,请长按保存!')})} else {closeToast() //vant 的lodingnextTick(() => {showToast('保存失败,请稍后重试!')})}}).catch(res => {closeToast()nextTick(() => {showToast(res)})});
}

测试了一下 真不戳 然后新的问题出来了

填坑二 html2canvas 在IOS系统13.4以上失效
看到ios上迟迟不出来预览 也不走 then和catch方法 推测是插件本身除了问题 就开始百度
这个解决方案有两种一种是降版本
https://github.com/niklasvh/html2canvas/issues/2229

// 移除项目本身的插件
npm uninstall html2canvas// 下载新的 (注意还需要把package.json版本号的“^”或者“~”删掉。直接写1.0.0-rc.4。锁版本才行)
npm install --save html2canvas@1.0.0-rc.4

另一个方法还是使用新版的rc.5版本 有大佬把堵塞的地方改好了
https://github.com/FEA-Dven/html2Canvas/blob/master/README.md

上面那个方法可以不过我更喜欢用新版没办法就是喜欢新的东西
然后我就把上面的插件引入进来了(我用的是vite构建工具)再导入的时候报错说没有这个方法的导出,我一看嗐:咱不如大佬直接改堵塞的地方咱能写个简单的小导出啊~~
在这里插入图片描述
就是红框里的写个默认导出

//页面上使用
import html2canvas from "../lib/html2canvas.js";// 这里就截个方法的使用的 下面就跟上面填坑一 一样
(window.html2canvas || html2canvas)(shareBox.value, {width: shareBox.value.offsetWidth,// height: shareBox.value.offsetHeight,scale: 2})

然后大功告成、热泪盈眶、又混一天

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

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

相关文章

vue3中如何掉用子組件的方法

在Vue3中,可以通过ref和refs来访问子组件的方法。 首先,在父组件中使用ref来创建一个子组件的引用: import { ref } from vue; import ChildComponent from ./ChildComponent.vue; export default {components: {ChildComponent},setup() {c…

Union-Find Algorithm-并查集

目录 1.概念 2.并查集的优化 1.路径压缩(Path Compression) 1)隔代压缩: 2)完全压缩: 2.按秩合并 1.概念 并查集:用于判断一对元素是否相连,它们的关系是动态添加&#xff08…

微信小程序——事件监听

微信小程序是一种轻量级的应用程序,它在移动设备上提供了丰富的用户体验。在开发微信小程序时,事件监听是一项重要的技术,它允许开发者捕捉和处理用户的各种操作。本文将介绍微信小程序事件监听的概念、用法和一些实用示例。 1. 什么是事件监…

springboot实现webSocket服务端和客户端demo

1&#xff1a;pom导入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId><version>2.2.7.RELEASE</version></dependency>2&#xff1a;myWebSocketClien…

nlp系列(7)实体识别(Bert)pytorch

模型介绍 本项目是使用Bert模型来进行文本的实体识别。 Bert模型介绍可以查看这篇文章&#xff1a;nlp系列&#xff08;2&#xff09;文本分类&#xff08;Bert&#xff09;pytorch_bert文本分类_牧子川的博客-CSDN博客 模型结构 Bert模型的模型结构&#xff1a; 数据介绍 …

骨传导耳机的危害有哪些?会损害听力吗?

如果正常的使用&#xff0c;骨传导耳机是没有危害的&#xff0c;由于骨传导耳机独特的传声方式&#xff0c;所以并不会对人体造成损伤&#xff0c;还可以在一定程度上保护听力。 如果想更具体知道骨传导耳机有什么危害&#xff0c;就要先了解什么是骨传导耳机&#xff0c;骨传…

小程序自定义tabbar

前言 使用小程序默认的tabbar可以满足常规开发&#xff0c;但是满足不了个性化需求&#xff0c;如果想个性化开发就需要用到自定义tabbar,以下图为例子 一、在app.json配置 先按照以往默认的形式配置&#xff0c;如果中间的样式特殊则不需要配置 "tabBar": {&qu…

来可LCWLAN-600P产品使用和常见问题说明

01LCWLAN-600P简介 LCWLAN-600P是来可电子最新生产的一款CAN转WiFi设备&#xff0c;该设备的主要功能是将CAN数据转换成网络数据并通过无线网络转发出去。设备支持8~30V宽压供电&#xff0c;出厂默认配置为AP模式&#xff0c;设备供电后可在电脑的WiFi搜索栏搜索到名称为LCWLA…

【计算机网络】网络编程接口 Socket API 解读(3)

Socket 是网络协议栈暴露给编程人员的 API&#xff0c;相比复杂的计算机网络协议&#xff0c;API 对关键操作和配置数据进行了抽象&#xff0c;简化了程序编程。 本文讲述的 socket 内容源自 Linux 发行版 centos 9 上的 man 工具&#xff0c;和其他平台&#xff08;比如 os-x …

【Linux-Day10-信号量,共享内存,消息队列】

信号量 信号量描述 信号量是一个特殊的变量&#xff0c;一般取正数值。它的值代表允许访问的资源数目&#xff0c;获取资源 时&#xff0c;需要对信号量的值进行原子减一&#xff0c;该操作被称为 P 操作。 当信号量值为 0 时&#xff0c;代表没有资源可用&#xff0c;P 操作…

2022年全国研究生数学建模竞赛华为杯B题方形件组批优化问题求解全过程文档及程序

2022年全国研究生数学建模竞赛华为杯 B题 方形件组批优化问题 原题再现&#xff1a; 背景介绍   智能制造被“中国制造2025”列为主攻方向, 而个性化定制、更短的产品及系统生命周期、互联互通的服务模式等成为目前企业在智能制造转型中的主要竞争点。以离散行业中的产品为…

20230912java面经整理

1.gc算法有哪些 引用计数&#xff08;循环引用&#xff09;和可达性分析找到无用的对象 标记-清除&#xff1a;简单&#xff0c;内存碎片&#xff0c;大对象找不到空间 标记-复制&#xff1a;分成两半&#xff0c;清理一半&#xff0c;没有碎片&#xff0c;如果存活多效率低&a…

Python之离线安装第三方库

1、场景介绍 在一些服务器上&#xff0c;我们搭建完Python环境之后&#xff0c;因为服务器的网络限制原因&#xff0c;不能直接通过pip命令下载安装Python的依赖包。 因此&#xff0c;我们需要在可以正常上网的服务器上下载好所需的依赖包文件&#xff0c;然后拷贝到目标服务器…

嘉泰实业:真实低门槛,安全有保障

在互联网金融大行其道的当下&#xff0c;无论用户是多么的青睐、喜爱这种便捷的理财方式&#xff0c;也一定得把资金安全放在心上。要投就投那些实力背景雄厚&#xff0c;诚信经营的平台&#xff0c;可以选择投资用户基数庞大的理财老品牌&#xff0c;也可以选择发展势头迅猛的…

OneFormer: One Transformer to Rule Universal Image Segmentation论文笔记

论文https://arxiv.org/pdf/2211.06220.pdfCodehttps://github.com/SHI-Labs/OneFormer 文章目录 1. Motivation2. 方法2.1 与Mask2Former的相同之处2.2 OneFormer创新之处2.3 Task Conditioned Joint Training2.4 Query Representations2.4 Task Guided Contrastive Queries 3…

备忘录模式简介

概念&#xff1a; 备忘录模式&#xff08;Memento Pattern&#xff09;是一种行为型设计模式&#xff0c;它允许在不暴露对象内部状态的情况下捕获和恢复对象之前的状态。该模式通过将对象的状态封装到备忘录中&#xff0c;并将其保存在一个管理者类中&#xff0c;从而实现了对…

【Redis】为什么要学 Redis

文章目录 前言一、Redis 为什么快二、Redis 的特性2.1 将数据储存到内存中2.2 可编程性2.3 可扩展性2.4 持久性2.5 支持集群2.6 高可用性 三、Redis 的应用场景四、不能使用 Redis 的场景 前言 关于为什么要学 Redis 这个问题&#xff0c;一个字就可以回答&#xff0c;那就是&…

学习记忆——宫殿篇——记忆宫殿——数字编码——记忆数字知识点

面对错综复杂的数字信息&#xff0c;我们想要记住可以通过以下三点&#xff1a; 1、首先找到关键词 2、数字编码牢记 3、关键词跟编码链接 案例&#xff1a;会计考试-时间期限为 3、7、10 日、1 年的知识点 3 天 (1)托收承付的承付期验单付款为 3 天。 (2)失票人应当在通…

帝国cms后台访问链接提示“非法来源”解决方法

提示“非法来源”的原因 帝国CMS更新升级7.2后,新增了后台安全模式,后台推出了金刚模式来验证链接来源。后台所有链接都需要登录后才能访问,直接强制访问后台页面链接都会提示“非法来源”。不是正常登录后台的用户无法直接访问到内容,保证了后台数据安全。 那么我们在日常…

【设计模式】三、概述分类+单例模式

文章目录 概述设计模式类型 单例模式饿汉式&#xff08;静态常量&#xff09;饿汉式&#xff08;静态代码块&#xff09;懒汉式(线程不安全)懒汉式(线程安全&#xff0c;同步方法)懒汉式(线程安全&#xff0c;同步代码块)双重检查静态内部类枚举单例模式在 JDK 应用的源码分析 …