前言

一款智能水印相機(jī)，拍照自動(dòng)添加時(shí)間、地點(diǎn)、經(jīng)緯度等水印文字，可用于工作考勤、學(xué)習(xí)打卡、工作取證等，支持自定義內(nèi)容以及給現(xiàn)有照片添加水印。無需安裝，無需注冊(cè)，即開即用。

原理

主要是通過canvas給圖片上添加上時(shí)間水印地點(diǎn)信息。首先通過官方API(chooseLocation)獲取到位置信息，然后利用JS獲取本地時(shí)間，最后繪制到canvas上通過canvasToTempFilePath生成圖片。

獲取位置信息

這個(gè)接口在去年開始就需要用戶手動(dòng)申請(qǐng)，在小程序管理頁面申請(qǐng)，如果申請(qǐng)按鈕無法點(diǎn)擊，在提交代碼時(shí)會(huì)彈窗申請(qǐng)彈窗，之后就可以申請(qǐng)了。通過后才可以上線小程序。代碼如下：

/**
 * 獲取地址信息
*/
	getLocation: function () {
		wx.getLocation({
			success: res => {
				qqmapsdk.reverseGeocoder({
					location: {
						latitude: res.latitude,
						longitude: res.longitude
					},
					success: res => {
						let address = res.result.address;
						this.setData({
							address
						})
					}
				})
			}
		})
	},

	/**
	 * 手動(dòng)選擇地點(diǎn)
	 */
	chooseLocation: function () {
		wx.chooseLocation({
			success: res => {
				console.log(res)
				this.setData({
					address: res.address
				})
			},
			fail: err => {
				console.log(err)
			}
		})
	}

其中qqmapsdk使用的是騰訊位置服務(wù)的sdk，需要去官方下載并申請(qǐng)key，然后再頁面中加上如下代碼：

var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk = new QQMapWX({
	key: '' // 這里填寫你的key
});

獲取時(shí)間信息

時(shí)間信息就很簡單了，這里給大家提供封裝了一下，如下代碼：

export const formatTime = () => {
	const date = new Date();
	const year = date.getFullYear()
	const month = date.getMonth() + 1
	const day = date.getDate()
	const weekDay = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()]
	const hour = date.getHours()
	const minute = date.getMinutes()
	const second = date.getSeconds()
	return {
		date: [year, month, day].map(formatNumber).join('-'),
		time:[hour, minute, second].map(formatNumber).join(':'),
		week: '星期'+weekDay
	}
}

const formatNumber = (n) => {
	const s = n.toString()
	return s[1] ? s : '0' + s
}

繪制圖片

這里說明一下，目前 wx.createCanvasContext接口以及棄用了，所以我們采用Canvas.getContext代替，首先我們需要添加canvas，在wxml頁面中添加如下代碼，一定要設(shè)置好寬高，可以是動(dòng)態(tài)的，但是必須設(shè)定好，不然很容易出現(xiàn)畫面模糊的問題。

<canvas type="2d" id="canvas" style="position: fixed; top: -10000px; left: -10000px; width: {{canvasWidth}}px;height: {{canvasHeight}}px;"></canvas>

然后動(dòng)態(tài)設(shè)置寬高可以根據(jù)相機(jī)或者圖片的寬高自定設(shè)置，然后我們將時(shí)間、位置和圖片等信息一起繪制在canvas上。

/**
	 * 給圖片添加水印
	 */
	addWatermark: function (imageUrl) {
		console.log(imageUrl)
		return new Promise((resolve, reject) => {
			wx.showLoading({
				title: '圖片生成中...',
			})
			const query = wx.createSelectorQuery();
			query.select('#canvas').fields({
				node: true,
				size: true
			}).exec((res) => {
				console.log(res)
				const canvas = res[0].node;
				const ctx = canvas.getContext('2d');

				const dpr = wx.getSystemInfoSync().pixelRatio;
				const {
					canvasWidth,
					canvasHeight
				} = this.data;
				canvas.width = canvasWidth * 1.5
				canvas.height = canvasHeight * 1.5
				ctx.scale(1.5, 1.5)

				// 繪制背景圖片
				const image = canvas.createImage();
				image.onload = () => {
					ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);

					ctx.font = 'normal 28px null';
					ctx.fillStyle = '#ffffff';
					ctx.textBaseline = 'bottom';

					// 繪制地址
					ctx.fillText(this.data.address, 20, canvasHeight - 20);

					// 繪制時(shí)間
					ctx.fillText(this.data.date + ' ' + this.data.time, 20, canvasHeight - 65);

					// 繪制星期
					ctx.fillText(this.data.week, 20, canvasHeight - 115);


					wx.canvasToTempFilePath({
						canvas,
						success: (res) => {
							wx.hideLoading()
							resolve(res.tempFilePath);
						},
						fail: () => {
							wx.hideLoading()
							reject(new Error('轉(zhuǎn)換為圖片失敗'));
						}
					});
				}
				image.src = imageUrl;
			});
		});
	},

這里直接用Promise封裝了一下，方便調(diào)用。其中iamgeUrl為相機(jī)的照片或者用戶自己上傳的圖片地址。

以上就是大致的流程，具體如何操作，可以看我開源的智能水印相機(jī)的代碼：

Github下載地址

Gitee下載地址文章來源地址http://www.zghlxwxcb.cn/news/detail-483636.html

到了這里，關(guān)于微信小程序?qū)崙?zhàn)：智能水印相機(jī)小程序開發(fā)附源碼的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！