vue H5app plus调取手机相册,限制图片大小,图片转base64
直接上代码
filmImg(){ //移动端发送图片
let _this = this
plus.gallery.pick(function (path) {
let fileimg = path.files[0] //获取第一个图片url
plus.io.resolveLocalFileSystemURL(fileimg, function (entry) { //通过图片URL参数获取目录对象或文件对象
console.log('获取图片对象成功!')
entry.getMetadata(function (metaData) {
let imgSize = metaData.size / 1024
if(imgSize > 3072){ //判断图片大小是否大于 3M
console.error('图片大小必须小于3M!');
}else{
_this.imgBase64(fileimg).then((res)=>{ //调用图片转base64方法
console.log(res) //打印base64码
})
}
}, function () {
console.error('获取图片大小失败!');
});
}, function () {
console.error('获取图片对象失败!');
});
},function(e){
console.log( "取消选择图片" );
}, {filter:"image",multiple:true,maximum:1,system:false}); //设置 multiple 可以多选图片,设置 maximum 可以确定选择图片数量,system设置使用h5相册库
}
获取图片路径转base64码
imgBase64(path){ //移动端图片转换base64 , 异步处理
function getBase64Image(img) { //手机端转码格式方法
var canvas = document.createElement("canvas"); // 创建一个canvas
canvas.width = img.width; // 设置对应的宽高
canvas.height = img.height;
var ctx = canvas.getContext("2d"); // 二维绘图环境
ctx.drawImage(img, 0, 0, img.width, img.height); // 将图片画在画布上
var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); // 获取到图片的格式
var dataURL = canvas.toDataURL("image/" + ext); // 得到base64 编码的 dataURL
return dataURL;
}
return new Promise(function(resolve, reject) { //使用Promise进行异步处理
let image = new Image();
//解决图片跨域问题
image.crossOrigin = '';
//设置图片路径
image.src = path;
//图片加载完后的回调函数,调用转码函数
image.onload = function(){
resolve(getBase64Image(image))
}
})
}