suitWatermark 图片添加水印

背景

小程序上传图片需要添加水印,已内置到suit-photo

使用

<template>
	<view>
		<!-- 增加水印 -->
		<suit-watermark ref="watermark" @waterMark="waterMarkChange"></suit-watermark>
	</view>
</template>
<script>
export default {
	data() {
		return {
		};
	},
	created() {
	},
	mouted(){
		let fillTexts = [`人员：${this.userInfo.name || ''}`, `项目：${this.title}`];
		fillTexts.push('时间：' + parseTime(new Date()));
		// 添加水印
		this.$refs.watermark.addWaterMark({
			filePaths,
			fillTexts
		});
	},
	methods: {
		waterMarkChange(filePath){
			console.log(filePath)
		}
	}
};
</script>
<style scoped></style>

参数说明

属性

属性	描述	类型	可选值	默认值
textAlign	设置文本的水平对齐方式，默认：left，文本在指定的位置开始，	String	end 文本在指定的位置结束。center 文本的中心被放置在指定的位置。left 文本左对齐。right 文本右对齐。	——
fontSize	文字大小	Number	——	40
fontColor	文字颜色	String	——	rgba(255,255,255,1)
shadowColor	阴影颜色	String	——	rgba(0, 0, 0, 1.0)
shadowWidth	阴影边框大小	[Number, String]	——	4
quality	图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理	[Number, String]	——	1
fileType	目标文件的类型，只支持 'jpg' 或 'png'。默认为 'jpg'	jpg/png	——	jpg

ref 属性

属性	描述	类型	可选值	默认值
addWaterMark	添加水印，需要以对象的方式传入图片路径数组和水印内容数组	fn	{filePaths,fillTexts}	—

事件

事件名称	说明	回调参数
waterMarkChange	添加水印后发出	filePath

组件源码及综合示例参考

组件源码 (opens new window)