这篇文章主要为大家详细介绍了微信小程序实现图片压缩功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,下面直接上代码
先是wxml:
<view bindtap='takePictures'>选择图片</view>
<canvas canvas-id="attendCanvasId" style="width:300px;height:300px;position: absolute;left:-300px;top:-300px"></canvas>
<image src="{{attendSuccessImg}}"></image>
下面是js
Page({
/** * 页面的初始数据 */
data: {
attendSuccessImg: "",
canvasImgUrl:'',
src:""
},
/** * 生命周期函数--监听页面加载 */
onLoad: function(options) {},
// 点击照相
takePictures: function () {
var that = this;
wx.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
// 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
that.setData({
attendSuccessImg: tempFilePaths[0]
});
// 上传图片
//判断机型
var model = "";
wx.getSystemInfo({
success: function (res) {
var that = this;
model = res.model;
}
})
if (model.indexOf("iPhone") <= 0) {
// that.uploadFileOpt(that.data.attendSuccessImg);
console.log(111111)
} else {
drawCanvas();
}
// 缩放图片
function drawCanvas() {
const ctx = wx.createCanvasContext('attendCanvasId');
ctx.drawImage(tempFilePaths[0], 0, 0, 94, 96);
ctx.draw();
that.prodImageOpt();
}
}
});
},
// 生成图片
prodImageOpt: function () {
var that = this;
wx.canvasToTempFilePath({
canvasId: 'attendCanvasId',
success: function success(res) {
that.setData({
canvasImgUrl: res.tempFilePath
});
// 上传图片
that.uploadFileOpt(that.data.canvasImgUrl);
},
complete: function complete(e) {
}
});
},
})