subject_gxj/xj_project_app/pages/weekly/media/index.vue

<template>
	<view class="container">
		<page-title>图片预览</page-title>

		<view class="main-canvas">
			<canvas :style="{width:canvasWidth,height:canvasHeight}" canvas-id="myCanvas"></canvas>

			<image :src='waterMark'></image>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"

	let canvasWidth = ref(0);
	let canvasHeight = ref(0);

	let waterMark = ref('')

	function createCanvas(options) {
		let width = 0;
		let height = 0;
		uni.getSystemInfo({
			success: res => {
				width = res.windowWidth * 0.92
			}
		})

		uni.getImageInfo({
			src: options.url,
			success: res => {
				height = res.height / res.width * width;
				canvasWidth.value = width + 'px';
				canvasHeight.value = height + 'px';
				const ctx = uni.createCanvasContext('myCanvas');

				ctx.draw(false, () => {
					setTimeout(() => {
						ctx.drawImage(res.path, 0, 0, width, height);
						ctx.clearRect(0, 0, width, height);
						ctx.textAlign = 'left';
						ctx.textBaseline = 'top';
						ctx.font = '12px Microsoft Yahei'
						ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
						ctx.fillText(options.time, width - 140, height - 20, res.width)
						uni.canvasToTempFilePath({
							canvasId: "myCanvas",
							success: res => {
								// let p = plus.io.convertLocalFileSystemURL(res.tempFilePath);
								// console.log(p);
								waterMark.value = 'file:///' + p
							}
						})
					}, 500)
				});

			}
		})

	}

	onLoad(options => {
		createCanvas(options)
	})

	onUnload(() => {})
</script>

<style lang="scss" scoped>
	.main-canvas {
		position: absolute;
		top: 14%;
		left: 4%;
		width: 92%;
		height: 86%;
	}
</style>