canvas制作图片水印

概述

以前都是后端同学来处理的，现在有了canvas，

前端同学也可以做出水印来了，

而且要比后端同学做的要精美漂亮。

制作水印的几个步骤

1. 在html中准备好

   canvas

   标签
2. 将图片绘制到

   canvas

   元素上
3. 向图片上添加水印

canvas标签

<canvas id="myCanvas" width="500" height="500">
    你的浏览器不支持canvas标签，请使用最新版的chrome浏览器
</canvas>           

将图片绘制到

canvas

上

加载图片

// 通过ajax从后台获取，这里直接使用一个图片
var img = new Image();   
img.src = './img/bg.jpg';            

将图片绘制到

canvas

上

img.onload = function(){ //图片加载完成后
    var canvas = document.getElementById("myCanvas");
    // 获取canvas句柄（上下文）
    var ctx = canvas.getContext("2d");
    // 绘制图片
    ctx.drawImage(img,0,0);
}           

向图片上添加水印

在onload函数中

// 绘制水印
ctx.font="20px Microsoft Yahei";
ctx.fillStyle = "rgba(255,255,255,0.5)";
ctx.fillText("my images",100,100);           

参考文章

- canvas实现平铺水印

canvas应用

- 粒子效果