uniapp 微信小程序生成水印图片

效果

源码

<template>
	<view style="overflow: hidden;">
		<camera device-position="back" flash="auto" class="camera">
			<cover-view class="text-white padding water-mark">
				<cover-view class="">{{ address }}</cover-view>
				<cover-view class="margin-top-sm">{{ date }} {{ time }}</cover-view>
			</cover-view>
			<cover-view class="camera-btn" @click="takePhoto"></cover-view>
			<cover-view class="flex justify-between align-center photos-bar" v-if="imgList.length > 0">
				<cover-view class="photos-swiper">
					<cover-view @click="ViewImage(index)" class="margin-right-xs imgBox" v-for="(item,index) in imgList"
						:key="index">
						<cover-image class="imgItem" :src="item.src" mode="aspectFill"></cover-image>
						<cover-view class="del-icon" @tap.stop="DelImg">❌</cover-view>
					</cover-view>
				</cover-view>
				<cover-view @click="reportBtn" class="report-btn">上报（{{ imgList.length }}）</cover-view>
			</cover-view>
		</camera>
		<canvas :style="{ width: w + 'px', height: h + 'px' }" canvas-id="canvas-photo"></canvas>
	</view>
</template>

<script>
	/**
	 * author        全易
	 * time          2024-08-15 10:10:00
	 * description   水印相机
	 */
	export default {
		data() {
			return {
				w: '',
				h: '',
				photoMax: 4,
				date: "⏱️2024-08-15",
				time: "10:10:00",
				address: '
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/999965