微信小程序--上传图片加水印

微信小程序–上传图片加水印

wxml

<canvas class='canvas' canvas-id="firstCanvas"></canvas>

css

.canvas{
    border: 2rpx solid pink;
    background: pink;
    width: 100%;
    height: 100%;
}

js

	//选择图片待上传
	ChooseImage() {
		var _this = this
		wx.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: (res) => {
				// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
				var tempFilePaths = res.tempFilePaths;
				this.setData({
					uploadimgcount: tempFilePaths.length,
					alreadyUploadSuccessCount: 0
				});
				for (let item of tempFilePaths) {
					console.log(item)
					let file = {
						reportFileName: "",
						localUrl: item,
						reportFile: ""
					}
					this.uploadimg(item);
				}

				if (this.data.imgList.length != 0) {
					this.setData({
						imgList: this.data.imgList.concat(res.tempFilePaths)
					})
				} else {
					this.setData({
						imgList: res.tempFilePaths
					})
				}
				_this.watermark();
			}
		});
	},
	//加水印
	watermark() {
		let _this = this
		//获取图片详细信息
		for (let item of this.data.imgList) {
			wx.getImageInfo({
				src: item,
				success: (ress) => {
					console.log("获取图片详情", item)
					console.log("获取详情成功", ress)
					let date = util.formatTime(new Date());
					let ctx = wx.createCanvasContext('firstCanvas')
					_this.setData({
						canvasHeight: ress.height,
						canvasWidth: ress.width
					})
					//将图片src放到cancas内，宽高为图片大小
					ctx.drawImage(item, 0, 0, 56, 56)
					//将声明的时间放入canvas
					ctx.setFontSize(30) //注意：设置文字大小必须放在填充文字之前，否则不生效
					ctx.setFillStyle('grey')
					ctx.fillText("运联快车", 0, 30)
					ctx.strokeText("运联快车", 0, 30)
					ctx.draw(false, function () {
						wx.canvasToTempFilePath({
							canvasId: 'firstCanvas',
							success: (res) => {
								console.log(res.tempFilePath);
								_this.uploadimg(res.tempFilePath);
							},
							fail: (e) => {
								console.log(e)
							}
						})
					})
				}
			})
		}
	},
	//上传图片
	uploadimg(localUrl) {
		wx.showLoading({
			title: "正在上传图片",
			mask: true
		})
		util.putFile(localUrl).then(res => {
			if (res.statusCode == 200) {
				wx.hideLoading();
				let count = this.data.alreadyUploadSuccessCount;
				count = count + 1;
				this.setData({
					alreadyUploadSuccessCount: count
				});
				if (count == this.data.uploadimgcount) {
					wx.showToast({
						title: '图片上传成功',
						icon: 'success',
						duration: 1000
					})
				}
				if (JSON.parse(res.data).code == 200) {
					// console.log(111111111,JSON.parse(res.data).data)
					let uploadObj = JSON.parse(res.data).data;
					let arr = []
					arr.push(uploadObj)
					this.setData({
						uploadList: this.data.uploadList.concat(arr)
					})
					wx.hideLoading();
					// console.log("uploadList",this.data.uploadList)
				}
			}
		})
	},