小程序实现长按保存图片的方法


Posted in Javascript onDecember 31, 2019

微信浏览器打开h5页面如果是img标签的话,长按会弹出保存图片的选项。但是微信小程序里面不可以。需要自己写这个功能。这个功能有两个点,一个是长按,一个是保存图片到本地。

1,、微信小程序提供了长按的事件,叫 bindlongpress

2、微信小程序同样提供了保存图片的接口,是 wx.saveImageToPhotosAlbum()

弄清楚了,我们可以开始做这个功能了,首先写wxml

<image src="{{url}}" data-url="{{url}}" bindlongpress="saveImage"></image>

然后就是js代码了

Page({
 /**
  * 页面的初始数据
  */
 data: {
  url:"https://wechat.weixinzjit.com/costa/public/uploads/images/20190109/67b16149693920598435315fd0d5ab3e.jpg"
 },
 // 长按保存图片
 saveImg(e){
   let url = e.currentTarget.dataset.url;
   wx.saveImageToPhotosAlbum({
     filePath:url,
     success(res) { 
      console.log(res);
     },
     fail(res){
      console.log(res);
     }
    })
 }
})

这样写感觉没问题,但是不行,为什么,看下面文档说明。

小程序实现长按保存图片的方法

遇到了两个问题:

1、需要授权

2、路径不能是网络路径

一个问题一个问题解决,首先长按之后,不去保存图片,先去判断用户是否授权,这个接口就不多讲了,之前写过。

直接贴上代码

wx.getSetting({
   success: (res) => {
    if (!res.authSetting['scope.writePhotosAlbum']) {
     wx.authorize({
      scope: 'scope.writePhotosAlbum',
      success:()=> {
       // 同意授权
      },
      fail: (res) =>{
       console.log(res);
      }
     })
    }else{
     // 已经授权了
    }
   },
   fail: (res) =>{
    console.log(res);
   }
  })

授权问题解决了以后,要处理另外一个问题,就是图片不能是网络路径。这个时候我们可以用到另外一个接口,叫 wx.getImageInfo()

小程序实现长按保存图片的方法

通过文档看到,这个接口是可以接收网络路径的,返回的是本地路径。所以我们先用这个接口把网络路径转化一下,再拿去给wx.saveImageToPhotosAlbum用。

wx.getImageInfo({
   src: url,
   success:(res)=> {
    let path = res.path;
    wx.saveImageToPhotosAlbum({
     filePath:path,
     success(res) { 
      console.log(res);
     },
     fail:(res)=>{
      console.log(res);
     }
    })
   },
   fail:(res)=> {
    console.log(res);
   }
  })

所以整体的代码是这样子的

Page({
 data: {
   url:"https://wechat.weixinzjit.com/costa/public/uploads/images/20190109/67b16149693920598435315fd0d5ab3e.jpg"
 },
 // 长按保存图片
 saveImg(e){
  let url = e.currentTarget.dataset.url;
  //用户需要授权
  wx.getSetting({
   success: (res) => {
    if (!res.authSetting['scope.writePhotosAlbum']) {
     wx.authorize({
      scope: 'scope.writePhotosAlbum',
      success:()=> {
       // 同意授权
       this.saveImg1(url);
      },
      fail: (res) =>{
       console.log(res);
      }
     })
    }else{
     // 已经授权了
     this.saveImg1(url);
    }
   },
   fail: (res) =>{
    console.log(res);
   }
  })  
 },
 saveImg1(url){
  wx.getImageInfo({
   src: url,
   success:(res)=> {
    let path = res.path;
    wx.saveImageToPhotosAlbum({
     filePath:path,
     success:(res)=> { 
      console.log(res);
     },
     fail:(res)=>{
      console.log(res);
     }
    })
   },
   fail:(res)=> {
    console.log(res);
   }
  })
 },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
Feb 03 Javascript
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 #Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 #Javascript
TypeScript之调用栈的实现
Dec 31 #Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 #Javascript
Vue实现剪贴板复制功能
Dec 31 #Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 #Javascript
小程序外卖订单界面的示例代码
Dec 30 #Javascript
You might like
php不用正则采集速度探究总结
2008/03/24 PHP
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
Python 解析XML文件
2009/04/15 Python
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
win与linux系统中python requests 安装
2016/12/04 Python
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
python opencv之SURF算法示例
2018/02/24 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
初学者学习Python好还是Java好
2020/05/26 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
中医临床专业自我鉴定范文
2014/01/15 职场文书
社区母亲节活动方案
2014/03/05 职场文书
《赶海》教学反思
2014/04/20 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
2015年高中语文教学总结
2015/08/18 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis
分享几种python 变量合并方法
2022/03/20 Python