JS前端基于canvas给图片添加水印

在前端开发中，给图片添加水印是一项常见的需求。利用canvas可以比较方便地实现给图片添加水印的功能。下面是实现这一需求的完整攻略：

1. 准备工作

在开始使用canvas给图片添加水印之前，我们需要准备一张需要添加水印的图片和一个水印图片，这个水印图片可以是公司logo、网站名称等等。另外，需要一个canvas标签，这里以<canvas id="canvas"></canvas>为例。

2. 绘制图片

可以使用以下代码从HTML中获取图片并绘制到canvas中。

var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
var img=new Image();
img.src='http://example.com/path/to/image.jpg';
img.onload=function(){
    ctx.drawImage(img,0,0);//将图片绘制到canvas中
}

3. 绘制水印

有了绘制图片的基础，接下来就可以绘制水印了。可以使用以下代码从HTML中获取水印图片并绘制到canvas中。

var logo=new Image();
logo.src='http://example.com/path/to/logo.png';
logo.onload=function(){
    ctx.drawImage(logo,dimensions.x, dimensions.y,width, height);//将水印绘制到canvas的指定位置
}

在上面的代码中，dimensions.x和dimensions.y表示水印在canvas中的位置，width和height表示水印的宽度和高度。

4. 添加文字水印

可以使用以下代码实现添加文字水印的功能。

var text="我们的网站";
ctx.fillText(text, dimensions.x, dimensions.y);

在上面的代码中，text表示要添加的文字，dimensions.x和dimensions.y表示文字在canvas中的位置。

5. 导出图片

完成绘制水印之后，你可能需要将canvas导出成图片。以下是一种将canvas导出成图片的方法：

var canvas=document.getElementById('canvas');
var imageURL=canvas.toDataURL('image/png');//获取图片url

示例1：给图片添加图片水印

var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
var img=new Image();
img.src='http://example.com/path/to/image.jpg';
img.onload=function(){
    ctx.drawImage(img,0,0);
    var logo=new Image();
    logo.src='http://example.com/path/to/logo.png';
    logo.onload=function(){
        var dimensions={
            x: canvas.width/2-logo.width/2,
            y: canvas.height/2-logo.height/2,
            width: logo.width,
            height: logo.height
        };
        ctx.drawImage(logo,dimensions.x, dimensions.y, dimensions.width, dimensions.height);
        var imageURL=canvas.toDataURL('image/png');
    }
}

在上面的示例中，水印图片位于canvas的中心位置。

示例2：给图片添加文字水印

var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
var img=new Image();
img.src='http://example.com/path/to/image.jpg';
img.onload=function(){
    ctx.drawImage(img,0,0);
    var dimensions={
        x: 20,
        y: canvas.height-30
    };
    ctx.font="20px Arial";
    ctx.fillText("我们的网站", dimensions.x, dimensions.y);
    var imageURL=canvas.toDataURL('image/png');
}

在上面的示例中，文字水印位于canvas的左下角位置。

以上就是关于JS前端基于canvas给图片添加水印的完整攻略以及两个示例。