H5 IOS浏览器长按没有保存图片

最新推荐文章于 2024-01-16 18:03:53 发布
原创 最新推荐文章于 2024-01-16 18:03:53 发布 · 2.9k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #safari #html5 #css3

项目场景

用户需要长按手机屏幕保存图片，Android手机都可以保存，iOS 手机中的Safari浏览器无法长按保存图片。兼容性问题，不用多考虑直接上解决方法。

解决方法

image{
	-webkit-touch-callout:default；
}

这种问题经常会出现在iPhoneX以上的机型中，尤其是在自带的浏览器中（Safari）。

微信公众号 - 禁用 H5 网页长按图片时弹出的菜单（转发给朋友 / 保存到手机 / 收藏 / 搜一搜），苹果安卓系统都可暴力 100% 完美禁用菜单，任何前端框架、任何浏览器都适用的解决方案
资深程序员
02-16 5946
微信公众号网页H5禁用长按弹出的菜单，uniappvue项目H5网页在微信浏览器怎么禁用长按图片弹出的菜单，微信公众平台禁用微信h5的长按弹窗，禁用h5页面中长按图片弹出的弹层，reactvueuniapp网页H5怎么禁止微信公众号h5页面长按弹出菜单，前端公众号网页如何禁用长按图片显示的菜单，H5网站微信公众号页面禁止长按弹出系统菜单,兼容ios和安卓，微信公众号h5页面图片长按问题，彻底解决H5页面中长按保存图片，HTML5网页公众号移动端网页怎么把长按图片弹出的菜单去掉，微信公众号-禁用
vue在ios手机上的一些问题（这次写的h5公众号）和后面补充的小程序问题
qq_38337245的博客
11-25 2030
坑一：使用定位fixed，底部导航不显示，代码我就不写，总结就是定位套定位，心累代码太多不想贴； 坑二：禁止页面放大缩小， 解决：Vue 移动端禁止页面放大缩小_fuf_xyxnxss的博客-CSDN博客_移动端禁止放大缩小 坑三：移动端h5页面禁止长按选择复制， 解决：移动端h5页面禁止长按选择复制_艾欢欢的博客-CSDN博客 坑四：苹果手机IOS点击输入框弹出键盘后，所有按钮点击位置上移， 解决：苹果手机IOS点击输入框弹出键盘后，所有按钮点击位置上移_料峭春风吹酒醒，微冷， 山头斜...
h5 安卓/IOS长按图片、文字禁止选中或弹出系统菜单 的解决方法
03-14 2318
最近在做IM的语音功能，发现当长按录音的时候手机会弹出来系统菜单，IOS下bug形式：1）长按的标签设置为css background的形式：不会弹出菜单；2）但是当设置为img时，系统默认识别为保存图片的行为，因而会产生以下系统菜单：　　　　　　　3） 当前标签为纯文字时，会弹出选中文字的系统菜单；安卓的bug形式如下： 　　1）当设置为css的background形式时候，系统默认...
微博H5 ios长按无法保存图片问题
sam的博客
02-22 1917
图片对应的css设置如下即可 -webkit-touch-callout: default;
解决uniapp h5端IOS在微信里面长按图片无法保存的问题
qq_25691983的博客
05-25 911
然后image的src请求这个地址即可。
h5 ios 禁用长按选择图片_h5移动端禁止长按图片保存
weixin_39606003的博客
12-23 6315
在移动端访问H5页面的时候，长按图片就会把图片保存起来，为了能够让用户体验更好一些，我们需要长按的时候也不保存图片。那该如何实现呢？下面给出3种解决方案。方案一：使用 pointer-events:noneimg{pointer-events:none;}亲测有效，适用于微信客户端的手机页面，图片被打开的情况.方案二：全局属性*{-webkit-touch-callout: none;-webki...
解决uniapp开发H5时ios无法长按保存图片
qq_25691983的博客
05-23 999
在uniapp开发H5时如果遇到生成海报并需要实现长按保存该图片海报如果使用如下代码，在ios手机中无法实现长按保存。在img标签外嵌套一层canvas标签，这时在打包这个uniapp项目为h5以后，在ios中将可以实现长按保存图片了。这时，需要使用原生的html+canvas来实现图片显示。
uni-app app实现web-view H5图片长按下载
最新发布
02-28
然而，原生的H5图片长按下载功能在uni-app内可能无法正常工作，因为平台的限制或者API的不兼容。在这种情况下，我们需要自定义处理来实现这个功能。这里我们将详细探讨如何利用mui库，特别是`mui.min.js`，来解决uni...
uniapp h5 页面 解决 ios 长按无法保存图片问题（安卓支持此功能）--实现移动端长按保存图片
凉城玖的博客
11-06 3921
H5 页面 移动端实现长按保存图片以及图片显示异常问题 uniapp 中的 一些小坑： image 标签中的 src 属性不支持 写 @ uniapp 写 h5 页面 ， image 标签 在 ios 端 不支持 长按 保存图片，使用canvas 标签包裹img标签，然后将 image 标签更换为 img 标签，添加-webkit-touch-callout: default 即可，如下所示： <view class="linkreceive"> <
【前端】长按图片，没有弹出 “保存到相册”选项。pointer-events:visible
weixin_43444977的博客
07-20 572
前端开发，在微信浏览器或者其他浏览器，长按图片，没有弹出 “保存到相册”选项。原因是，在某个地方写了，pointer-events:none；
IOS长按图片 无法保存，苹果safari 处理长按图片保存问题
热门推荐
业余前端的职业经历
12-03 1万+
我们在苹果手机上会发现，我们在微信的内置浏览器打开是可以长按图片保存的，但是safari浏览器 有的图片是不能保存的 可能很多网友会看到一些博客 上说开启一个 css属性就可以了 在图片上。加上一个 ， img { -webkit-touch-callout： default; } 这个属性其实最早也是在ios浏览器上实现的，最后被webkit内核的浏览器引进了，因为长按一个元素会显示出这个元素的一些信息，所以被ios浏览器默认给禁止了，你可以选择性开启哈 其实ios安全性上考虑的确实全面哈 d
微信小程序 长按图片不出现菜单_微信小程序长按保存图片
weixin_32998893的博客
01-14 657
微信浏览器打开h5页面如果是img标签的话，长按会弹出保存图片的选项。但是微信小程序里面不可以，需要自己写这个功能。这个功能有两个点，一个是长按，一个是保存图片到本地。1. 微信小程序关于图片长按的解释，有两种： 因此我们选用 bindlongpress 事件2. 微信小程序同样提供了保存图片的接口，是wx.saveImageToPhotosAlbum() 3. 值得说的是，保存的接口，两个需要注...
Windchill中 使用SpringMVC 对于生成的jar包，路径无法扫描
Henry的博客
12-04 902
Windchill中 使用SpringMVC 对于生成的jar包，路径无法扫描
手机浏览器 图片长按不保存_网页上的文字图片不能复制？是你还没有找到正确的方法...
weixin_39778815的博客
12-05 3170
网页上的文字图片不能复制？是你还没有找到正确的方法大家好，很高兴每天和您如期相见。作为我们办公人，每天的工作很多，很繁杂。只有在日常的工作和学习中不断积累，不断学习才能让自己在工作中游刃有余。今天，我想和大家分享的是关于网页上的文字和图片复制的技巧。相信大家都曾遇到这样的场景，在网站搜索查找需要的资料的时候，经过很多网站的浏览，终于找到一些内容挺不错的想要复制下来时，点击右键却出现无法复制提示，或...
微信小程序 长按图片不出现菜单_小程序-长按保存图片
weixin_32224617的博客
01-14 1871
微信浏览器打开h5页面如果是img标签的话，长按会弹出保存图片的选项。但是微信小程序里面不可以。需要自己写这个功能。这个功能有两个点，一个是长按，一个是保存图片到本地。1,、微信小程序提供了长按的事件，叫bindlongpress2、微信小程序同样提供了保存图片的接口，是wx.saveImageToPhotosAlbum()弄清楚了，我们可以开始做这个功能了，首先写wxml然后就是js代码了Pag...
微信环境iOS 长按图片无法保存
peade的博客
01-16 2518
开发中发现的问题： 在fixed蒙层中嵌入了一张图片。在苹果手机中，微信环境下，打开页面，长按图片，不会出现图片另存为等按钮。 解决方法： 取消蒙层方式，图片正常嵌入到页面环境中。
vue禁用IOS在H5页面中长按图片弹出的弹层
weixin_47047590的博客
09-01 1170
当使用IOS打开H5页面时，长按图片，IOS会展示一个关于这个图片的信息， 解决方法 webkit-touch-callout属性允许禁用掉这一行为。 示例 .example { -webkit-touch-callout: none; }
安卓部分浏览器长按保存图片问题
qq_41293573的博客
04-08 1536
在安卓部分浏览器上长按查看base64图片一片空白，点击保存图片也提示保存失败，加入以下代码即可解决。 1.页面上创建一个canvas容器,设置其隐藏 <canvas v-show="false" ref="picture"></canvas> 2.使用canvas重新绘制并赋值 this.imgUrl = "data:image/jpeg;base64," + res.content.base64_image;//这个路径只能苹果保存 let img = new Ima
iOS长按时无法保存图片问题解决方案
SailingCoder的博客
01-16 3357
在iOS系统中，当我们在网页上长按图片时，往往会发现无法保存图片。这是因为网页开发者为了防止图片被随意保存，通常会在CSS样式中设置-webkit-touch-callout属性为none。本文将介绍一种简单的解决方案，以恢复长按时保存图片的功能。
h5长按保存图片到手机
05-12
你可以通过在标签上设置onlongpress事件，然后在事件处理程序中使用Canvas API来将图像绘制到画布上，最后使用...另外，iOS设备上的Safari浏览器可能需要用户手动长按链接并选择“保存图像”才能保存图像。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

shaoin_2

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值