微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传

前端之家收集整理的这篇文章主要介绍了微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_301_0@今天遇到微信小程序用户头像设置功能,做笔记.


@H_301_0@先上gif:


<p style="text-align: center">


@H_301_0@再上代码:


@H_301_0@小demo,代码很简单.


@H_301_0@

1.index.wxml


<div class="jb51code">
<pre class="brush:xhtml;">

<button style="margin:30rpx;" bindtap="chooseimage">获取图片
<image src="{{tempFilePaths }}" mode="aspecFill" style="width: 100%; height: 450rpx"/>

@H_301_0@

2.index.js

获取应用实例 var app = getApp() Page({ data: { tempFilePaths: '' },onLoad: function () { },chooseimage: function () { var _this = this; wx.chooseImage({ count: 1,// 默认9 sizeType: ['original','compressed'],// 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album','camera'],// 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 _this.setData({ tempFilePaths:res.tempFilePaths }) } }) } })
@H_301_0@

API 说明:

@H_301_0@这里说说sourcetype.默认是从相册获取和使用相机拍照,跟微信现在选择图片的界面一样,第一格是拍照,后面的是相册照片.

@H_301_0@这里注意:返回的是图片在本地的路径.如果需要将图片上传到服务器,需要用到另一个API.

@H_301_0@

示例代码:

@H_301_0@以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

猜你在找的微信小程序相关文章