vue H5app plus调取手机相册,限制图片大小,图片转base64

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)) 
        }    
    })  
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值