HTML5实现点击一键下载按钮,保存图片到手机相册

4,001 阅读1分钟

业务需求,需要一键下载多张图片到手机相册

 var triggerEvent = "touchstart";
savePicture(Url){
      var blob=new Blob([''], {type:'application/octet-stream'});
      var url = URL.createObjectURL(blob);
      var a = document.createElement('a');
      a.href = Url;
      a.download = Url.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];
      var e = document.createEvent('MouseEvents');
      e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      a.dispatchEvent(e);
      URL.revokeObjectURL(url);
},
save() {
    var img = document.getElementById("testImg");
    var alink = document.createElement("a");
    alink.href = img.src;
    alink.click();
  }

这两种方法只是打开图片预览,下载还是需要长按保存。

通过JSSDK保存

chooseImage

小程序保存多张图片