因为微信原生压缩感觉左右不大，所以采用canvas画布压缩
页面
然后wx.chooseImage---> 显示调用选择照片的接口
wx.getImageInfo--->然后获取照片原来的宽高，进行一个压缩，这里可能跟平时的h5 canvas用法不太一样
wx.canvasToTempFilePath--->最后就是调用wx.canvasToTempFilePath，将画布的图片转成微信盒子返回的临时路径
最后就是上传图片
上传一个图片试试
上传成功5M变成156Kb，而且照片相对比例，质量都挺好
然后我就多试了几次，突然出现黑色莫名图片，我心里就是纳尼？
后面统一发现都是安卓的照片
网上咨询了，发现都是安卓导致的，说啥的都有，说什么不适配，安卓背景色是黑色，ios是透明，然后我去试了填充背景色什么的，
我突然想到一个问题，canvas绘制需要时间，而我看了一下我上传的安卓图片大小是14M，我就想是不是延时时间给的不够
我就把时间给成2秒
然后就渲染出来了
压缩比例也合适
这个setTimeout建议改成回调
1、setData有成功回调
2、导出canvasToTempFilePath可以选 jpg，会更小一点
3、安卓机器上，canvas过大可能导致程序崩溃，建议限制画布最大尺寸
LZNP
Page({
/**
* 页面的初始数据
*/
data: {
cWidth: "",
cHeight: "",
src: ""
},
choose() {
let that = this;
wx.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 指定只能为压缩图，首先进行一次默认压缩
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
async success(photo) {
let a = await that.compressImg(photo.tempFilePaths[0])
console.log(a)
that.setData({
src: a
})
wx.uploadFile({
url: 'http://localhost:8000/directory/upload/photo', //仅为示例，非真实的接口地址
filePath: a,
name: 'file',
success(res) {
const data = res.data
console.log(data)
}
})
},
})
},
// 压缩功能 参数说明：图片的路径、
async compressImg(photoSrc, ratio = 2, limitNum = 400) {
let that = this;
return new Promise((resolve, reject) => {
wx.getImageInfo({
src: photoSrc,
success(res) {
var canvasWidth = res.width //图片原始长宽
var canvasHeight = res.height
console.log('图片的基本信息', res)
while (canvasWidth > limitNum || canvasHeight > limitNum) {// 保证宽高在400以内
canvasWidth = Math.trunc(res.width / ratio)
canvasHeight = Math.trunc(res.height / ratio)
ratio++;
}
that.setData({
cWidth: canvasWidth,
cHeight: canvasHeight
})
//----------绘制图形并取出图片路径--------------
var ctx = wx.createCanvasContext('canvas')
ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight)
ctx.draw(false, setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'canvas',
destWidth: canvasWidth,
destHeight: canvasHeight,
success: function (res) {
// console.log(res.tempFilePath)//最终图片路径
resolve(res.tempFilePath)
},
fail: function (res) {
console.log(res.errMsg)
}
})
}, 2000))
},
fail: function (res) {
console.log(res.errMsg)
},
})
})
}
})