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

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

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)
        });
      }
    });
  },


目录
打赏
0
0
0
0
1
分享
相关文章
小程序本地相册选择图片或相机拍照底部弹框功能
小程序本地相册选择图片或相机拍照底部弹框功能
103 0
微信小程序canvas画布绘制base64图片并保存图片到相册中
微信小程序canvas画布绘制base64图片并保存图片到相册中
228 0
小程序开发问题之使用小程序云服务开发个人相册小程序如何解决
小程序开发问题之使用小程序云服务开发个人相册小程序如何解决
【非常全】微信小程序下载图片到相册,微信小程序自动获取分享图片到相册
【非常全】微信小程序下载图片到相册,微信小程序自动获取分享图片到相册
427 3
|
6月前
|
企业相册名片管理小程序模板
微信小程序个人名片+公司信息,增添公司信息,增添企业信息,编辑个人信息,查看更多,名片通讯录。
51 0
基于ssm+vue.js+uniapp小程序的网络相册附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的网络相册附带文章和源代码部署视频讲解等
35 0
基于ssm+vue.js+uniapp小程序的电子相册系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的电子相册系统附带文章和源代码部署视频讲解等
50 0
EMAS Serverless搭建《私人云相册》小程序
基于EMAS Serverless的云函数、云数据库、云存储等云服务能力一站式快速开发一个小程序。
EMAS Serverless搭建《私人云相册》小程序
【小程序云开发】30分钟搭建个人相册小程序
本文将通过实战“个人相册小程序”开发,教你如何借助小程序 ·云开发 能力,提升功能开发效率,提升数据隐私保护能力。
499 0
基于小程序Serverless开发个人相册小程序
本场景基于小程序云Serverless+小程序开发者工具(IDE),快速搭建个人相册小程序

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等