小程序拍照后本地保存

最新推荐文章于 2025-09-25 17:22:44 发布

原创最新推荐文章于 2025-09-25 17:22:44 发布 · 2.2k 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#小程序 #前端

vue 同时被 3 个专栏收录

7 篇文章

订阅专栏

组件安装

3 篇文章

订阅专栏

vuex

3 篇文章

订阅专栏

本文介绍了在小程序中如何使用照相机功能，并讨论了如何利用wx.getImageInfo和downloadFile进行图片处理。getImageInfo能处理各种类型的图片路径，而downloadFile专注于下载网络图片并提供下载进度等高级功能。

按顺序复制

在wxml复制进去照相机

<camera   style="width: 100%; height: 500rpx;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<image  style="width: 100%;" src="{{src}}" ></image>
<button bindtap='saveToPhone'> 保存图片到本地</button>

js文件复制进去

takePhoto:function(){
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        console.log("拍照");
        this.setData({
          src: res.tempImagePath
        })
 
        console.log('开始保存')
        wx.setStorage({
          key: 'key1',
          data: this.data.src,
          success: function (res) {
            console.log('异步保存成功')
          }
        }),
          //获取缓存
          wx.getStorage({
            key: 'key1',
            success: function (res) {
              console.log(res.data)
            }
          })
         wx.navigateTo({
           url: '../preview/preview?src='+res.tempImagePath,
         })
        
      }
    })
  },

存照片

 saveToPhone() {
   
    wx.getImageInfo({
      src: this.data.src,
      success: function (res) {
        var path = res.path;
        //保存图片到本地
        wx.saveImageToPhotosAlbum({
          filePath: path,
          success: function () {
            wx.showToast({
              title: '保存成功'
            })
          },
          fail: function (res) {
            wx.showToast({
              title: '保存失败',
              icon: 'none'
            })
          }
        })
      }
    })
       }

小提示:

用downloadFile只可以获取网络上的图片资源；而getImageInfo则是全能类型，不管是网络上的图片资源，还是小程序中保存的图片。
官方上的说法：getImageInfo的src参数的图片路径可以是相对路径、临时文件路径、存储文件路径（即上面说的全路径）、网络图片路径。
总结：wx.getImageInfo功能更加强大；但是downloadFile则更加专业，因为downloadFile可以读取下载进度等功能。