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


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 相关文章推荐
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
使用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实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
PHP中文乱码解决方案
2015/03/05 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
使用Vue构建可重用的分页组件
2018/03/26 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
python中的字典详细介绍
2014/09/18 Python
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
python实现报表自动化详解
2017/11/16 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
python使用minimax算法实现五子棋
2019/07/29 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
你的自行车健身专家:FaFit24
2016/11/16 全球购物
新护士岗前培训制度
2014/02/02 职场文书
运动会稿件100字
2014/02/21 职场文书
购房委托书范本
2014/09/18 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书