js加水印
时间: 2023-07-23 20:03:53 浏览: 38
你可以使用canvas在图片上添加水印。以下是一个简单的例子:
```javascript
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 加载图片
const img = new Image();
img.src = 'your-image-url';
img.onload = () => {
// 设置canvas尺寸
canvas.width = img.width;
canvas.height = img.height;
// 在canvas上绘制图片
ctx.drawImage(img, 0, 0);
// 设置水印文字样式
ctx.font = '20px Arial';
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// 添加水印文字
ctx.fillText('Your Watermark', canvas.width / 2, canvas.height / 2);
// 将canvas转换为图片
const watermarkedImg = canvas.toDataURL('image/jpeg');
// 将水印图片插入到页面中
const watermarkedImgElement = document.createElement('img');
watermarkedImgElement.src = watermarkedImg;
document.body.appendChild(watermarkedImgElement);
};
```
这个例子会在图片中心添加一个白色半透明的文本水印。你可以根据自己的需要修改样式和位置。