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

Posted 2023-03-24

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序使用upng.js 把小程序选择的图片转换为base64相关的知识，希望对你有一定的参考价值。

参考技术A 有时候会遇到后端需要前端获取的图片文件转换成base64，在传给后台

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

wx.chooseImage(OBJECT)

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

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

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

再通过插件upng.js插件实现图片转base64（所需插件文件附件中）

1. 把upng.js和pako.min.js文件放到项目中

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

var upng = require('../../utils/upng.js');

这里只需要导入npng.js ，pako.min.js是在npng,js里面调用

3. 建一个canvas

chooseImage">人脸测试

// 画布

// 生成base64位图片展示变量imgbase64

need-to-insert-img

4. 添加js点击chooseImage事件

chooseImage: function()

var that = this;

var coss_signature = wx.getStorageSync('cos_signature');

var canvasID = "imgCanvas";

var canvas = wx.createCanvasContext(canvasID)

wx.chooseImage(

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

sizeType: ['original'],

count: 1,

success: function (res)

var tempFilePaths = res.tempFilePaths;

// 获取文件路径

var filePath = tempFilePaths[0];

// 1. 绘制图片至canvas

canvas.drawImage(filePath, 0, 0, 300, 200)

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

canvas.draw(false, function(res)

// 2. 获取图像数据， API 1.9.0

wx.canvasGetImageData(

canvasId: canvasID,

x: 0,

y: 0,

width: 300,

height: 200,

success(res)

// 3. png编码

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

// 4. base64编码

let base64 = wx.arrayBufferToBase64(pngData)

// ...

that.setData(

imgbase64: base64

)

)

)

)

5. 实现

need-to-insert-img

need-to-insert-img

tips

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

可以通过小程序的

wx.getImageInfo(OBJECT)

获取长和宽

相关链接

upng.js: https://github.com/photopea/UPNG.js

wx-cardscanner: https://github.com/zh8637688/wx-cardscanner 有时候会遇到后端需要前端获取的图片文件转换成base64，在传给后台

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

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

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

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

再通过插件upng.js插件实现图片转base64（所需插件文件附件中）

1. 把upng.js和pako.min.js文件放到项目中

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

var upng = require('../../utils/upng.js');

这里只需要导入npng.js ，pako.min.js是在npng,js里面调用

3. 建一个canvas

chooseImage">人脸测试

// 画布

// 生成base64位图片展示变量imgbase64

4. 添加js点击chooseImage事件

chooseImage: function()

var that = this;

var coss_signature = wx.getStorageSync('cos_signature');

var canvasID = "imgCanvas";

var canvas = wx.createCanvasContext(canvasID)

wx.chooseImage(

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

sizeType: ['original'],

count: 1,

success: function (res)

var tempFilePaths = res.tempFilePaths;

// 获取文件路径

var filePath = tempFilePaths[0];

// 1. 绘制图片至canvas

canvas.drawImage(filePath, 0, 0, 300, 200)

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

canvas.draw(false, function(res)

// 2. 获取图像数据， API 1.9.0

wx.canvasGetImageData(

canvasId: canvasID,

x: 0,

y: 0,

width: 300,

height: 200,

success(res)

// 3. png编码

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

// 4. base64编码

let base64 = wx.arrayBufferToBase64(pngData)

// ...

that.setData(

imgbase64: base64

)

)

)

)

5. 实现

tips

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

可以通过小程序的

获取长和宽

相关链接

upng.js: https://github.com/photopea/UPNG.js

wx-cardscanner: https://github.com/zh8637688/wx-cardscanner

小程序图片转base64然后上传的坑点

图片上传要用到upng.js

　　　　　　　　　　const self = this

                const ctx = wx.createCanvasContext(‘myCanvas‘)
                const platform = wx.getSystemInfoSync().platform
                const imgWidth = 60, imgHeight = 60;
                wx.chooseImage({
                    success: res => {
                        //生成的图片临时路径画成canvas
                        ctx.drawImage(res.tempFilePaths[0], 0, 0, imgWidth, imgHeight)
                        ctx.draw(false, () => {
                            self.drawFinish = true
                            wx.canvasGetImageData({
                                canvasId: ‘myCanvas‘,
                                x: 0,
                                y: 0,
                                width: imgWidth,
                                height: imgHeight,
                                success: res => {
                                    if (platform === ‘ios‘) {
                                        // 兼容处理：ios获取的图片上下颠倒
                                        res = this.reverseImgData(res)
                                    }
                                    // 3. png编码
                                    let pngData = upng.encode([res.data.buffer], res.width, res.height)
                                    // 4. base64编码

                                    let base64 = wx.arrayBufferToBase64(pngData)
                                    debugger
                                    console.log(‘data:image/jpeg;base64,‘ + base64)
                                    this.setData({
                                        avatarUrl: ‘data:image/jpeg;base64,‘ + base64
                                    });
                                },
                                fail(res) {
                                    debugger
                                    console.log(res)
                                },
                            })
                        })
                    }
                })

这里要有几个坑
1.canvas那个标签如果隐藏，会出现转base64失败的情况
2.ios上图片需要翻转

以上是关于小程序使用upng.js 把小程序选择的图片转换为base64的主要内容，如果未能解决你的问题，请参考以下文章

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

小程序 图片转base64然后上传的坑点

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

小程序图片转base64然后上传的坑点