canvas将新图像绘制到已有的图像上实现类似水印功能
canvas将新图像绘制到已有的图像上实现类似水印功能
- 图
- 解释
- 代码
图
解释
canvas
标签用于绘制图像(通过脚本,通常是 JavaScript)。
不过,canvas
元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。
getContext()
方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。
具体可看:https://www.runoob.com/tags/ref-canvas.html
代码
<!-- 水印 -->
<el-form-item label="水印开关" prop="watermarkFlag">
<el-switch v-model="siteInfo.watermarkFlag" active-color="#3963bc" active-value="1"
inactive-value="0" @change="switchChange"></el-switch>
</el-form-item>
<template v-if="siteInfo.watermarkFlag === '1'">
<el-form-item label="上传水印" prop="ossRegionId">
<UploadWater type="image" :drag="false" v-model:file-list="fileList"
:waterOpcity="siteInfo.watermarkTransparent" :size="10" />
</el-form-item>
<template v-if="fileList.length > 0">
<el-form-item label="水印位置" prop="watermarkPosition">
<el-select size="medium" v-model="siteInfo.watermarkPosition" placeholder="水印位置"
@change="waterPositionChange">
<el-option value="0" label="平铺"></el-option>
<el-option value="1" label="横向平铺"></el-option>
<el-option value="2" label="竖向平铺"></el-option>
<el-option value="3" label="单一位置"></el-option>
</el-select>
</el-form-item>
<el-form-item label="单一位置" prop="watermarkSinglePosition" v-if="siteInfo.watermarkPosition === '3'">
<el-select size="medium" v-model="siteInfo.watermarkSinglePosition" placeholder="单一位置" @change="waterPositionChange">
<!-- /** 水印单一位置,1左下,3右下,7左上,9右上 */ -->
<el-option value="7" label="左上角"></el-option>
<el-option value="9" label="右上角"></el-option>
<el-option value="1" label="左下角"></el-option>
<el-option value="3" label="右下角"></el-option>
</el-select>
</el-form-item>
<el-form-item label="倾斜角度" prop="watermarkIncline"
v-if="siteInfo.watermarkPosition === '1' || siteInfo.watermarkPosition === '2'">
<el-slider style="width: 300px;" v-model="siteInfo.watermarkIncline" max="360" @change="waterPositionChange" />
</el-form-item>
<el-form-item label="预览图" v-if="siteInfo.watermarkPosition">
<canvas id="waterCanvas" width="500" height="500" v-if="isShow"></canvas>
<canvas id="waterCanvasTwo" width="500" height="500" v-else></canvas>
</el-form-item>
<el-form-item label="透明度" prop="watermarkTransparent" v-if="siteInfo.watermarkPosition">
<el-input-number v-model="siteInfo.watermarkTransparent" :step="0.1" :min="0" :max="1" @change="waterPositionChange" />
</el-form-item>
</template>
// 水印位置改变
const isShow = ref(false)
const waterPositionChange = (e) => {
console.log(fileList.value);
isShow.value = !isShow.value
// 等dom节点挂载之后
setTimeout(() => {
// 创建一个画布
if (isShow.value) {
canvas = document.getElementById("waterCanvas");
} else {
console.log(isShow.value, 'waterCanvasTwo');
canvas = document.getElementById("waterCanvasTwo");
}
setTimeout(() => {
mergeImages()
}, 200)
}, 200)
}
// 水印设置
var canvas;
const mergeImages = (file) => {
return new Promise((resolve) => {
// 获取当前图片的宽和高
let myWidth = 500
let myHeight = 500
const context = canvas.getContext("2d");
context.clearRect(0,0,myWidth,myHeight) //初始化清除上一次的绘画
// 绘制背景图
const overlay = new Image();
overlay.src = 'http://mohua.oss-cn-shenzhen.aliyuncs.com/16674632080942882401467732332544.jpeg'
overlay.setAttribute("crossOrigin", 'Anonymous')
overlay.onload = () => {
context.drawImage(overlay, 0, 0, myWidth, myHeight); //绘制水印背景图
// 样版图片
const template = new Image();
template.crossOrigin = "anonymous";
template.src = fileList.value[0]?.url
console.log(fileList.value[0]?.url, 'fileList.value[0]?.url');
template.onload = () => {
context.globalAlpha = siteInfo.watermarkTransparent; //水印透明度
// 平铺
if (siteInfo.watermarkPosition === '0') {
context.fillStyle = context.createPattern(template, "repeat"); //水印平铺
context.fillRect(0, 0, 800, 800); //填充画布
} else if (siteInfo.watermarkPosition === '1') {
// 角度
if (siteInfo.watermarkIncline !== 0) {
context.rotate(siteInfo.watermarkIncline*Math.PI/180);
}
context.fillStyle = context.createPattern(template, "repeat-x"); //水印横向平铺
context.fillRect(0, 0, myWidth, myHeight); //填充画布
} else if (siteInfo.watermarkPosition === '2') {
// 角度
if (siteInfo.watermarkIncline !== 0) {
context.rotate(-siteInfo.watermarkIncline*Math.PI/180);
}
context.fillStyle = context.createPattern(template, "repeat-y"); //水印竖向平铺
context.fillRect(0, 0, myWidth, myHeight); //填充画布
} else {
// 单一位置
if (siteInfo.watermarkSinglePosition === '7') {
context.drawImage(template, 0, 0, 50, 50); //绘制水印位于左上角
}
if (siteInfo.watermarkSinglePosition === '9') {
context.drawImage(template, 450, 0, 50, 50); //绘制水印位于右上角
}
if (siteInfo.watermarkSinglePosition === '1') {
context.drawImage(template, 0, 450, 50, 50); //绘制水印位于左下角
}
if (siteInfo.watermarkSinglePosition === '3') {
context.drawImage(template, 450, 450, 50, 50); //绘制水印位于右下角
}
}
let data = canvas.toDataURL('image/jpeg')
// console.log(data, 'data');
};
};
})
}
还没有评论,来说两句吧...