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

您问的是华为手机微信小程序拍照显示无数据信息怎们办吧，解决方法如下：

1、长按微信。

2、选择应用信息。

3、点击权限管理。

4、点击相机。

5、切换为仅在使用中允许。

6、切换设置完成后就可以了。

原因有：

1、手机的内存满了，微信视频不能使用了；使用手机或是微信自带的清理缓存功能试一试。

2、微信与手机的兼容性问题导致的；退出微信，重新登录一下或是卸载微信重新安装低版本的以适应手机的 *** 作系统。

3、设置了相机权限。去设置里面查看是否开启相机权限。

以上就是关于小程序 使用upng.js 把小程序选择的图片转换为base64全部的内容，包括:小程序 使用upng.js 把小程序选择的图片转换为base64、怎么用小程序国际健康码拍照上传、华为手机微信小程序拍照显示无数据信息等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！