97 lines
4.0 KiB
JavaScript
97 lines
4.0 KiB
JavaScript
|
// 新添加的水印功能----知无涯
|
|||
|
|
/**
|
|||
|
|
* 为图片添加水印
|
|||
|
|
* @param {File} file - 原始图片文件
|
|||
|
|
* @param {string} text - 水印文字
|
|||
|
|
* @param {object} options - 水印配置选项
|
|||
|
|
* @returns {Promise<File>} - 返回带水印的新图片文件
|
|||
|
|
*/
|
|||
|
|
export const addWatermarkToImage = (file, text, options = {}) => {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
if (!file || !(file instanceof Blob)) {
|
|||
|
|
reject(new Error('参数必须是Blob或File对象'));
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!text) {
|
|||
|
|
reject(new Error('水印文字不能为空'));
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const reader = new FileReader();
|
|||
|
|
reader.onload = (e) => {
|
|||
|
|
const img = new Image();
|
|||
|
|
img.onload = () => {
|
|||
|
|
try {
|
|||
|
|
const canvas = document.createElement('canvas');
|
|||
|
|
canvas.width = img.width;
|
|||
|
|
canvas.height = img.height;
|
|||
|
|
const ctx = canvas.getContext('2d');
|
|||
|
|
|
|||
|
|
// 绘制原始图片
|
|||
|
|
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
|||
|
|
|
|||
|
|
// 设置水印样式 - 增强可见性
|
|||
|
|
// ctx.font = options.font || 'bold 20px Arial'; // 加大字号并加粗
|
|||
|
|
// ctx.fillStyle = options.color || 'rgba(0, 0, 0, 0.7)'; // 改为黑色，提高不透明度
|
|||
|
|
// ctx.textAlign = 'center';
|
|||
|
|
// ctx.textBaseline = 'middle';
|
|||
|
|
// 计算字体大小
|
|||
|
|
const fontSize = Math.min(canvas.width, canvas.height) / 20; // 根据图片大小动态调整字体大小
|
|||
|
|
ctx.font = `bold ${fontSize}px Arial`; // 加大字号并加粗
|
|||
|
|
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'; // 改为黑色，提高不透明度
|
|||
|
|
ctx.textAlign = 'right';
|
|||
|
|
ctx.textBaseline = 'bottom';
|
|||
|
|
|
|||
|
|
// 添加文字阴影增强可读性
|
|||
|
|
ctx.shadowColor = 'rgba(255, 255, 255, 0.8)';
|
|||
|
|
ctx.shadowBlur = 5;
|
|||
|
|
ctx.shadowOffsetX = 1;
|
|||
|
|
ctx.shadowOffsetY = 1;
|
|||
|
|
|
|||
|
|
// 添加水印文字
|
|||
|
|
//ctx.fillText(text, canvas.width / 2, canvas.height / 2);
|
|||
|
|
|
|||
|
|
// 拆分文本为多行
|
|||
|
|
const lines = text.split('\n');
|
|||
|
|
//const lineHeight = fontSize * 1.5; // 每行的高度，可以根据字体大小调整
|
|||
|
|
//const startY = (canvas.height / 2) - ((lines.length - 1) * lineHeight / 2);
|
|||
|
|
const lineHeight = fontSize * 1.5; // 每行的高度，可以根据字体大小调整
|
|||
|
|
const startX = canvas.width - 10; // 右下角的x坐标，留10像素的边距
|
|||
|
|
let startY = canvas.height - 10; // 右下角的y坐标，留10像素的边距
|
|||
|
|
|
|||
|
|
// 添加水印文字
|
|||
|
|
// lines.forEach((line, index) => {
|
|||
|
|
// ctx.fillText(line, canvas.width / 2, startY + index * lineHeight);
|
|||
|
|
// });
|
|||
|
|
lines.forEach((line) => {
|
|||
|
|
const textWidth = ctx.measureText(line).width;
|
|||
|
|
ctx.fillText(line, startX, startY);
|
|||
|
|
startY -= lineHeight; // 每行向上移动一行的高度
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 清除阴影设置
|
|||
|
|
ctx.shadowColor = 'transparent';
|
|||
|
|
|
|||
|
|
// 转换为Blob
|
|||
|
|
canvas.toBlob((blob) => {
|
|||
|
|
if (!blob) {
|
|||
|
|
reject(new Error('图片转换失败'));
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const newFile = new File([blob], file.name || 'watermarked_image', {
|
|||
|
|
type: file.type || 'image/jpeg',
|
|||
|
|
lastModified: Date.now()
|
|||
|
|
});
|
|||
|
|
resolve(newFile);
|
|||
|
|
}, file.type || 'image/jpeg');
|
|||
|
|
} catch (error) {
|
|||
|
|
reject(error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
img.onerror = () => reject(new Error('图片加载失败'));
|
|||
|
|
img.src = e.target.result;
|
|||
|
|
};
|
|||
|
|
reader.onerror = () => reject(new Error('文件读取失败'));
|
|||
|
|
reader.readAsDataURL(file);
|
|||
|
|
});
|
|||
|
|
};
|