汕头seo建站陕西 餐饮 网站建设
目录
方法1：使用HTML2canvas
说明：
优点
缺点
依赖安装
方法2：使用canvas结合vant中组件
增加水印方法
在vue组件中使用
要点
方法1：使用HTML2canvas
使用html2canvas来处理水印的生成，需要就给水印元素转换为canvas图像并叠加到上传的图片。
<template><div><van-uploader :after-read="afterRead" /><!-- 水印元素 --><div id="watermark" style="display: none;"><div style="font-size: 20px; color: rgba(0, 0, 0, 0.3); transform: rotate(-45deg); position: absolute; top: 50%; left: 50%; transform-origin: center;">水印文本</div><!-- 如果需要图片水印，可以在这里添加图片元素 --><img src="path/to/watermark.png" style="position: absolute; bottom: 10px; right: 10px; width: 100px; height: 100px; opacity: 0.3;" /></div></div>
</template><script>
import { ref } from 'vue';
import html2canvas from 'html2canvas';export default {setup() {const afterRead = async (file) => {// 创建 canvas 元素const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');// 设置 canvas 尺寸为图片尺寸const img = await new Promise((resolve) => {const img = new Image();img.src = file.content;img.onload = () => resolve(img);});canvas.width = img.width;canvas.height = img.height;// 绘制原始图片ctx.drawImage(img, 0, 0);// 获取水印元素并转换为 canvasconst watermarkElement = document.getElementById('watermark');const watermarkCanvas = await html2canvas(watermarkElement, {logging: false,scale: window.devicePixelRatio, // 高清屏支持useCORS: true, // 启用跨域});// 将水印 canvas 绘制到主 canvas 上ctx.drawImage(watermarkCanvas, 0, 0, canvas.width, canvas.height);// 将 canvas 转换为 Blob 并替换文件内容canvas.toBlob((blob) => {file.file = blob;file.content = URL.createObjectURL(blob);}, 'image/png');};return {afterRead,};},
};
</script>说明：
html2canvas 配置：
logging: false：禁用日志输出。
scale: window.devicePixelRatio：支持高清屏。
useCORS: true：启用跨域，确保图片资源可以被正确加载。
绘制水印：
使用 html2canvas 将水印元素转换为 canvas 图像。
将生成的水印 canvas 图像绘制到主 canvas 上。
生成最终图片：
将主 canvas 转换为 Blob，并替换上传的文件内容。
优点
-
灵活性高：可以将任何 HTML 元素转换为 canvas 图像，这意味着你可以使用 HTML 和 CSS 创建非常复杂的水印效果，比如带有图标、多行文本、不同字体和颜色等。
-
可视化设计：可以直接在页面上设计水印的样式，所见即所得，不需要通过代码去想象最终效果。
-
兼容性较好：
html2canvas会尽可能地将页面元素渲染成与浏览器中显示一致的图像，减少了因手动绘制带来的兼容性问题。
缺点
-
依赖外部库：需要引入
html2canvas库，增加了项目的依赖和体积。 -
性能问题：将 HTML 元素转换为 canvas 图像的过程可能会有一定的性能开销，尤其是在水印元素复杂或者页面元素较多的情况下。
-
配置复杂：可能需要调整
html2canvas的各种配置选项，以确保生成的图像符合预期，比如设置背景色、处理透明度等。
依赖安装
cnpm install compressorjs html2canvas方法2：使用canvas结合vant中组件
使用纯canvas操作直接绘制水印文本
vant的van-uploader组件提供了after-read事件，在其中调用水印处理函数
增加水印方法
/*** 添加水印* @param {blob} file* @param {string} el* @returns {Promise}*/
export async function addWaterMarker(file, el = '#markImg') {return new Promise(async (resolve, reject) => {try {// 先压缩和旋转图片file = await compressor(file);// 将文件 blob 转换成图片let img = await blobToImg(file);// 创建 canvas 画布let canvas = document.createElement('canvas');canvas.width = img.naturalWidth;canvas.height = img.naturalHeight;let ctx = canvas.getContext('2d');// 填充上传的图片ctx.drawImage(img, 0, 0, canvas.width, canvas.height);// 生成水印图片const markEle = document.querySelector(el);const markWidth = markEle.clientWidth;const scale = canvas.width * 0.25 / markWidth;// 先缩放水印再转成图片markEle.style.transform = `scale(${scale})`;const markImg = await htmlToCanvas(markEle);// 填充水印ctx.drawImage(markImg,canvas.width - markImg.width - 15 * scale,canvas.height - markImg.height - 15 * scale,markImg.width,markImg.height);// 将 canvas 转换成 blobcanvas.toBlob((blob) => resolve(blob));} catch (error) {reject(error);}});
}function blobToImg(blob) {return new Promise((resolve, reject) => {let reader = new FileReader();reader.addEventListener('load', () => {let img = new Image();img.src = reader.result;img.addEventListener('load', () => resolve(img));});reader.readAsDataURL(blob);});
}export function htmlToCanvas(el, backgroundColor = 'rgba(0,0,0,.1)') {return new Promise(async (resolve, reject) => {try {const markImg = await html2canvas(el, {scale: 2,allowTaint: false,useCORS: true,backgroundColor,});resolve(markImg);} catch (error) {reject(error);}});
}/*** 压缩和旋转图片* @param {blob} file* @param {number} quality* @param {number} maxWidth* @returns {Promise}*/
export function compressor(file, quality = 0.6, maxWidth = 750) {return new Promise((resolve) => {new Compressor(file, {maxWidth,quality,success: resolve,error(err) {console.log(err.message);},});});
}在vue组件中使用
<template><div><van-uploaderv-model="fileList"multiple:after-read="afterRead":before-read="beforeRead"/><!-- 水印内容 --><div id="markImg" style="display: none;"><div style="font-size: 14px; color: rgba(255, 255, 255, 0.3);">水印文字</div></div></div>
</template><script>
import { addWaterMarker, compressor } from '@/utils/watermark';
import Compressor from 'compressorjs';export default {data() {return {fileList: [], // vant 中图片上传的双向绑定};},methods: {// 上传前处理async beforeRead(file) {return new Promise(async (resolve, reject) => {if (Array.isArray(file)) {if (file.length > 5) {this.$toast('一次最多上传5张，请分批次上传！');reject();return;}let blobs = [];for (const f of file) {// 大于 512k 的图片则先压缩if (f.size > 512 * 1024 && f.type.includes('image/')) {f = await this.compressor(f);}// 添加水印let blob = await addWaterMarker(f);blob.name = f.name;blobs.push(blob);}resolve(blobs);} else {// 大于 512k 的图片则先压缩if (file.size > 512 * 1024 && file.type.includes('image/')) {file = await this.compressor(file);}const blob = await addWaterMarker(file);blob.name = file.name;resolve(blob);}});},// 上传后处理async afterRead(file) {// 处理上传逻辑console.log('上传成功', file);},// 压缩图片async compressor(file) {return new Promise((resolve) => {new Compressor(file, {quality: 0.6,success: resolve,error(err) {console.log(err.message);},});});},},
};
</script>要点
addWaterMarker：添加水印的核心方法，负责将水印内容绘制到图片上。
beforeRead：在图片上传前处理，包括压缩和添加水印。
afterRead：图片上传后的处理逻辑。使用了
html2canvas将水印内容转换为图片。使用了
compressorjs对图片进行压缩。
码字不易，各位大佬点点赞呗