小程序之上传图片压缩
在小程序中上传文件置媒体库中，可能考虑调用的流畅性，需要对视频镜像 压缩处理。
下面是我代码
index.html 页面只是一个简单的按钮选择
<view bindtap='aa'>选择图片</view>
<canvas canvas-id="photo_canvas" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;position: absolute;left:-300px;top:-300px;"></canvas>
<!-- <view>
未压缩图片
<image style="width:{{canvasWidth2}}px;height:{{canvasHeight2}}px;" src='{{aaa}}'></image>
</view>
<view>
压缩图片
<image style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;" src='{{bbb}}'></image>
</view> -->
<view bindtap='bb'>选择视频</view>
index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
aa(){
var _this=this;
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
success: function (photo) {
wx.getImageInfo({
src: photo.tempFilePaths[0],
success: function (res) {
var ctx = wx.createCanvasContext('photo_canvas');
var ratio = 10;
var canvasWidth = res.width
var canvasHeight = res.height;
_this.setData({
aaa: photo.tempFilePaths[0],
canvasWidth2: res.width,
canvasHeight2: res.height
})
// 保证宽高均在200以内
while (canvasWidth > 200 || canvasHeight > 200) {
//比例取整
canvasWidth = Math.trunc(res.width / ratio)
canvasHeight = Math.trunc(res.height / ratio)
ratio++;
}
_this.setData({
canvasWidth: canvasWidth,
canvasHeight: canvasHeight
})//设置canvas尺寸
ctx.drawImage(photo.tempFilePaths[0], 0, 0, canvasWidth, canvasHeight) //将图片填充在canvas上
ctx.draw()
//下载canvas图片
setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'photo_canvas',
success: function (res) {
console.log(res.tempFilePath)
_this.setData({
bbb: res.tempFilePath
})
},
fail: function (error) {
console.log(error)
}
})
}, 100)
},
fail: function (error) {
console.log(error)
}
})
},
error: function (res) {
console.log(res);
}
})
},
bb(){
wx.chooseVideo({
compressed:true,
success(e){
console.log(e)
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
