小程序之选择拍照或者本地相册

简介: 小程序之选择拍照或者本地相册

html


<!--pages/testdemo/testdemo.wxml-->
<view class="">
    <view class="container">
        <view class='img_body'>
            <view class='img_list'>
                <view class='img_li' wx:for="{{imglist}}" wx:key="{{index}}">
                    <image src="{{item}}"></image>
                </view>
                <view class='addimg' bindtap='img_w_show'>
                    <image src='../../imgs/add.png'></image>
                </view>
            </view>
        </view>
    </view>
</view>


css


.img_list {
    width: 100vw;
    display: flex;
    display: -webkit-flex;
    padding: 0 20rpx;
    box-sizing: border-box;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}
.img_list .img_li,
.addimg {
    width: 200rpx;
    height: 250rpx;
    border: 1px solid #999999;
    margin: 5rpx;
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
}
.addimg image {
    width: 150rpx;
    height: 150rpx;
    margin: 50rpx 25rpx;
}
.img_list .img_li image {
    width: 100%;
    height: 100%;
}


只是一个弹框


imglist: [
      "https://img.yzcdn.cn/vant/cat.jpeg",
      "https://img.yzcdn.cn/vant/cat.jpeg"
    ]
  img_w_show() {
    // 弹框 是相机拍照还是 从相册中选择的哈
    wx.showActionSheet({
      itemList: ["从手机相册选择", "拍照"],
      success: function(res) {
        <!-- 判断你自己选择的是相机还是相机  -->
        console.log("选择的是 :", res.tapIndex);
        let sourceType = "camera";
        if (res.tapIndex == 0) {
          sourceType = "camera"; //相机
        } else if (res.tapIndex == 1) {
          sourceType = "album"; //相册
        }
      },
      fail: function(res) {
        console.log(res.errMsg);
      }
    });
  }


选择本地相册图片 或者是 相机拍照


var _this = this;
    wx.showActionSheet({
      itemList: ["拍照", "从相册中选择"],
      success(res) {
        console.log("选择的是 :", res.tapIndex);
        let sourceType = "camera";
        if (res.tapIndex == 0) {
          sourceType = "camera"; //相机
        } else if (res.tapIndex == 1) {
          sourceType = "album"; //相册
        }
        wx.chooseImage({
          count: 9,
          sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图,默认二者都有
          sourceType: [sourceType],
          success: function(res) {
            var tempFilePaths = res.tempFilePaths;
            console.log(tempFilePaths);//图片路径为 https
            _this.setData({
              imglist: _this.data.imglist.concat(tempFilePaths)
            });
          }
        });
      }
    });


点击加号直接拍照


img_w_show() {
    var _this = this;
    // 只是单纯的嗲用是拍照 还是相册中选择弹框
    let sourceType = "camera";
    //  从本地相册选择图片或使用相机拍照。
    wx.chooseImage({
      count: 9,
      sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: [sourceType],
      success: function(res) {
        var tempFilePaths = res.tempFilePaths;
        console.log(tempFilePaths); //图片路径为 https
        _this.setData({
          imglist: _this.data.imglist.concat(tempFilePaths)
        });
      }
    });
  },


相关文章
|
6月前
|
小程序 JavaScript
小程序本地相册选择图片或相机拍照底部弹框功能
小程序本地相册选择图片或相机拍照底部弹框功能
59 0
|
5月前
|
前端开发 小程序
微信小程序canvas画布绘制base64图片并保存图片到相册中
微信小程序canvas画布绘制base64图片并保存图片到相册中
|
8月前
|
存储 小程序 数据库
【小程序云开发】30分钟搭建个人相册小程序
本文将通过实战“个人相册小程序”开发,教你如何借助小程序 ·云开发 能力,提升功能开发效率,提升数据隐私保护能力。
189 0
|
8月前
|
存储 小程序 IDE
EMAS Serverless搭建《私人云相册》小程序
基于EMAS Serverless的云函数、云数据库、云存储等云服务能力一站式快速开发一个小程序。
175 0
EMAS Serverless搭建《私人云相册》小程序
|
8月前
|
小程序 IDE Serverless
基于小程序Serverless开发个人相册小程序
本场景基于小程序云Serverless+小程序开发者工具(IDE),快速搭建个人相册小程序
158 0
|
9月前
|
前端开发 小程序
微信小程序canvas画布绘制base64图片并保存图片到相册中
微信小程序canvas画布绘制base64图片并保存图片到相册中
130 0
|
9月前
|
小程序 JavaScript API
微信小程序-image组件-选择相册资源案例
在我们企业开发当中经常有个人中心等相关需求,这些需求当中有一个功能点就是用户头像信息,这种信息用户可以选择自己手机当中的资源进行上传并保存设置。本章就是来介绍下这种功能在微信小程序当中该如何进行实现。
105 0
|
9月前
|
前端开发 小程序 JavaScript
微信小程序 - DZMDrawingBoard - (Canvas封装的画板、手写签名、生成图片、保存相册...库)
微信小程序 - DZMDrawingBoard - (Canvas封装的画板、手写签名、生成图片、保存相册...库)
133 0
|
JavaScript 小程序 前端开发
微信小程序生成海报图片导出相册
小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图等场景
544 1
微信小程序生成海报图片导出相册