纯净、安全、绿色的下载网站

首页

当前位置:首页IT学院IT技术

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

勘察加熊人   2021-05-09 我要评论
想了解微信小程序实现拍照和相册选取图片的相关内容吗,勘察加熊人在本文为您仔细讲解微信小程序拍照和相册选取图片的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:微信小程序拍照,微信小程序相册选取图片,微信小程序相册,下面大家一起来学习吧。

布局:

<!--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'
            })
          }
        })
      }
    })
  }
})

效果图:


相关文章

猜您喜欢

  • C语言文本编译器 C语言实现简易文本编译器

    想了解C语言实现简易文本编译器的相关内容吗,北牧尘在本文为您仔细讲解C语言文本编译器的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:C语言,文本编译器,下面大家一起来学习吧。..
  • C++二分法求方程近似解 C++实现二分法求方程近似解

    想了解C++实现二分法求方程近似解的相关内容吗,岚天大大在本文为您仔细讲解C++二分法求方程近似解的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:C++二分法求方程近似解,C++二分法求方程,C++求方程近似解,下面大家一起来学习吧。..

网友评论

Copyright 2022 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们