长按保存图片

h5实现长按保存图片的功能-利用img标签

这种方式调起了本地相册。
背景： 抽签成功后，获取对应签的带二维码的图片到本地，用户可以通过扫码带二维码的图片进入活动

技术调研：

• 要调起手机系统相册，还是要借助于原生app,拉起访问系统相册的权限才能实现；
• h5内嵌的不同环境——各种app、浏览器等等暴露的api各不相同，所以要实现的话，要根据不同环境调起不同的桥接api,所以工作量还是较大；
• 最后还是用浏览器默认的自带的功能属性img标签长按保存添加图片

1. 允许用户在微信上保存图片 所以img标签需要加上以下属性

• 允许

  -webkit-user-select: auto; 
  -moz-user-select: auto;    
  -khtml-user-select: auto;  
  -ms-user-select: auto;
  user-select: auto;

  tips:
  user-select: auto; => 用户可以选中元素中的内容
  user-select: none; => 用户不可选中元素中的内容
  user-select: text; => 用户可以选中元素中的文字

• 禁止——仅支持IE10及以上的高版本浏览器。IE9 以下请使用 onselectstart="return false;" 的方式来实现。

  -webkit-user-select: none; 
  -moz-user-select: none;    
  -khtml-user-select: none;  
  -ms-user-select: none;
  /* 以下两个属性目前并未支持，写在这里为了减少风险 */
  -o-user-select: none;
  user-select: none;  

2. 监听img标签加载图片完成再执行其他操作

   <img id="img">

   // img标签动态添加
   var img=new Image();
   img.src=''; // 图片url
   img.onload=function(){
     console.log('背景图片已加载完毕');
   };
   // img标签已有
   document.querySelector('#img').onload = function() {
     console.log('加载完成了);
   };

tips:onload 与 ready 的区别是：

• 1、ready 是 DOM 加载完成的事件
• 2、onload 是所有内容加载完成(如：图片)

h5实现长按保存图片的功能-利用a标签-下载的方式

这种方式只是下载，并没有调起系统相册

  function saveImg (url) {
    var _image = new Image()
    _image.src = url + '?v=' + Math.random() // 处理缓存
    _image.crossOrigin = '*' // 支持跨域图片
    _image.onload = function () {
        var canvas = document.createElement('canvas')
        canvas.width = _image.width
        canvas.height = _image.height
        var ctx = canvas.getContext('2d')
        ctx.drawImage(_image, 0, 0, _image.width, _image.height)
        var dataURL = canvas.toDataURL('image/png'); // 转换为base64的图片才能直接下载
        var a = document.createElement('a');
        a.download = '抽签' // 设置a节点的download属性值
        a.href = dataURL; // 将图片的src赋值给a节点的href
        a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window })); // 兼容火狐
    }
},

踩坑1——iPhone11img标签包裹的图片，微信打开链接长按保存失效，其他手机可以

找问题思路：

• 访问正常的img包裹的链接，百度上随便找了一个链接，发现iphone11微信访问是成功的,但是自己的开发的html页面就是不行。
• 访问自己本地开发的其他有img标签的html页面也可以长按保存图片，但是自己开发的抽签html页面就是不行。
• 后来怀疑是不是图片url格式的影响，就把自己的抽签页面图片url替换正常的html页面的url,发现也不行，果然是url格式的问题。
• 直接为了优化图片，在图片的后缀上加了?caplist=jpg,webp,avif这样的后缀，这样可以把jpg的原始图片尺寸压缩小50%左右，但是正是因为这个原因，保存图片的格式为webp的格式，导致微信保存图片失败，去掉这样的后缀就好了。

tips: 在cdn侧判断参数caplist，根据预先定义的优先级，在caplist能够支持图片格式的范围内，返回对应格式的图片内容，若响应了404，则返回次优先级格式图片的内容，直到重试返回图片格式的范围内最低优先级格式的图片内容，若最低优先级格式的图片内容为404，则响应用户为404 HTTP_NOT_FOUND优先级：avif > heic > webp > jpg > png，由图片生产团队提供……