上传图片时添加水印的组件

最新推荐文章于 2025-09-17 15:13:28 发布

原创

最新推荐文章于 2025-09-17 15:13:28 发布 · 352 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #app #uni-app

这是一个关于Vue组件的博客，详细介绍了如何创建一个用于图片上传并添加时间及自定义文字水印的功能。组件使用了uni-app的uView UI库，支持从相机或相册选择图片，上传前添加水印，并能处理图片的压缩和上传。同时，它还具有文件数量限制、上传进度显示、图片删除和上传成功回调等功能。在实际项目中，该组件能够满足基本的图片处理需求。

水印内容为：时间基地库

仅支持app，加水印在其他平台加不上，只能显示原图片

// dUpload
<template>
	<view>
		<view>
			<u-form ref="uForm">
				<!-- // 是否允许删除
				// 是否展示进度 
				//图片来源 
				// 上传前钩子 
				// 上传携带的头信息，对象形式 
				// 上传额外携带的参数 -->
				<u-form-item label="照片信息:" prop="photo" label-width="160">
					<u-upload 
						width="160" 
						:source-type="sourceType"
						:before-upload="beforeUpload" 
						:action="action" 
						:header='upHeader' 
						:form-data="formData"
						:max-count="count" 
						:show-progress="true"
						:size-type="sizeType" 
						@on-remove="deleteItem" 
						@on-success='onSuccess'
						:file-list="details.fileLists">
					</u-upload>
				</u-form-item>
			</u-form>
			<view style="position: absolute;top: -999999px;">
				<view>
					<canvas style="width: 1000px;height: 1000px;" canvas-id="firstCanvas"></canvas>
				</view>
			</view>
		</vie