前言
相册相片选择、拍照、视频选择、录像
功能
- 图片单选、多选、拍照
- 视频选择、录像
- 裁剪、裁剪比例
wrs-imagepicker插件
使用步骤：
var imagepicker = uni.requireNativePlugin("wrs-imagepicker");
var docPath = plus.io.convertLocalFileSystemURL("_doc");
var params = {};
params.maxCount = 5; // 选择最多的图片数量
params.allowCrop = true; // 选择图片后是否裁切，仅当maxCount=1时生效
params.ratio = 1/1; // 裁切图片时宽高比例
params.allowPickingImage = true; // 是否可以选图片
params.allowTakePicture = true; // 是否可以拍照
params.allowPickingVideo = true;// 是否可以选视频
params.allowTakeVideo = true;// 是否可以录像
params.savePath = docPath; // iOS需要设置图片保存路径，这样才能在沙盒路径访问到图片
imagepicker.selectImage(params, (resp) => {
console.log("selectImage result:" + JSON.stringify(resp));
if(resp.code == 0) {
var files = resp.files;
// this.images.length = 0;
if(files.length > 0) {
for(var i = 0; i < files.length; i ++) {
var fileObj = files[i];
var filePath = plus.io.convertAbsoluteFileSystem( fileObj.path );
console.log("convertAbsoluteFileSystem filePath:" + filePath);
var lowerFilePath = filePath.toLowerCase();
if (lowerFilePath.endWith('.png') || lowerFilePath.endWith('.jpg') || lowerFilePath.endWith('.jpeg') || lowerFilePath.endWith('.gif')|| lowerFilePath.endWith('.bmp')|| lowerFilePath.endWith('.webp')) {
console.log("Is image");
this.images.push(filePath);
} else {
console.log("Is video:" + filePath);
this.videos.push(filePath);
}
}
}
} else {
this.showMsg("选择图片出错 ！ code:" + resp.code);
}
});
params参数说明
- maxCount 可以选择最多的图片数量
- allowCrop 选择图片后是否裁剪，仅当maxCount=1时生效
- ratio 裁剪图片时宽高比例
- allowTakePicture 是否可以相机拍照
- savePath iOS需要设置图片保存路径，这样才能在沙盒路径访问到图片，Android不需要
- cropMode 裁剪模式，值为circle(圆形)、square(方形)，仅对iOS有效
- allowTakePicture 是否允许相机拍照
- allowPickingImage 是否允许选择图片，仅对iOS有效
- allowPickingVideo 是否允许选择视频，仅对iOS有效
- allowTakeVideo 是否允许录制视频，仅对iOS有效
完整代码：
<template>
<div>
<button @click="selectImage">选择图片</button>
<view v-for="(item, index) in images" :key="index" >
<image style="width: 100px; height: 100px; background-color: #eeeeee;" :src="item"
@error="imageError"></image>
</view>
<view v-for="(item, index) in videos" :key="index" >
<video :src="item" @error="videoErrorCallback" enable-danmu danmu-btn controls></video>
</view>
<!-- <video src="/storage/emulated/0/Pictures/VIDEO_20210810_170759.mp4" @error="videoErrorCallback" enable-danmu danmu-btn controls></video>
</view> -->
</div>
</template>
<script>
String.prototype.endWith = function(endStr) {
var d = this.length - endStr.length;
return (d >= 0 && this.lastIndexOf(endStr) == d)
}
var imageData = require('./data.js');
var imagepicker = uni.requireNativePlugin("wrs-imagepicker");
export default {
data() {
return {
msg:'',
curImage: '',
images:[],
videos: [],
src:''
}
},
onLoad: function(){
// /storage/emulated/0/Pictures/VIDEO_20210810_170759.mp4
},
methods:{
selectImage: function(){
var docPath = plus.io.convertLocalFileSystemURL("_doc");
var params = {};
params.maxCount = 5; // 选择最多的图片数量
params.allowCrop = true; // 选择图片后是否裁切，仅当maxCount=1时生效
params.ratio = 1/1; // 裁切图片时宽高比例
params.allowPickingImage = true; // 是否可以选图片
params.allowTakePicture = true; // 是否可以拍照
params.allowPickingVideo = true;// 是否可以选视频
params.allowTakeVideo = true;// 是否可以录像
params.savePath = docPath; // iOS需要设置图片保存路径，这样才能在沙盒路径访问到图片
imagepicker.selectImage(params, (resp) => {
console.log("selectImage result:" + JSON.stringify(resp));
if(resp.code == 0) {
var files = resp.files;
// this.images.length = 0;
if(files.length > 0) {
for(var i = 0; i < files.length; i ++) {
var fileObj = files[i];
var filePath = plus.io.convertAbsoluteFileSystem( fileObj.path );
console.log("convertAbsoluteFileSystem filePath:" + filePath);
var lowerFilePath = filePath.toLowerCase();
if (lowerFilePath.endWith('.png') || lowerFilePath.endWith('.jpg') || lowerFilePath.endWith('.jpeg') || lowerFilePath.endWith('.gif')|| lowerFilePath.endWith('.bmp')|| lowerFilePath.endWith('.webp')) {
console.log("Is image");
this.images.push(filePath);
} else {
console.log("Is video:" + filePath);
this.videos.push(filePath);
}
}
}
} else {
this.showMsg("选择图片出错 ！ code:" + resp.code);
}
});
},
videoErrorCallback: function(e) {
console.error('video发生error事件，携带值为' +e.target.errMsg);
},
showMsg: function(msg){
this.msg = msg;
},
imageError: function(e) {
console.error('image发生error事件，携带值为' + e.detail.errMsg)
}
}
}
</script>
<style>
.log{
width: 100%;
height: 100rpt;
}
.btn {
margin-top: 25rpt;
}
</style>
网友评论