序:小程序需要将图片上传到蓝牙设备,那么图片要转为二进制数据,转为二进制的图片数据不能过大,就要裁剪图片,因为要尽量减少图片的二进制数据,要将图片的rgb888转为rgb565,也就是24位缩小为16位数据;例如:100像素*100像素的图片,就有1万个点,一个点包含rgba四个数,只需要rgb这三个数,rgb三个数各包含8位(也就是二进制,为rgb888),rgb888为三个字节,rgb565为两个字节,数据量传输就少了三分一,但也有几十K的数据了,分240个字节每包发送完也要十秒左右;
如果要上传,上传到后端的路径要是临时路径才可以,不能是本地路径,所以要使用 canvas 转一下得到 tempFilePath 的临时路径,
一、图片渲染为 canvas 得到临时路径,并上传
// 选择本地图片渲染成 canvas
locationImg(e) {
let imgUrl = e.currentTarget.dataset.img;
let that = this;
gbImgComStr = "";
wx.createSelectorQuery().select('#canvasImg').fields({
node: true,
size: true
}).exec((res) => {
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
var dpr = wx.getSystemInfoSync().pixelRatio // 设备像素比
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
const img = canvas.createImage();
img.onload = () => {
ctx.drawImage(img, 0, 0, 200, 200);
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 200,
height: 200,
destWidth: 200,
destHeight: 200,
canvas: canvas,
fileType: "jpg",
quality: .8,
success(res) {
that.initImgData(res.tempFilePath); // 使用服务器
}
})
}
img.src = imgUrl;
})
// console.log(imgUrl)
},
// 图片上传到服务器
initImgData(imgUrl) {
let that = this;
let gbImgPath = "";
wx.uploadFile({
url: apiUrl+'/imgUp