前端加油站🧠

Appearance

fullMarker 全局平铺水印 ​

介绍 ​

生成一张带有全局平铺水印的海报

image-20220918202205711

使用 ​

框架中使用 ​

vue
<template>
	<img alt="fullMarker" :src="fullMarkerSource" />
</template>

<script setup>
import { ref } from 'vue'
import { fullMarker } from 'esay-watermark'

const fullMarkerSource = ref('')

fullMarker({
	src: 'http://jimmyxx.oss-cn-beijing.aliyuncs.com/lot.png',
	text: 'easy-watermark https://github.com/Jimmylxue/easy-watermark',
	color: '#c0c0c0',
	size: 30,
	padding: 180,
	rotate: -15,
	type: 'stroke',
}).then(source => {
	fullMarkerSource.value = source
})
</script>
<template>
	<img alt="fullMarker" :src="fullMarkerSource" />
</template>

<script setup>
import { ref } from 'vue'
import { fullMarker } from 'esay-watermark'

const fullMarkerSource = ref('')

fullMarker({
	src: 'http://jimmyxx.oss-cn-beijing.aliyuncs.com/lot.png',
	text: 'easy-watermark https://github.com/Jimmylxue/easy-watermark',
	color: '#c0c0c0',
	size: 30,
	padding: 180,
	rotate: -15,
	type: 'stroke',
}).then(source => {
	fullMarkerSource.value = source
})
</script>

原生页面中使用 ​

html
<body>
	<script src="./watermark.min.js"></script>

	<img id="fullMarkerImage" alt="全局平铺水印" />

	<script>
		const { fullMarker } = waterMarker // watermark 默认导出对象
		const fullMarkerImage = document.getElementById('fullMarkerImage')

		fullMarker({
			src: 'http://jimmyxx.oss-cn-beijing.aliyuncs.com/lot.png',
			text: 'easy-watermark https://github.com/Jimmylxue/easy-watermark',
			color: '#c0c0c0',
			size: 30,
			padding: 180,
			rotate: -15,
			type: 'stroke',
		}).then(source => {
			fullMarkerImage.src = source
		})
	</script>
</body>
<body>
	<script src="./watermark.min.js"></script>

	<img id="fullMarkerImage" alt="全局平铺水印" />

	<script>
		const { fullMarker } = waterMarker // watermark 默认导出对象
		const fullMarkerImage = document.getElementById('fullMarkerImage')

		fullMarker({
			src: 'http://jimmyxx.oss-cn-beijing.aliyuncs.com/lot.png',
			text: 'easy-watermark https://github.com/Jimmylxue/easy-watermark',
			color: '#c0c0c0',
			size: 30,
			padding: 180,
			rotate: -15,
			type: 'stroke',
		}).then(source => {
			fullMarkerImage.src = source
		})
	</script>
</body>

API ​

属性名类型是否必填描述
srcstringyes图片地址（必填）
textstringyes水印文字
colorstringno水印颜色（默认 #c0c0c0）
sizenumberno水印文字大小（默认 20）
paddingnumberno平铺水印之间的间距（默认 30）
output'jpeg' | 'png'no输出图片类型 支持 jpeg和png （默认 jpeg）
type'fill'|'stroke'no文字的“填充模式”和“描边模式”（默认fill模式）（微信小程序下只支持fill模式）
rotatenumberno旋转角度（默认 0）