解决uniapp开发H5时ios无法长按保存图片

最新推荐文章于 2024-07-27 10:30:37 发布
最新推荐文章于 2024-07-27 10:30:37 发布
阅读量4.1k 收藏 7
点赞数 4
文章标签： ios uni-app 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XujiRe/article/details/122131413
版权

在uniapp开发H5时如果遇到生成海报并需要实现长按保存该图片海报如果使用如下代码，在ios手机中无法实现长按保存
<image :src="ewm" @longtap="toSave" ></image>
这时，需要使用原生的html+canvas来实现图片显示

<canvas style="width: 100%;height: 100%;" class="content-showMakeImg-canvas">
	<img :src="makeImgbase64" class="content-showMakeImg-haibao" />
</canvas>

在img标签外嵌套一层canvas标签，这时在打包这个uniapp项目为h5以后，在ios中将可以实现长按保存图片了

XujiRe
关注
微信公众号 - 禁用 H5 网页长按图片时弹出的菜单（转发给朋友 / 保存到手机 / 收藏 / 搜一搜），苹果安卓系统都可暴力 100% 完美禁用菜单，任何前端框架、任何浏览器都适用的解决方案
王佳斌
02-16 5194
微信公众号网页H5禁用长按弹出的菜单，uniapp vue项目 H5网页在微信浏览器怎么禁用长按图片弹出的菜单，微信公众平台禁用微信h5的长按弹窗，禁用h5页面中长按图片弹出的弹层，react vue uniapp 网页H5怎么禁止微信公众号h5页面长按弹出菜单，前端公众号网页如何禁用长按图片显示的菜单，H5网站微信公众号页面禁止长按弹出系统菜单,兼容ios和安卓，微信公众号h5页面图片长按问题，彻底解决H5页面中长按保存图片，HTML5网页公众号移动端网页怎么把长按图片弹出的菜单去掉，微信公众号 - 禁用
【前端】长按图片，没有弹出 “保存到相册”选项。pointer-events:visible
weixin_43444977的博客
07-20 425
前端开发，在微信浏览器或者其他浏览器，长按图片，没有弹出 “保存到相册”选项。原因是，在某个地方写了，pointer-events:none；
H5使用html2canvas生成海报在ios系统上不好使
m0_45445193的博客
01-28 2508
html2canvas生成海报在ios系统上不好使
uni-app中App端和H5端实现下载、保存图片至本地相册
最新发布
z368374的博客
07-27 1027
在开发中，我们会遇到有需求是保存图片至本地相册，uni-app本身是有自带api（uni.saveImageToPhotosAlbum(OBJECT)）可以实现，但该方法不适用于H5端，H5端在微信公众号和微信浏览器中是可以长按图片保存的，如果下面方法不行的话，可以指导提示用户长按图片来实现保存至手机相册。
html2canvas将HTML内容写入Canvas生成图片 uniapp
12-16
html2canvas 能够实现在浏览器端、app端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。
uniapp的H5实现图片长按保存
m0_57108418的博客
08-27 3655
使用uniapp的api实现图片预览，可以缩放，关闭等操作imageUrl是图片地址，如https://www.111.com/abc/image.pngurls是字符串数组，用来预览图片因为app可以使用对应的图片下载保存，这里就不多说了，主要讲的是在H5实现图片预览保存功能。
uniapp h5 页面 解决 ios 长按无法保存图片问题（安卓支持此功能）--实现移动端长按保存图片
凉城玖的博客
11-06 3640
H5 页面 移动端实现长按保存图片以及图片显示异常问题 uniapp 中的 一些小坑： image 标签中的 src 属性不支持 写 @ uniapp 写 h5 页面 ， image 标签 在 ios 端 不支持 长按 保存图片，使用canvas 标签包裹img标签，然后将 image 标签更换为 img 标签，添加-webkit-touch-callout: default 即可，如下所示： <view class="linkreceive"> <
vue 生成海报，解决跨域问题 ，下载图片到本地
hflxia的博客
09-09 3756
// 获取图片元素 // 创建图片元素 var img = new Image(); //设置图片跨域 img.setAttribute("crossOrigin", "anonymous"); //设置图片路径 img.src = url; //下载图片 img.onload = function() { //创建画布 var can = document.createEleme...
uni-app app实现web-view H5图片长按下载
qq_62787048的博客
02-28 890
uniapp app web-view中图片无法长按保存，IOS下是正常的，但是Android下长按无反应。下载mui.min.js，放到项目中的static下。在static目录下新建script.js。
uniapp 图片保存到相册
前端历险记
08-02 4971
传输门 在看官网的时候发现H5是不能图片保存到相册的 首先 html 绑定 @longtap 长按事件 <image :src="qrcodeImg" @longtap="shareImg(qrcodeImg)"></image> js shareImg(dataurl) { let _this = this if (plus) { // APP 保存图片 const bitmap = new plus.nativeObj.Bitmap("t
vue在ios手机上的一些问题（这次写的h5公众号）和后面补充的小程序问题
qq_38337245的博客
11-25 1877
坑一：使用定位fixed，底部导航不显示，代码我就不写，总结就是定位套定位，心累代码太多不想贴； 坑二：禁止页面放大缩小， 解决：Vue 移动端禁止页面放大缩小_fuf_xyxnxss的博客-CSDN博客_移动端禁止放大缩小 坑三：移动端h5页面禁止长按选择复制， 解决：移动端h5页面禁止长按选择复制_艾欢欢的博客-CSDN博客 坑四：苹果手机IOS点击输入框弹出键盘后，所有按钮点击位置上移， 解决：苹果手机IOS点击输入框弹出键盘后，所有按钮点击位置上移_料峭春风吹酒醒，微冷， 山头斜...
uni-app 从本地项目选择图片或使用相机拍照及图片预览
郭宝的博客
08-09 8409
从本地相册选择图片或使用相机拍照 uni.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照。 App端如需要更丰富的相机拍照API（如直接调用前置摄像头），参考plus.camera OBJECT 参数说明 参数名 类型 必填 说明 平台差异说明 count Number 否 最多可以选择的图片张数，默认9 见下方说明 sizeType Array<String> 否 original 原
uniapp h5 下载图片 APP保存到本地
YY0718YGH的博客
12-21 1699
oA.download = '图片名称.png';// 设置下载的文件名，默认是'下载'//H5环境中，也可以提示长按屏幕保存，让用户操作，不执行以下事件。// 下载之后把创建的元素删除。title: "保存成功",filePath: e, //图片url。
H5只要长按保存就能保存图片，不需要使用api
weixin_47674952的博客
04-21 280
canvas h5绘图
uniapp禁止h5长摁保存图片，pc禁止右键另存为
王佩健的博客
05-23 367
在APP.VUE里增加。
uni-app、H5+ 实现下载图片并保存到相册
qq_42966167的博客
12-28 6763
uni-app、H5+ 实现下载图片并保存到相册
uniapp中webview内嵌H5页面图片保存方法~
BILL-博客-LLIB
01-28 7238
废话不多说，直接贴代码~ var imgUrl = "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"; var down = plus.downloader.createDownload(imgUrl, {}, function(e, a) { console.log(e); plus.gallery.save(e.filename,function (e) { uni.showToast(
h5 /web 手机端 实现保存图片 到本地相册 uni-app
热门推荐
weixin_46221198的博客
08-13 1万+
文章目录首先，必须得知道的事情是：uni-app中是有保存图片到本地相册的api的：但是h5并不适用手机浏览器长按图片会出现保存图片的按钮直接进行保存图片，甚至在微信中还可以进行扫一扫H5Plus 是用于 APP 的方法，别看见代码就贴去用！！那些保存图片的方法，电脑版的web 和 手机版的 web根本就不是一回事，记得要用手机进行调试踩坑及结果最终使用的方法后感 首先，必须得知道的事情是： uni-app中是有保存图片到本地相册的api的：但是h5并不适用 手机浏览器长按图片会出现保存图片的
uniapp中h5能使用的长按事件和结束事件
05-15
在 H5 中，可以使用以下事件来实现长按和结束事件： 1. `touchstart`：当手指触摸屏幕时触发。 2. `touchmove`：当手指在屏幕上滑动时连续触发。 3. `touchend`：当手指离开屏幕时触发。 4. `touchcancel`：当系统停止跟踪触摸时触发，如手指碰到屏幕边缘或系统中断事件。 通过监听 `touchstart` 和 `touchend` 事件，可以实现长按和结束事件的逻辑。当用户开始按下按钮时，记录当前时间，当手指离开屏幕时，再次记录时间并计算时间差，若时间差大于一定的时间阈值，则认为触发了长按事件。 以下是一个实现长按和结束事件的示例代码： ```html <template> <div @touchstart="onTouchStart" @touchend="onTouchEnd">{{ message }}</div> </template> <script> export default { data() { return { message: '请长按按钮', touchStartTime: 0, touchEndTime: 0, longPressTime: 1000 // 长按时间阈值，单位毫秒 } }, methods: { onTouchStart() { this.touchStartTime = new Date().getTime() this.message = '已按下，请继续按住' this.longPressTimer = setTimeout(() => { this.message = '长按事件触发' }, this.longPressTime) }, onTouchEnd() { this.touchEndTime = new Date().getTime() clearTimeout(this.longPressTimer) if (this.touchEndTime - this.touchStartTime < this.longPressTime) { this.message = '已结束' } } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值