美文网首页
小程序从相机或者相册选取图片

小程序从相机或者相册选取图片

作者: 魅惑_c | 来源:发表于2018-06-26 17:07 被阅读0次

    从相机或者相册选取图片

    wx.chooseImage 

    wx.chooseImage({

        count:1,

        sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有     sourceType: ['album', 'camera'],

        success:function(res){

        },

        fail:function(e){

        }

    })

    返回路径为临时路径,在微信开发模拟器上显示为

    http://.......

    在真实手机上显示为

    wxfile://

    接下来你可能需要显示图片,或者是进行一些其他的操作

    我在做人脸识别的时候,选择图片后,转base64的时候遇到一个问题,在这和大家分享一下儿,希望对大家有帮助

    我在 chooseImage后直接进行了转base64的操作,代码如下:

    wx.request({

        url:that.src, //文件路径

        method:'GET',

        responseType: 'arraybuffer',

        success:res =>{

            let base64 = wx.arrayBufferToBase64(res.data);

            let userImageBase64 = 'data:image/jpg;base64,' + base64;     

            //将base64编码的图片传给后台

        }, fail:function(e){ }

    });

    但是遇到了一个问题,就是在模拟器上是显示正常的,但是在真机上显示会报request: url invalid ,原因应该wxfile格式的文件不能被 wx.request 解析

    后来找到了两种解决办法,分享给大家

    第一种:将本地文件上传给服务器,服务器返回服务器路径

    wx.uploadFile({

        url: 'http://10.100.102.111:5000/uploadFile',

        filePath: that.src,

        name: ‘file’,

        formData:{

            'data': that.src

        },

        success: function(res){

            console.log(res);

            var data = res.data

        } 

    })

    第二种:使用canvas转化

    首选准备一个canvas

    <canvas canvas-id="canvas" style="width:{{oricanvas.width}};height:{{oricanvas.height}}"></canvas>

    在chooseImage的success回调中你要先调 wx.getImageInfo获取图片的实际宽高信息,之后调getBase64Image

    imgpath:图片路径

    width:图片实际的宽度

    height:图片实际的高度

    callback :获取base64之后的回调函数,你可以写你获取base64后的逻辑

    getBase64Image(imgpath,width,height,callback){

        console.log(imgpath,width,height)

        let canvas = wx.createCanvasContext('canvas')

        this.oricanvas.width = width; this.oricanvas.height = height;

        this.setData({ ['oricanvas.width']:width, ['oricanvas.height']:height }) // 1. 绘制图片至canvas     canvas.drawImage(imgpath, 0, 0, width, height) // 绘制完成后执行回调,API 1.7.0     canvas.draw(false,function(){

            console.log('aaa'); // 2. 获取图像数据, API 1.9.0

            wx.canvasGetImageData({ canvasId: 'canvas', x: 0, y: 0, width: width, height: height,             success(res) {

                    // 3. png编码

                    let pngData = upng.encode([res.data.buffer], res.width, res.height)

                    // 4. base64编码

                    let base64 = wx.arrayBufferToBase64(pngData)

                    callback && callback(base64);

                }

            })

        })

    }

    相关文章

      网友评论

          本文标题:小程序从相机或者相册选取图片

          本文链接:https://www.haomeiwen.com/subject/svemyftx.html