vue使用html2canvas在ios13.6中失效

最新推荐文章于 2023-08-07 11:45:51 发布
最新推荐文章于 2023-08-07 11:45:51 发布
阅读量862 收藏 1
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44388086/article/details/118384692
版权

这些天碰到 vue使用html2canvas在ios13.6中一直处于生成中状态 的问题在网上也找到了几种方法

有的说是降低html2canvas的版本 降为1.0.0-rc.4，我现在通过cnpm安装的是1.0.0-rc.7版本的，但是在其中有一个问题。网上其他的文章说是通过npm uninstall html2canvas先移除再使用npm install --save html2canvas@1.0.0-rc.4安装1.0.0-rc.4版本的html2canvas。在使用移除的时候我出现了Cannot find module 'object-keys报错。我就放弃了这种移除的方法。我直接在package.json 中删除了这个依赖。

在降低到1.0.0-rc.4版本后我打包并且部署到服务器之后还是ios13.6中失效。我在项目的全局搜索中发现package-lock.json这个文件中还是存在1.0.0-rc.7。我把这个文件种的1.0.0-rc.7配置删除之后 把node_modules删除并且在package.json 中删除了1.0.0-rc.4版本然后cnpm install再次安装1.0.0-rc.4版本html2canvas。打包部署后问题解决了

读起来可能有点绕 总结起来就是如果先安装了最新版的html2canvas的话需要：
1.package-lock.json文件中删除1.0.0-rc.7的配置信息
2.删除package.json 中1.0.0-rc.7与node_modules文件并运行cnpm install
3.安装1.0.0-rc.4版本html2canvas。

我的问题是这样解决的做一下记录

