文章目录
首先,必须得知道的事情是:
-
手机浏览器长按图片会出现保存图片的按钮直接进行保存图片,甚至在微信中还可以进行扫一扫
ps:如果发现不能,有可能的原因 ------
- 图片的层级过低了,没有获取到,提高一下层级(z-index);
- 图片被阻止操作了,给图片设置样式:
-webkit-touch-callout: default;
此外,建议给不用保存的其他图片设置上:-webkit-touch-callout: none;
阻止用户操作。
具体什么功能:http://www.schoolw3c.com/book/css/webkit/behavior/touch-callout.html
-
H5Plus 是用于 APP 的方法,别看见代码就贴去用!!
-
那些保存图片的方法,电脑版的web 和 手机版的 web根本就不是一回事,记得要用手机进行调试
ps: 如果不会调试,链接
踩坑及结果
- 调用微信浏览器图片长按接口(扫一扫、保存)
结果: 好像是只能微信公众号网页才能使用 - 使用画图,把页面画下来再保存,这个方法有点没大必要的麻烦,也没研究能不能用,也是留着实在是不能,也一定要实现再研究一下的,链接
- 网上方法1:vue 图片下载到本地,图片保存到本地
结果:我这边的测试结果是微信的浏览器打得开,手机内置浏览器打不开 - 网上方法二 :h5页面点击保存图片到手机本地相册(通用,传值就能用)
结果:本地图片可以下载,远程图片就是跳转到浏览页面,如果是只有下载本地图片的需求可以使用
最终使用的方法
······既然手机浏览器自己就可以保存图片的,api也调用不了,那就退而求其次,使用兼容判断咯,当是 h5页面时,提示用户长按保存图片。
(如果不能长按保存,尝试一下**“首先,必须得知道的事情=>第二点“**)
后感
可能有大佬会觉得,就这???写了跟没写一样。但我确实是试了好久好久的......
如果有大佬有更好的解决办法,麻烦踢一下我谢谢~
还有一个感受就是,copy的现象实在是太严重啦! 找来找去都是那俩三个答案。
真真想要copy也要测试能用再copy,至少是能用的解法呀!