在canvas出现之前,项目中的图片添加水印的需求,必定是后端同学们来处理的,但是canvas出来之后,前端终于可以站出来说,这个需求,交给我来!壮哉我大前端~,上周的任务就是在前端处理水印的效果,这个效果最重要的逻辑其实就几行代码,至于如何优雅的将这些简单的逻辑封装成方法并入公司的前端库,应该是一个仁者见仁智者见智的问题,在此不表。
好了,废话不表,开始干活。
在html中准备canvas环境
<canvas id="myCanvas" width="1000" height="500" >
Your browser does not support the HTML5 canvas tag.
</canvas>
加载图片,这张图片有可能是已经存在的,也有可能是从后端通过ajax取过来的,不管是哪种方式,我们都需要一个img对象来保存这张图,在例子中,我们从后台取过来一张url为./img/demo.jpg的图片
var img = new Image();
img.src = './img/demo.jpg';
在图片加载完成之后,调用canvas的drawImage(),将我们的图片绘制在canvas的图层上面
img.onload=function(){
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.drawImage(img,0,0);
}
注意,调用drawImage()函数之前,请确保你的图片已经加载ok,否则你会看到canvas是空白的,这是因为在图片还没有绝对加载到页面之前,你直接调用了drawImage(),而这个时候,img对象还是空的。
在canvas上绘制好图片之后,回到onload函数中,利用我们在上一步中获取的ctx对象,继续绘制水印,font属性可以自定义水印的大小以及字体,fillStyle()方法可以自定义水印的颜色以及透明度,fillStyle()则完成最后的填充以及水印的位置定位
ctx.font="20px microsoft yahei";
ctx.fillStyle = "rgba(255,255,255,0.5)";
ctx.fillText("my images",100,100);
ok,如果你进行到这一步,初步的水印效果应该以及达成了,如果你还需要更多的效果,那就赶快去看canvas的api吧,上图,看看我的水印
最后,贴一个源代码,想看到效果的同学,直接拷贝我的html代码,将里面的图片url替换成你本地的url,就可以了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="1000" height="500" >
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
//准备img对象
var img = new Image();
img.src = './img/demo.jpg';
// 加载完成开始绘制
img.onload=function(){
//准备canvas环境
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
// 绘制图片
ctx.drawImage(img,0,0);
// 绘制水印
ctx.font="20px microsoft yahei";
ctx.fillStyle = "rgba(255,255,255,0.5)";
ctx.fillText("my images",100,100);
}
</script>
</body>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。