微信小程序等比例图片压缩上传,100%可用,非官方压缩方法
原理
- 微信小程序调用图片选择,获得图片地址
- 使用微信小程序获得图片信息宽和高
- 设置图片目标尺寸,根据压缩比例设置
- 创建 canvas 上下文,图片地址写入 canvas,
- 更新 canvas 尺寸,
- wx.canvasToTempFilePath 获得新的图片。最后将它上传到服务器即可
例子
index.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>
如果不想要出现 canvas,可以设置如下
<canvas style="width: {{cw}}px; height: {{ch}}px;position: absolute; z-index: -1; left: -10000rpx;; top: -10000rpx;" canvas-id="firstCanvas"></canvas>
index.js
Page ({
/**
* 页面的初始数据
*/
data: {
cw: 300,
ch: 200,
uploadPic: [],
},
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 大小
that.setData ({
cw: targetWidth,
ch: targetHeight
});
// 尝试压缩文件,创建 canvas
var ctx = wx.createCanvasContext('firstCanvas');
ctx.clearRect (0, 0, targetWidth, targetHeight);
ctx.drawImage (tempFilePaths [0], 0, 0, targetWidth, targetHeight);
ctx.draw (false,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)
});
}
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
版权提示
1.除了标识原创之外,其他可能来源于网友的分享,仅供学习使用2.如您发现侵犯了您的权利,请联系我们删除
3.转载必须带本文链接,否则你将侵权
4.关于会员或其发布的相关内容均由会员自行提供,会员依法应对其提供的任何信息承担全部责任,本站不对此承担任何法律责任
评论区 (0)
没有记录
请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!