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


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 相关文章推荐
JavaScript 变量基础知识
Nov 07 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
一些可能会用到的Node.js面试题
Jun 15 Javascript
微信小程序框架的页面布局代码
Aug 17 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 Javascript
微信小程序实现点击导航条切换页面
Nov 19 Javascript
微信小程序实现录音Record功能
如何用JavaScipt测网速
May 09 #Javascript
浅谈JS的二进制家族
如何使用vue3打造一个物料库
Ajax常用封装库——Axios的使用
May 08 #Javascript
微信小程序用户授权最佳实践指南
vue完美实现el-table列宽自适应
You might like
PHP5/ZendEngine2的改进
2006/10/09 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
js实现微信聊天界面
2020/08/09 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
详解Python正则表达式re模块
2019/03/19 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
《北京的春节》教学反思
2014/04/07 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
部门年终奖分配方案
2014/05/07 职场文书
干部选拔任用方案
2014/05/26 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书