小程序开发API之图片保存、全屏、压缩、选择

版权声明：欢迎转载，可Chat交流，写博不易请标明出处： https://blog.csdn.net/JackJia2015/article/details/86703803

效果展示

wx.saveImageToPhotosAlbum(Object object)

保存图片到系统相册。调用前需要 用户授权 scope.writePhotosAlbum

saveImageToPhotosAlbum参数

wx.previewImage(Object object)

在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。
previewImage参数

wx.getImageInfo(Object object)

获取图片信息。网络图片需先配置download域名才能生效。
getImageInfo参数

object.success 回调函数参数res

res.orientation 的合法值

wx.compressImage(Object object)

压缩图片接口，可选压缩质量(暂时不好用，官方未回应)
compressImage参数

wx.chooseMessageFile(Object object)

从客户端会话选择文件。
chooseMessageFile参数

object.type 的合法值

object.success 回调函数参数 res

res.tempFiles 的结构

type 的合法值

wx.chooseImage(Object object)

从本地相册选择图片或使用相机拍照。
chooseImage参数

object.sizeType 的合法值

object.sourceType 的合法值

object.success 回调函数 参数 Object res

res.tempFiles 的结构

示例：
效果展示

代码
先在最外层创建文件夹，拖入图片命名为image.jpg

index.wxml

<image src='{{src}}'></image>
<button bindtap='btnClick1' type="primary">保存图片到系统相册</button>
<button bindtap='btnClick2' type="primary">在新页面中全屏预览图片</button>

<button bindtap='btnClick3' type="primary">获取图片信息</button>
<button bindtap='btnClick4' type="primary">压缩图片接口，可选压缩质量</button>

<button bindtap='btnClick5' type="primary">从客户端会话选择文件</button>
<button bindtap='btnClick6' type="primary">从本地相册选择图片或使用相机拍照</button>

index.wxss

button{
  margin: 20rpx
}
image{
  margin-left: 100rpx;
}

index.js

Page({
  data: {
    src:'../../images/image.jpg'
  },
  //自定义提示框
  alertView: function(text){
    wx.showToast({
      title: text,
      icon:'none'
    })

  },
  //保存图片到系统相册
  btnClick1:function(){
    var that = this
    wx.saveImageToPhotosAlbum({
      filePath:"images/image.jpg",
      success(res) { 
        that.alertView('保存成功')
      }
    })
  },
  //在新页面中全屏预览图片,可多张图片
  btnClick2: function () {
    wx.previewImage({
      // 需要预览的图片http链接列表
      urls: ['https://img2.woyaogexing.com/2018/12/31/645fc061ebfe8fa0!600x600.jpg', 'https://img2.woyaogexing.com/2018/12/31/972fe23faa9a3105!600x600.jpg','https://img2.woyaogexing.com/2018/12/31/c303577c48b1c397!600x600.jpg'], 
      // 当前显示图片的http链接
      current: 'https://img2.woyaogexing.com/2018/12/31/645fc061ebfe8fa0!600x600.jpg', 
    })
  },
  //获取图片信息。
  btnClick3: function () {
    var that = this
    wx.getImageInfo({
      src: "../../images/image.jpg",
      success(res) {
        that.alertView('图片信息'+ res.width + '--' + res.height + '--' + res.path + '--' + res.orientation + '--' + res.type)
        console.log(res.width)
        console.log(res.height)
        console.log(res.path)        //图片的本地路径
        console.log(res.orientation) //拍照时设备方向
        console.log(res.type)        //图片格式
      }
    })
  },
  //压缩图片(暂时不好用，官方未回应)
  btnClick4: function () {
    var that = this
    wx.compressImage({
      src: "../../images/image.jpg", // 图片路径
      quality: 50 ,// 压缩质量范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）。
      success(){
        that.alertView('压缩成功')
      },
      fail(){
        that.alertView('压缩失败')
      }
    })
  },
  //从客户端会话选择文件。
  btnClick5: function () {
    var that = this
    wx.chooseMessageFile({
      count: 10,
      type: 'image',
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
      }
    })
  },
  //从本地相册选择图片或使用相机拍照。
  btnClick6: function () {
    var that = this
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        that.setData({
          src: tempFilePaths
        })
      }
    })
  }
 
})