微信小程序 chooseImage选择图片或者拍照


Posted in Javascript onApril 07, 2017

微信小程序 chooseImage选择图片或者拍照

一、使用API wx.chooseImage(OBJECT)

var util = require('../../utils/util.js')
Page({
  data:{
    src:"../image/pic4.jpg"
  },
  gotoShow: function(){var _this = this
    wx.chooseImage({
     count: 9, // 最多可以选择的图片张数,默认9
     sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
     sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
     success: function(res){
      // success
      console.log(res)
      _this.setData({
        src:res.tempFilePaths
      })
     },
     fail: function() {
      // fail
     },
     complete: function() {
      // complete
     }
    })
  }
 

二、图片路径进行数据绑定

<view class="container">
 <view>
  <button type="default" bindtap="gotoShow" >点击上传照片</button> 
 </view>
 <view>
  <image class= "show-image" mode="aspectFitf" src="{{src}}"></image>
 </view>
</view>

号外:

1、wx.chooseImage 调用相机或相册

2、<image class= "show-image" mode="aspectFitf" src="{{src}}"></image> 数据绑定

3、js中动态修改文件路径

var _this = this
    wx.chooseImage({
     count: 9, // 最多可以选择的图片张数,默认9
     sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
     sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
     success: function(res){
      // success
      console.log(res)
      _this.setData({
        src:res.tempFilePaths
      })
     },
     fail: function() {
      // fail
     },
     complete: function() {
      // complete
     }

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
jQuery实现当按下回车键时绑定点击事件
Jan 28 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
学习Node.js模块机制
Oct 17 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
Vue3为什么这么快
Sep 23 Javascript
angular *Ngif else用法详解
Dec 15 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 #Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 #jQuery
jQuery中map函数的两种方式
Apr 07 #jQuery
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 #Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 #jQuery
js时间查询插件使用详解
Apr 07 #Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 #Javascript
You might like
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
PHP开发中常用的字符串操作函数
2011/02/08 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
javascript实现留言板功能
2020/02/08 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
Django发送邮件功能实例详解
2019/09/02 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
python tkinter实现连连看游戏
2020/11/16 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
酒店服务实习自我鉴定
2013/09/22 职场文书
计算机本科生自荐信
2013/10/15 职场文书
洗煤厂厂长岗位职责
2014/01/03 职场文书
责任心演讲稿
2014/05/14 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
家属答谢词
2015/01/05 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
判断Python中的Nonetype类型
2021/05/25 Python
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