小程序 使用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:  >

微信版本升级后，打开微信，点击底部的“发现”这个菜单项，就会发现升级后的“发现”菜单里，增加了“小程序”这样一个功能。

2点击打开小程序后，可以看到有附近的小程序和我的小程序，附近的小程序是所在定位周边的小程序。

下面的小程序列表可以看到的是我们之前打开过的一些小程序，如果有自己觉得很好用的小程序就可以点击左上角，添加到我的小程序里面。

3微信小程序还有具有搜索功能，打开搜索页面可以输入想要找的小程序。

以上就是关于小程序 使用upng.js 把小程序选择的图片转换为base64全部的内容，包括:小程序 使用upng.js 把小程序选择的图片转换为base64、小程序出现默认多大码怎么回事啊、如何做一个小程序等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！