wxml文件
<!-- 拍照上传图片带水印 --> <camera device-position="front" flash="off" @error="error" style="width: 100%; height: 300px;"></camera> <button type="primary" @tap="takePhoto">拍照</button> <view>预览</view> <image mode="widthFix" :src="src"></image> <canvas class='canvas' :style="canvasStyle" canvas-id="firstCanvas"></canvas>js文件数据区：
data() {
return {
socketOpen: false,
src:'',
canvasStyle:{}
}
}
js文件方法区：
takePhoto() {
const ctx = uni.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.src=res.tempImagePath;
let that = this;
uni.getImageInfo({
src: res.tempImagePath,
success: (ress) => {
let date = "水印内容"; /** 作为水印 */
let ctx = uni.createCanvasContext('firstCanvas'); /** 创建画布 */
let textToWidth = ress.width / 3 * 0.5; /**这里设置的是水印位置*/
let textToHeight = ress.height / 3 * 0.9;
that.canvasStyle=`{width:${ress}.width/3px;height:${ress}.height/3px}`;
//将图片src放到cancas内，宽高为图片大小
ctx.drawImage(res.tempImagePath, 0, 0, ress.width / 3, ress.height / 3)
//将声明的时间放入canvas
ctx.setFontSize(14) //注意：设置文字大小必须放在填充文字之前，否则不生效
ctx.setFillStyle('blue')
ctx.fillText(date, textToWidth, textToHeight) //水印内容，位置
// ctx.strokeText(date, ress.width, ress.height)
uni.showLoading({
title: '制作水印中...',
})
ctx.draw(false, () => {//开始制作
setTimeout(() => {//使用定时是因为制作水印需要时间，设置定时才不会出bug
uni.canvasToTempFilePath({//将画布中内容转成图片，即水印与图片合成
canvasId: 'firstCanvas',
success: (res) => {
uni.hideLoading()
uni.saveImageToPhotosAlbum({//保存到手机
filePath: res.tempFilePath,
success(res) {
console.log('1')
}
})
}
})
}, 500)
})
}
})
}
})
}
上面的代码没有上传功能，而且图片的裁剪比较麻烦，下面是进行了修改后使用到了项目中的代码：
<view class="add-img">
<view class="label">添加图片</view>
<view class="imgs flex flex-middle">
<image :src="item" v-for="(item,index) in fileList" :key="index"></image>
<image src="../../static/img/uploadimg.png" @click="chooseImg"></image>
</view>
</view>
<!--因为要用到canvas，而项目中不能显示canvas，所以对它进行了隐藏-->
<view style="width: 0; height: 0; overflow: hidden; visibility: hidden;">
<canvas class='canvas' :style="{'width': canvasWdith+'px', 'height': canvasHeight+'px'}" canvas-id="firstCanvas"></canvas>
</view>
<script>
export default {
components: {
},
data() {
return {
fileList:[],
canvasWdith:0,
canvasHeight:0
};
},
onLoad(options) {
},
methods: {
chooseImg(){
var that = this;
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album','camera'],
success: function (res) {
uni.getImageInfo({
src: res.tempFilePaths[0],
success: (ress) => {
let ctx = uni.createCanvasContext('firstCanvas');
let date = "水印内容水印内容水印内容水印内";
let textWidth = ctx.measureText(date).width;
let imgWidth = ress.width/4;
let imgHeight = ress.height/4;
that.canvasWdith=imgWidth;
that.canvasHeight=imgHeight;
that.$nextTick(() => {
//将图片src放到cancas内，宽高为图片大小
ctx.drawImage(res.tempFilePaths[0], 0, 0, imgWidth, imgHeight);
//将声明的时间放入canvas
ctx.setFontSize(14) //注意：设置文字大小必须放在填充文字之前，否则不生效
ctx.setFillStyle('white')
ctx.fillText(date, 0, imgHeight-20) //水印内容，位置
// ctx.strokeText(date, ress.width, ress.height)
uni.showLoading({
title: '制作水印中...',
})
ctx.draw(false, () => {//开始制作
setTimeout(() => {//使用定时是因为制作水印需要时间，设置定时才不会出bug
uni.canvasToTempFilePath({//将画布中内容转成图片，即水印与图片合成
canvasId: 'firstCanvas',
success: (res) => {
uni.hideLoading();
uni.showToast({
duration: 1000,
title: '上传中...',
icon: 'loading'
})
uni.uploadFile({
url: 'http://www.5imoban.net/upload',
filePath: res.tempFilePath,
name: 'file',
success: (res) => {
that.fileList.push(r.data);
uni.hideToast()
},
fail: function(xhr, type) {
console.log(JSON.stringify(xhr));
func.msg('上传失败！');
uni.hideToast()
}
})
}
})
}, 500)
})
})
}
})
}
});
},
},
}
</script>