项目中有上传图片的功能,通过canvas来进行图片压缩,在微信开发者工具中测试好用吗,但在Android真机中,没有进行压缩,而是直接上传了。百思不得其解。?求高人指路
// 上传图片
pullCamera() {
let that = this
wx.chooseImage({
count: 1,
sizeType: ['compressed'], //可选择原图或压缩后的图片
sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
success: function(res) {
let images = that.images.concat(res.tempFilePaths) //预览图片用的
let image = res.tempFilePaths[0]
that.images = images
that.drawCanvas(image)
}
})
},
// 检测是什么操作系统
checkSystem() {
uni.getSystemInfo({
success: function(res) {
console.log(res)
}
})
},
// 建立一个方法用于向canvas上绘制图像
drawCanvas(image) {
let that = this
// 这里需要用到getImageInfo来获取图片的宽度与高度
console.log("马上进入画图状态")
uni.getImageInfo({
src: image,
success: function(res) {
// 需要做一个判读,来判定图像的宽高的值超出一定范围后会剪裁图像,判断图像是横着还是竖着
// 在测试阶段先让他统一的除以3
console.log(res.width)
console.log(res.height)
let tWidth, tHeight, scan, canvasTempSize
tWidth = res.width
tHeight = res.height
if (tWidth > 1200) {
scan = tWidth / 1200
console.log(scan)
tWidth = 1200
tHeight = tHeight / scan
}
console.log(tWidth)
console.log(tHeight)
canvasTempSize = 'width:' tWidth 'px; height:' tHeight 'px;'
that.canvasSize = canvasTempSize
const cxt = uni.createCanvasContext('image-temp')
cxt.drawImage(image, 0, 0,tWidth,tHeight)
cxt.draw(false, function(){
setTimeout(function(){
that.createImage()
},100)
})
// 此时需要生成图像
}
})
},
// canvas生成图像的方法
createImage() {
let that = this
console.log("createImage")
uni.canvasToTempFilePath({
canvasId: "image-temp",
fileType: 'jpg',
success: function(res) {
console.log(res.tempFilePath)
that.tempimage = res.tempFilePath
that.handleUpload(res.tempFilePath)
}
})
},
//需要定义上传的方法将其从选择图片中分离出来
handleUpload(image) {
let that = this
uni.showLoading({
title: '上传中'
});
uni.uploadFile({
url: 'http://api.tongliaoxxg.com/v1/image',
filePath: image,
name: 'image',
formData: {
time: base.timestamp(),
},
success: res => {
console.log(res.data)
let imageUrl = JSON.parse(res.data).img_path
that.uploadedImage.push(imageUrl)
},
complete: function() {
uni.hideLoading();
}
})
},
0 个回复