使用canvas水印
时间: 2023-06-28 13:13:37 浏览: 65
要在Canvas上添加水印,可以通过以下步骤实现:
1. 创建一个Canvas元素和一个Image元素,并将图像加载到Image元素中。
2. 将图像绘制到Canvas上。
3. 设置Canvas的全局Alpha透明度,并在Canvas上绘制水印文本。
4. 保存Canvas为图像文件。
以下是示例代码:
```javascript
// 创建Canvas元素和Image元素
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
// 加载图片
img.onload = function() {
// 将图像绘制到Canvas上
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
// 设置透明度并绘制水印文本
ctx.globalAlpha = 0.5;
ctx.font = "20px Arial";
ctx.fillStyle = "red";
ctx.fillText("watermark", 10, 50);
// 保存Canvas为图像文件
var dataURL = canvas.toDataURL();
var link = document.createElement("a");
link.href = dataURL;
link.download = "watermarked-image.png";
link.click();
};
img.src = "path/to/image.jpg";
```
这将创建一个带有水印文本的图像文件,并将其下载到用户的计算机中。当然,你可以根据你的需求修改水印文本的位置、颜色和透明度等属性。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)