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


Posted in Javascript onMay 09, 2021

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

布局:

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

效果图:

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

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

Javascript 相关文章推荐
新手常遇到的一些jquery问题整理
Aug 16 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
Javascript实现秒表计时游戏
May 27 Javascript
区分vue-router的hash和history模式
Oct 03 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
微信小程序实现录音Record功能
如何用JavaScipt测网速
May 09 #Javascript
浅谈JS的二进制家族
如何使用vue3打造一个物料库
Ajax常用封装库——Axios的使用
May 08 #Javascript
微信小程序用户授权最佳实践指南
vue完美实现el-table列宽自适应
You might like
php扩展ZF――Validate扩展
2008/01/10 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
python如何让类支持比较运算
2018/03/20 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
"序列点" 是什么
2016/07/29 面试题
为数据库创建索引都需要注意些什么
2012/07/17 面试题
Linux面试题LINUX系统类
2014/11/19 面试题
装潢设计实习自我鉴定
2013/09/19 职场文书
敬老文明号事迹材料
2014/01/16 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
数字化校园建设方案
2014/05/03 职场文书
党员承诺书格式
2014/05/21 职场文书
学党史心得体会
2014/09/05 职场文书
企业百日安全活动总结
2015/05/07 职场文书
手残删除python之后的补救方法
2021/06/26 Python
TV动画《间谍过家家》公开PV
2022/03/20 日漫
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python