Bootstrap

h5 /web 手机端 实现保存图片 到本地相册 uni-app

首先,必须得知道的事情是:
  • uni-app中是有保存图片到本地相册的api的:但是h5并不适用

在这里插入图片描述

  • 手机浏览器长按图片会出现保存图片的按钮直接进行保存图片,甚至在微信中还可以进行扫一扫

    ps:如果发现不能,有可能的原因 ------

    1. 图片的层级过低了,没有获取到,提高一下层级(z-index);
    2. 图片被阻止操作了,给图片设置样式:-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. 调用微信浏览器图片长按接口(扫一扫、保存)
    结果: 好像是只能微信公众号网页才能使用
  2. 使用画图,把页面画下来再保存,这个方法有点没大必要的麻烦,也没研究能不能用,也是留着实在是不能,也一定要实现再研究一下的,链接
  3. 网上方法1:vue 图片下载到本地,图片保存到本地
    结果:我这边的测试结果是微信的浏览器打得开,手机内置浏览器打不开
  4. 网上方法二 :h5页面点击保存图片到手机本地相册(通用,传值就能用)
    结果:本地图片可以下载,远程图片就是跳转到浏览页面,如果是只有下载本地图片的需求可以使用
最终使用的方法

······既然手机浏览器自己就可以保存图片的,api也调用不了,那就退而求其次,使用兼容判断咯,当是 h5页面时,提示用户长按保存图片。
(如果不能长按保存,尝试一下**“首先,必须得知道的事情=>第二点“**)

后感
	可能有大佬会觉得,就这???写了跟没写一样。但我确实是试了好久好久的......
	如果有大佬有更好的解决办法,麻烦踢一下我谢谢~
	还有一个感受就是,copy的现象实在是太严重啦! 找来找去都是那俩三个答案。
	真真想要copy也要测试能用再copy,至少是能用的解法呀!

;