小程序图片上传用upng转base64 图片旋转180度的问题 （ios）

本文主要是介绍小程序图片上传用upng转base64 图片旋转180度的问题 （ios），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

最近业务需要：将图片转为base64格式。 
so~~~；百度n多资料最后写成，还是有一点小bug就是生成的图片不太清晰； 
文章最后还有代码的下载地址

参考资料： 
微信小程序文档-wx.canvasGetImageData 
UPNG.js下载地址 
代码奉上： 
wxml

<!-- wxml -->
<button bindtap='fetch'>上传</button>
<canvas canvas-id='myCanvas' style="width: 400px; height: 500px;"></canvas>
<image src='{{b64}}'></image>

• 1
• 2
• 3
• 4

js 
这里需要引入一些转base64的js

const upng = require('../../utils/UPNG.js')
//可以在上面的参考资料里进行下载

• 1
• 2

fetch() {const ctx = wx.createCanvasContext('myCanvas')const platform = wx.getSystemInfoSync().platformconst imgWidth = 400, imgHeight=500;wx.chooseImage({success: res => {//生成的图片临时路径画成canvasctx.drawImage(res.tempFilePaths[0], 0, 0, imgWidth, imgHeight)ctx.draw(false, () => {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)// console.log('data:image/jpeg;base64,' + base64)this.setData({b64: 'data:image/jpeg;base64,' + base64});},fail(res) {console.log(res)},})})}})},//ios图片处理 reverseImgData(res) {var w = res.widthvar h = res.heightlet con = 0for (var i = 0; i < h / 2; i++) {for (var j = 0; j < w * 4; j++) {con = res.data[i * w * 4 + j]res.data[i * w * 4 + j] = res.data[(h - i - 1) * w * 4 + j]res.data[(h - i - 1) * w * 4 + j] = con}}return res},

下载地址：https://download.csdn.net/download/weixin_38023551/10513997 
参考资料：https://github.com/zh8637688/wx-cardscanner

这篇关于小程序图片上传用upng转base64 图片旋转180度的问题 （ios）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---