我爱大肘子
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue使用html2canvas jspdf实现pdf下载导出功能
总结前端开发中遇到的问题，分享前端知识
02-03 1142
1.安装 全局、局部引用；2.封装html2canvas结合JsPDF 下载导出方法；3.组件页面调用
vue使用html2canvas生成图片
weixin_42612764的博客
01-26 1527
Java开发人员学习前端的点点滴滴，简单的代码实现你想要的功能
html2canvas 在 ios13版本生成图片失效
纸飞机博客
02-17 3343
我能做的不多，但你需要的时候，我总是在的。 上图红色框中的部位为自定义的内容，剩余部分为背景图。 经测试，在安卓中，能如上图保存完整，在ios13系统以上失效。 解决方案： 1.将html2canvas的版本调整为如下： package.json中： "html2canvas": "1.0.0-rc.4", 修改后删掉node_modules重新装包。 2.需在生成的页面以至于上图的外层区域设置font-family font-family: Helvetica, Tahoma, Arial, 'P.
vue中html2canvas在IOS13以上失效的问题解决办法
mengmeng1_的博客
09-29 1994
一、问题描述 最近在开发 html2canvas 的时候，突然发现，html2canvas在IOS13.4系统中调用失败。一直是不会去调用的，头都要秃了一直找办法，后面在面向百度编程中找到了答案。 二、解决方案 1.首先将 package.json 中的 html2canvas 版本降低为【1.0.0-rc.4】 版本降低方法 首先移除 html2canvas 【npm uninstall html2canvas】 然后安装指定版本 【npm install --save html2canvas@1.0.0
HTML2CANVAS 在IOS13系统中不生效 解决方案
沉睡的博客
04-02 1058
HTML2CANVAS 在IOS13系统中不生效 解决方案 两种解决方案 第一种，修改【HTML2CANVAS 】的版本，更改为【1.0.0-RC.4】 文件下载 如果上述无法解决你的问题 再使用第二种方法 /** * 生成分享图片 */ toHtmlCanvasShareFn() { // 修改前代码 html2canvas(this.$refs.htmlCanvas,...
html2canvas在vue下的巨坑
weixin_34061555的博客
09-01 2995
公司有个需求就是要在前端生成图片首先想到的是用canvas生成图片，自己画这也太耗时间了吧！后面在npm上一查有个html2canvas的框架可以用这里附上地址 html2canvas 使用起来也特别简单，官网是这么描述的 html <div id="capture" style="padding: 10px; background: #f5da55"> <h4 styl...
html2canvas插件在ios13.4中不执行问题解决方案
cindy647的博客
10-16 1720
用html2canvas插件将dom转为canvas在iphone11(ios 13.4.1)，微信环境里不执行也不报错，一直进不去.then()后面的逻辑，解决方案如下： 具体将页面转为img图片,实现微信长按保存图片的步骤可见笔记： https://blog.csdn.net/cindy647/article/details/109123014 方案一 搜索到一个解决办法是降低html2canvas的版本，退回到4即可： "html2canvas": "1.0.0-rc.4", 亲测可行，但不确定.
vue使用html2canvas实现HTML转canvas图片保存(兼容IOS13.x， 跨域)
小白肥仔的博客
08-17 1723
安装 cnpm install --save html2canvas@1.0.0-rc.4 开发时候发现html2canvas在IOS13.4以上发现问题，实现不了，发现网友说要降低版本到@1.0.0-rc.4，所以安装@1.0.0-rc.4版本实现发现可行 html: <div id="html2canvas" @click="createdImg"> <img class="imgShow" src="@/assets/volunteer/worker/certificate
html2Canvas:解决html2Canvas在IOS13.4中失效问题
05-12
解决html2Canvas在ios13.4中失效问题 // 引入 import html2canvas from "../../lib/html2canvas"; // 使用, 全局window对象加入html2canvas，如果没有window就调用原来的，所以需要做判断 (window.html2canvas || ...
在vue项目中使用html2canvas将html内容写入canvas生成图片
wxiao_xiao_miao的博客
04-06 1332
安装 html2canvas 包 npm install --save html2canvas或者 yarn add html2canvas -S 在需要使用的页面引入 import html2canvas from "html2canvas"; html代码 <div id="targetDom"> 需要生成图片的盒子 </div> <button @click="creatPic">点击生成图片</button> js代码 c
【VUE】html2canvas 在IOS系统13.4以上失效的问题解决方法
灵活的小胖砸
08-19 1914
一、问题描述 最近在开发 html2canvas 的时候，突然发现，html2canvas在IOS13.4.1系统中调用失败。后马上去github上查看是否有同道中人遇到类似问题。 参考链接：https://github.com/niklasvh/html2canvas/issues/2229 二、解决方案 1.首先将 package.json 中的 html2canvas 版本降低为【1.0.0-rc.4】 版本降低方法 首先移除 html2canvas 【npm uninstall html2canva
解决html2canvas 在ios上不能使用的问题
YAN_wenhao的博客
10-15 6243
因为公司的开发需要，安装了html2canvas插件。 但是坑爹的是，在网页、android上测试正常，在ios上却使用不了。 特此记录下解决的方法： 1.vue环境下运行以下指令： npm uninstall html2canvas npm i html2canvas@1.0.0-rc.4; 2.修改程序： let that = this let ref = this.$refs.result // 截图区域 console.log('开始截图') new htm
微信小程序canvas.draw回调函数不执行在IOS系统
qq_37942845的博客
06-04 4783
cxt_arc.draw(false, function (e) { console.log('draw callback') }) canvas.draw 绘图结束后的回调再IOS上不执行，安卓手机未见此问题。 原因为：页面上设置了 wx:if  hidden，本想在绘图结束后再显示，不过再IOS11上不行。 解决...
html2canvas 优化画图速度，IOS的坑
最新发布
小白肥仔的博客
08-07 890
html2canvas 优化画图速度，IOS的坑
npm install canvas 失败
鲤鱼的博客
11-16 827
解决方法
直播软件源码，在vue中使用html2canvas在前端生成图片
云豹网络科技
02-23 92
以上就是直播软件源码，在vue中使用html2canvas在前端生成图片， 更多内容欢迎关注之后的文章。直播软件源码，在vue中使用html2canvas在前端生成图片。
VUE的弹窗中加载canvas的问题
weixin_45738218的博客
07-14 1432
VUE的弹窗中加载canvas的问题前言 前言 使用vue中的modal组件，弹出层中显示mapboxgl地图并进行轨迹回放等功能，没有报错（有的人也有报错，结果都是加载不出来），但是地图加载大小固定为400*300px，且通过style设置也不成功，此弹出层没有用antD的modal对话框，用的自己封装的组件，但是出现的问题是一样的。 其实是因为弹出层 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。弹出层组件会监听 visible 的状态，当状态为 true 时，
解决 html2canvas 的兼容IOS问题
l1134的博客
09-25 2437
解决 html2canvas 的兼容IOS问题
使用html2canvas生成海报并解决生成模糊以及iphone7生成不了的问题以及不支持object-fit:cover问题
qq_41227106的博客
06-16 2594
1、安装插件 npminstallhtml2canvas--save 2、在使用的页面进行引入 import html2canvas from "html2canvas"; 3、把需要生成的内容放在一个父盒子中 <template> <div class="index-content"> <div v-show="!isShow"> <div class="cavans-poster" ref="imagesPoster...
vue-html2canvas Vue3 使用
08-01
在Vue3中使用vue-html2canvas，你需要先安装依赖包html2canvas和vue-html2canvas。可以通过以下命令进行安装： ``` npm install html2canvas vue-html2canvas ``` 安装完成后，在需要使用的页面中引入组件，并注册到Vue实例中。例如： ```javascript import VueHtml2Canvas from 'vue-html2canvas'; export default { components: { VueHtml2Canvas, }, // ... } ``` 然后，在模板中使用VueHtml2Canvas组件，并传入需要转换为图片的DOM节点的id。例如： ```html <template> <div> <vue-html2canvas :id="'mycanvas'" @complete="saveImg"></vue-html2canvas> </div> </template> ``` 最后，在methods中定义saveImg方法，用于下载生成的海报图片到本地。可以参考以下代码： ```javascript methods: { saveImg(canvas) { var url = canvas.toDataURL(); var a = document.createElement('a'); a.download = '海报二维码'; var event = new MouseEvent('click'); a.href = url; a.dispatchEvent(event); }, }, ``` 这样就可以在Vue3中使用vue-html2canvas来生成并下载海报图片了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值