ui-app H5和小程序 使用canvas 上传图片 添加水印

ui-app 上传图片 添加水印
苹果手机像素过大 缩小画布2.5

<template>
	<view>
		<view class="row" style="flex-wrap: wrap;transform: translateX(-8px);margin-top: 36px;">
			<view class="imgClass1" v-for="(item,index) in p_tempFilePaths.list">
				<!-- <image :src="saverUrl + item" mode="" @click="p_previewImage(saverUrl + item)"></image> -->
				<image :src="saverUrl + item" mode="" @click="p_previewImage(saverUrl + item)"></image>
				<image class="imgClass1_delete" src="image/imgDelete.png" mode=""
					@click="deleteImg(index)">
				</image>
			</view>

			<image class="imgClass1" v-if="p_tempFilePaths.list.length < props.count"
				src=image/TianJia2.png" mode="" @click="p_addCertificate"></image>
		</view>

		<!-- <canvas style="position: fixed;top: 0px;left: 1500px; background:red;" type="2d" canvas-id="watermarkCanvas"
			id="watermarkCanvas" :style="{width:p_canvas_width,height:p_canvas_height}" v-show="true"></canvas> -->
		<canvas canvas-id="watermarkCanvas" style="position: fixed;top: 0px;left: 1500px; background-color: red;"
			:style="{width:p_canvas_width,height:p_canvas_height}"></canvas>
	</view>
</template>


<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted,
	} from 'vue'
	let internalInstance = getCurrentInstance();
	let globalProperties = internalInstance.appContext.config.globalProperties;
	let {
		proxy
	} = internalInstance;
	import {
		useStore
	} from 'vuex'
	const store = useStore();


	// const emit = defineEmits(["selectImg"]);
	const props = defineProps({
		count: {
			type: Number,
			default () {
				return 1;
			}
		},
		list: {
			type: Array,
			default () {
				return [];
			}
		}
	});
	import httpRequest from '@/public/httpRequest.js'
	let saverUrl = ref(httpRequest.url);



	// data()


	const p_tempFilePaths = reactive({
		list: []
	})


	function deleteImg(index) {
		p_tempFilePaths.list.splice(index, 1);
	}



	const p_canvas_width = ref("400px");
	const p_canvas_height = ref("600px");

	// 添加图片click
	function p_addCertificate() {
		// 拍摄、选择图片
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['camera', 'album'],
			success: function(res) {
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
				let file = res.tempFilePaths[0];
				getImgInfo(file)


			}
		});
	}

	function getImgInfo(file) {
		uni.getImageInfo({
			src: file,
			success: (image) => {
				let context = uni.createCanvasContext('watermarkCanvas', this)
				p_canvas_width.value = (image.width / 2.5) + 'px'
				p_canvas_height.value = (image.height / 2.5) + 'px'
				context.fillRect(0, 0, image.width, image.height);
				// 将图片src放到cancas内，宽高为图片大小
				// console.log(file == image.path);
				context.drawImage(file, 0, 0, image.width / 2.5, image.height / 2.5)
				let text = store.state.userInfo.user.name + store.state.userInfo.user.mobile.substr(7, 4);
				context.rotate((50 * Math.PI) / 180);
				context.textBaseline = "middle";
				context.setFontSize(32);
				
				for (let j = 1; j < 20; j++) {
					//用for循环达到重复输出文字的效果，这个for循环代表纵向循环
					context.beginPath();
					context.setFontSize(32);
					// context.setFillStyle("rgba(180, 180, 180, 0.2)");
					context.setFillStyle("red");

					context.fillText(text, 0, 500 * j);
					for (let i = 1; i < 10; i++) {
						//这个for循环代表横向循环，
						context.beginPath();
						context.setFontSize(32);
						context.setFillStyle("red");
						context.fillText(text, 100 * i, 100 * j);
					}
				} //两个for循环的配合，使得文字充满斜对角线的左下部分
				for (let j = 1; j < 20; j++) {
					//用for循环达到重复输出文字的效果，这个for循环代表纵向循环
					context.beginPath();
					context.setFontSize(32);
					context.setFillStyle("red");

					context.fillText(text, 0, -500 * j);
					for (let i = 1; i < 20; i++) {
						//这个for循环代表横向循环，
						context.beginPath();
						context.setFontSize(32);
						context.setFillStyle("red");
						context.fillText(text, 100 * i, -100 * j);
					}
				}
				setTimeout(() => {
					context.draw(false, () => {
						uni.canvasToTempFilePath({
							x: 0,
							y: 0,
							width: image.width,
							height: image.height,
							destWidth: image.width / 2.5,
							destHeight: image.height / 2.5,
							canvasId: 'watermarkCanvas',
							fileType: 'png',
							success: (res) => {
								// p_tempFilePaths.list.push(res.tempFilePath)
								let tempFilePath = res.tempFilePath;
								globalProperties
									.uniUploadFile(
										tempFilePath,
										'/wxImg',
									)
									.then(res3 => {
										// console.log(res3,'img')
										p_tempFilePaths.list.push(res3)
										uni.hideLoading();
									});
							},
							fail: (err) => {
								console.log(err)
							},
							complete: () => {
								// uni.hideLoading();
							}
						}, this);

					})
				}, 300)
			}
		})
	}
	// 预览图片
	function p_previewImage(url) {
		let urls = p_tempFilePaths.list.map(item => {
			return saverUrl.value + item;
		})

		uni.previewImage({
			current: url,
			urls: urls,
			// longPressActions: {
			// 	itemList: ['发送给朋友', '保存图片', '收藏'],
			// 	success: function(data) {
			// 		console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
			// 	},
			// 	fail: function(err) {
			// 		console.log(err.errMsg);
			// 	}
			// }
		});
	}

	// canvas添加图片
	function p_addImage_canvas() {
		return new Promise(function(resolve, reject) {

		})
	}

	// canvas添加文字水印
	function p_addWatermark_canvas() {
		return new Promise(function(resolve, reject) {

		})
	}

	// end methods

	onMounted(function() {
		p_tempFilePaths.list = props.list;
	})
</script>


<style lang="scss" scoped>
	image {
		width: 100%;
		height: 100%;
		background-size: contain;
	}

	.imgClass1 {
		width: 200rpx;
		height: 200rpx;
		margin-left: 8px;
		margin-top: 8px;
		position: relative;
		overflow: inherit;

		.imgClass1_delete {
			position: absolute;
			top: 0px;
			right: 0px;
			width: 15px;
			height: 15px;
			transform: translate(50%, -50%);
		}
	}
</style>