小程序之上传图片压缩

在小程序中上传文件置媒体库中，可能考虑调用的流畅性，需要对视频镜像 压缩处理。

下面是我代码

index.html 页面只是一个简单的按钮选择

<view bindtap=\'aa\'>选择图片</view>

<canvas canvas- ></canvas>

<!-- <view>

未压缩图片

<image src=\'{{aaa}}\'></image>

</view>

<view>

压缩图片

<image 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 () {

}

})