微信小程序 压缩图片并上传
转自https://segmentfault.com/q/1010000012507519
wxml写入
<view bindtap='uploadImg'>上传</view> <image bindtap='uploadImg' data-number="0" src="{{ uploadPic[0] }}" alt="" mode="widthFix"></image> <canvas style="width: {{cw}}px; height: {{ch}}px;" canvas-id="firstCanvas"></canvas>
JS参考
uploadImg(e) { let that = this; console.log(e); let index = e.currentTarget.dataset.number; let uploadFile = ''; //最后处理完,图片上传的图片地址 wx.chooseImage({ success(res) { console.log(res) const tempFilePaths = res.tempFilePaths; //获得原始图片大小 wx.getImageInfo({ src: res.tempFilePaths[0], success(res) { // console.log('获得原始图片大小',res.width) //console.log(res.height) var originWidth, originHeight; originHeight = res.height; originWidth = res.width; console.log(originWidth); //压缩比例 // 最大尺寸限制 var maxWidth = 1200, maxHeight = 600; // 目标尺寸 var targetWidth = originWidth, targetHeight = originHeight; //等比例压缩,如果宽度大于高度,则宽度优先,否则高度优先 if (originWidth > maxWidth || originHeight > maxHeight) { if (originWidth / originHeight > maxWidth / maxHeight) { // 要求宽度*(原生图片比例)=新图片尺寸 targetWidth = maxWidth; targetHeight = Math.round(maxWidth * (originHeight / originWidth)); } else { targetHeight = maxHeight; targetWidth = Math.round(maxHeight * (originWidth / originHeight)); } } //尝试压缩文件,创建 canvas var ctx = wx.createCanvasContext('firstCanvas');//当在组件里使用时,要使用var ctx = wx.createCanvasContext('firstCanvas',that); that是this的变量 ctx.clearRect(0, 0, targetWidth, targetHeight); ctx.drawImage(tempFilePaths[0], 0, 0, targetWidth, targetHeight); ctx.draw(); //更新canvas大小 that.setData({ cw: targetWidth, ch: targetHeight }); //保存图片 setTimeout(function() { wx.canvasToTempFilePath({ canvasId: 'firstCanvas', success: (res) => { //写入图片数组 var uploadpic = "uploadPic[" + index + "]"; // that.setData({ [uploadpic]: res.tempFilePath }); uploadFile = res.tempFilePath; //保存到相册 // wx.saveImageToPhotosAlbum({ // filePath: res.tempFilePath, // success: (res) => { // console.log(res) // }, // fail: (err) => { // console.error(err) // } // }) wx.uploadFile({ url: 'https://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址 filePath: uploadFile, name: 'file', formData: { 'user': 'test' }, success(res) { const data = res.data //do something } }) }, fail: (err) => { console.error(err) } }, this)//注意这里this是否指向正确,that? }, 500); } }) } }) }
后面还有一个写法 20210703
// 上传图片
async chooseImg() {
var _that = this;
const imgs = this.data.imgs;
const max_imgs_length = 1;
var oldCount = imgs.length;
const tempFilePaths = await this.$chooseImage(max_imgs_length, ['original']);
for (var i = 0; i < tempFilePaths.length; i++) {
// imgs.push(tempFilePaths[i]);
var tfp = tempFilePaths[i];
//获得原始图片大小
wx.getImageInfo({
src: tfp,
success(res) {
var originWidth, originHeight;
originHeight = res.height;
originWidth = res.width;
console.log(originWidth);
//压缩比例
// 最大尺寸限制
var maxWidth = 1200,
maxHeight = 1000;
// 目标尺寸
var targetWidth = originWidth,
targetHeight = originHeight;
//等比例压缩,如果宽度大于高度,则宽度优先,否则高度优先
if (originWidth > maxWidth || originHeight > maxHeight) {
if (originWidth / originHeight > maxWidth / maxHeight) {
// 要求宽度*(原生图片比例)=新图片尺寸
targetWidth = maxWidth;
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
} else {
targetHeight = maxHeight;
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
}
}
_that.setData({
cw: targetWidth,
ch: targetHeight
});
//尝试压缩文件,创建 canvas
var ctx = wx.createCanvasContext('ssd');
ctx.clearRect(0, 0, targetWidth, targetHeight);
ctx.drawImage(tfp, 0, 0, targetWidth, targetHeight);
ctx.draw(false, setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'ssd',
fileType:'jpg',
destWidth:targetWidth,
destHeight:targetHeight,
quality:1.0,
success: (r) => {
imgs.push(r.tempFilePath);
_that.setData({
imgs: imgs
});
_that.loadPhoto(oldCount);
},
fail: (err) => {
console.error(err)
}
}, this)
}, 500));
//保存图片
}
})
}
}
wx.createCanvasContext()停止维护,可用下面方法代替
let canvasBox = null; // 写法一 canvasBox = wx.createCanvasContext("ssd"); // 写法二 wx.createSelectorQuery() .select("#ssd") .context(function (res) { console.log("节点实例:", res); // 节点对应的 Canvas 实例。 canvasBox = res.context; })
前端隱藏canvas
<view style="position:fixed;top:999999999999999999999rpx;">
<canvas id="ssd" canvas-id="ssd" style="width:{{cw}}px;height:{{ch}}px;"></canvas>
</view>