重点是一定要压缩图片!!!!!
<canvas style="position: absolute;left: -5000px;" :style="{'width':w,'height': h}" canvas-id="firstCanvas"
ref="mycanvas"></canvas>
photograph() {
let _this = this
uni.chooseImage({
count: 1,
sourceType: ['camera'],
sizeType: ['compressed'],
success(res) {
let images = res.tempFilePaths;
uni.compressImage({
src: images[0],
quality: 30,
width: '40%',
height: '40%',
success(res2) {
uni.getImageInfo({
src: res2.tempFilePath,
success: (r) => {
_this.canvasWather(r, _this.getNowTime_1())
},
fail: () => {
console.log('失败了吗');
}
})
}
})
}
})
},
添加水印 _this.getNowTime_1() 这个是我自定义的时间函数,看个人需求
canvasWather(res, time) {
const user = uni.getStorageSync('userInfo')
let that = this;
let ctx = uni.createCanvasContext('firstCanvas', that);
that.w = res.width / 2 + 'px';
that.h = res.height / 2 + 'px';
uni.showLoading({
title: '正在上传',
})
setTimeout(() => {
ctx.fillRect(0, 0, res.width / 2, res.height / 2);
ctx.drawImage(res.path, 0, 0, res.width / 2, res.height / 2);
ctx.beginPath()
ctx.setFontSize(10)
ctx.setFillStyle('green');
let firstY = res.height / 2 - 60;
ctx.fillText(`${time}`, 10, firstY + 20)
ctx.draw(false, () => {
uni.canvasToTempFilePath({
canvasId: 'firstCanvas',
success: (res) => {
that.saveFile(res);
uni.hideLoading();
},
fail: (err) => {
console.log("什么问题");
}
})
})
}, 500)
},
保存
saveFile(res) {
let _this = this
uni.saveFile({
tempFilePath: res.tempFilePath,
success(r) {
_this.tempFilePath = r.savedFilePath
_this.photoList.push(
r.savedFilePath
)
}
})
},