小程序 使用upng.js 把小程序选择的图片转换为base64

有时候会遇到后端需要前端获取的文件转换成base64，在传给后台

小程序有专门的选择接口，

wxchooseImage(OBJECT)

但是这个只是返回一个的临时路径，并不是文件数据本身。

小程序暂时没有接口直接转base64的

所以我们需要使用canvas和canvasGetImageData（小程序版本190以后要才有）先获取内容，

再通过插件upngjs插件实现转base64（所需插件文件附件中）

1 把upngjs和pakominjs文件放到项目中

2 在pages下的页面js文件中导入

var upng = require('//utils/upngjs');

这里只需要导入npngjs ，pakominjs是在npng,js里面调用

3 建一个canvas

chooseImage">人脸测试  

// 画布

// 生成base64位展示 变量imgbase64

need-to-insert-img

4 添加js点击chooseImage事件

chooseImage: function() {

        var that = this;

        var coss_signature = wxgetStorageSync('cos_signature');

        var canvasID = "imgCanvas";

        var canvas = wxcreateCanvasContext(canvasID)

        wxchooseImage({

            sourceType: ['album', 'camera'],

            sizeType: ['original'],

            count: 1,

            success: function (res) {

                var tempFilePaths = restempFilePaths;

                // 获取文件路径

                var filePath = tempFilePaths[0];

                // 1 绘制至canvas

                canvasdrawImage(filePath, 0, 0, 300, 200)

                // 绘制完成后执行回调，API 170

                canvasdraw(false, function(res){

                    // 2 获取图像数据， API 190

                    wxcanvasGetImageData({

                        canvasId: canvasID,

                        x: 0,

                        y: 0,

                        width: 300,

                        height: 200,

                        success(res) {

                          // 3 png编码

                          let pngData = upngencode([resdatabuffer], reswidth, resheight)

                          // 4 base64编码

                          let base64 = wxarrayBufferToBase64(pngData)

                          //

                          thatsetData({

                            imgbase64: base64

                          })

                        }

                    })

                })

            }

        })

    }

5 实现

need-to-insert-img

need-to-insert-img

tips

画布画的的长和宽是固定的，这个按照自己需求设置。

可以通过小程序的

wxgetImageInfo(OBJECT)

获取长和宽

相关链接

upngjs:  >

wxnavigateToMiniProgram

从小A序跳转到小B序

首先介绍一下需要用到的api  ：wxnavigateToMiniProgram 

他的参数们

参数名        是否必填        类型        说明

appId            是                 string        要打开的小程序 appId

path              是                 string        目标小程序的指定页面，为空的话跳首页

extraData     否                 object        需要带给目标小程序的参数

envVersion   否                 string        目标小程序的版本  （基本没啥用）

success       否                 function     成功回调

fail               否                 function     失败回调

complete     否                 function     结束回调

在起步小程序中的appjson中需要配置跳转小程序的appid

目标小程序 可以在appjs中接收起步小程序带过来的参数，官方文档给的是apponLaunch和apponshow都能接到参数，但是我的onLaunch不能打印出来，可能我的小程序是个傻的小程序。（ 注意千万是在appjs中，而不是目标页面的js文件 ，我就吃了这个亏）

小A序(表演跳转)

小B序(表演接收参数)

关于调试，开发者工具是不能跳转的，不过我们可以真机调试，两个小程序都开始真机调试，在小程序右上角的三个小点点有个打开调试，就能看到log出来的参数了，根据自己习惯吧，展示在页面上也是个好办法。

以上就是关于小程序 使用upng.js 把小程序选择的图片转换为base64全部的内容，包括:小程序 使用upng.js 把小程序选择的图片转换为base64、前端如何在微信小程序中将用户头像存为临时文件路径、小程序之间的跳转（带参）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！