微信小程序实现拍照和相册选取图片

 更新时间:2021年05月09日 10:27:20   作者:勘察加熊人  
这篇文章主要为大家详细介绍了微信小程序实现拍照和相册选取图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现拍照和相册选取图片的具体代码,供大家参考,具体内容如下

布局:

<!--pages/camera/camera.wxml-->
<view 
class="tui-menu-list" 
id="view1" 
style="display:flex;flex-direction:space-between">
 <button 
  id="b1" 
  size="mini"
  type="primary" 
  bindtap="chooseimage">
  获取图片
 </button>
 <button 
  id="b2" 
  size="mini"
  type="primary"
  bindtap="savePhone">
  保存
 </button>
</view>
<image
  src="{{tempFilePaths}}" 
  catchtap="chooseImageTap"
  mode="aspectFit" 
  style="width:100%;height:400px;background-color:#ffffff;">
</image>

样式:

/* pages/camera/camera.wxss */
 
.view1 {
  height: 25px
}
 
.tui-menu-list {
  display: flex;
  flex-direction: row;
  margin: 20rpx;
  padding: 20rpx;
}

获取图片路径,显示图片和保存

// pages/camera/camera.js
Page({
 
  data: {
    tempFilePaths: 'http://pic2.cxtuku.com/00/01/08/b207004f7104.jpg'
  },
  chooseimage: function () {
    var that = this;
    wx.showActionSheet({
      itemList: ['从相册选择', '拍照'],
      itemColor: "#CED63A",
      success: function (res) {
        if (!res.cancel) {
          if (res.tapIndex == 0) {
            that.chooseWxImage('album')
          } else if (res.tapIndex == 1) {
            that.chooseWxImage('camera')
          }
        }
      }
    })
  },
 
  chooseWxImage: function (type) {
    var that = this
    wx.chooseImage({
      sizeType: ['original', 'compressed'],
      sourceType: [type],
      count: 1,
      success: function (res) {
        console.log(res)
        that.setData({
          tempFilePaths: res.tempFilePaths[0],
        })
      }
    })
  },
  savePhone: function () {
    wx.getImageInfo({
      src: this.data.tempFilePaths,
      success: function (res) {
        var path = res.path
        wx.saveImageToPhotosAlbum({
          filePath: path,
          success: function () {
            wx.showToast({
              title: '保存成功',
            })
          },
          fail: function (res) {
            wx.showToast({
              title: '保存失败',
              icon: 'none'
            })
          }
        })
      }
    })
  }
})

效果图:

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

相关文章

  • Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法

    Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法

    今天小编就为大家分享一篇Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS小功能(onmouseover实现选择月份)实例代码

    JS小功能(onmouseover实现选择月份)实例代码

    这篇文章主要介绍了onmouseover实现选择月份实例代码,有需要的朋友可以参考一下
    2013-11-11
  • JavaScript导出Excel实例详解

    JavaScript导出Excel实例详解

    这篇文章主要介绍了JavaScript导出Excel的方法,以实例形式详细分析了javascript将WEB页面导出为EXCEL文档的方法及相关的技巧说明,对于深入了解javascript编程原理有一定的借鉴价值,需要的朋友可以参考下
    2014-11-11
  • JavaScript函数柯里化详解

    JavaScript函数柯里化详解

    这篇文章主要为大家介绍了JavaScript函数柯里化,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • javascript Three.js创建文字初体验

    javascript Three.js创建文字初体验

    这篇文章主要为大家介绍了Three.js创建文字初体验,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • Javascript刷新窗口方法小结

    Javascript刷新窗口方法小结

    这篇文章主要介绍了Javascript刷新窗口方法,以实例形式分析了JavaScript刷新窗口的四种常用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • JavaScript直接调用函数与call调用的区别实例分析

    JavaScript直接调用函数与call调用的区别实例分析

    这篇文章主要介绍了JavaScript直接调用函数与call调用的区别,结合额实例形式分析了JavaScript直接调用函数与call调用的基本用法、区别及相关注意事项,需要的朋友可以参考下
    2020-05-05
  • JavaScript对象合并实现步骤介绍

    JavaScript对象合并实现步骤介绍

    这篇文章主要介绍了JavaScript对象合并实现步骤,为什么要合并?这是我在重构代码的时候的一个需求。简单来说,我会有若干个对象需要合并为一个对象。而这些对象为两层,如果直接展开或者赋值会涉及到深拷贝
    2023-01-01
  • JavaScript中call和apply方法的区别实例分析

    JavaScript中call和apply方法的区别实例分析

    这篇文章主要介绍了JavaScript中call和apply方法的区别,结合实例形式分析call和apply方法的功能、原理及相关使用操作区别,需要的朋友可以参考下
    2018-08-08
  • javascript实现用户管理系统

    javascript实现用户管理系统

    这篇文章主要为大家详细介绍了javascript实现用户管理系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06

最新评论