• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

Wx-小程序-图片预览、保存

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

点击图片预览

长按图片保存

点击按钮保存到手机相册

view:

<!--wxml-->
<text>点击图片预览、长按保存图片、点击按钮保存到系统相册</text>
<image class="img" src="{{item}}" bindtap=\'previewImage\' wx:for="{{src}}" wx:key="{{item.index}}"></image>
<button bindtap=\'saveImg\'>Save</button>

js:

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    src: [
     \'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg\',\'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg\'
      ]
  },
  /**
   * 长按预览保存图片到本地
   */
  previewImage:function(e){
    var that = this;
    wx.previewImage({
      current: that.data.src,//当前显示图片的http链接 
      urls: that.data.src, //要预览的图片
    })
    wx.getImageInfo({
      src: that.data.src[0],
      success(res){
        console.log(res)
        console.log(res.width)
        console.log(res.height)
      }
    })
  },
 
 
 
  /**
   * saveImg:点击按钮保存图片到本地
   */
  saveImg: function() {
    var imgSrc = "http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"
    wx.downloadFile({
      url: imgSrc,
      success: function(res) {
        console.log(res); 
        //图片保存到本地
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,//图片文件路径
          success(res){
            //接口调用成功
            wx.showToast({
              title: \'保存成功\',
              duration:1000,//提示延迟时间
            })
          },
          fail(err){
            console.log(err)
            //需要用户授权设置
            if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny"){
                console.log(\'用户一开始拒绝了,我们想再次发起授权\')
                console.log(\'打开设置窗口\')
 
                // 用户授权设置
                wx.openSetting({
                  success(settingdata){
                    console.log(settingdata)
                    if (settingdata.authSetting[\'scope.writePhotosAlbum\']) {
                      console.log(\'获取权限成功,给出再次点击图片保存到相册的提示。\')
                    } else {
                      console.log(\'获取权限失败,给出不给权限就无法正常使用的提示\')
                    }
                  }
                })
 
            }
          }
        })
        
      }
    })
 
 
 
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
 
  },
})
--------------------- 
作者:Judy1623 
来源:CSDN 
原文:https://blog.csdn.net/weixin_39100915/article/details/82878867 

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序图片预览 wx.previewImage发布时间:2022-07-18
下一篇:
小程序图片预览发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap