javascript 图片水印

在网站中，我们经常需要为图片添加水印以保证版权和防止盗用。而javascript作为一种前端语言，其提供了一些很方便的方法来实现图片水印。

我们先来看一下最简单的实现方式：

 <script>
function watermark(imgurl, text) {
var canvas = document.createElement("canvas");
var img = new Image();
img.src = imgurl;
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
ctx.font = "40px Arial";
ctx.fillStyle = "white";
ctx.fillText(text, 10, img.height - 10);
var base64Url = canvas.toDataURL();
document.getElementById("result").src = base64Url;
};
}
watermark("img/test.jpg", "hello world");
</script>
<img id="result" /> 

我们在上面的代码中，使用了createElemnt()来创建一个画布，并通过setImage方法将需要添加水印的图片载入，之后使用画布的Context（2d）来绘制水印部分，最后将绘制的结果存储为base64编码的图像并显示在页面上。

在上面的示例中，我们只是在默认的位置和大小上指定了一个文本数字并绘制，而我么需要更底层的控制才能完全控制水印的位置、大小和样式。

下面这个例子就是使用基础Canvas技术和JavaScript调用绘图API以实现完全控制的例子。

 <script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
ctx.font = "20px Microsoft YaHei";
ctx.fillStyle = "#ffffff";
ctx.textBaseline = "middle";
ctx.fillText("hello,world", img.width - 120, img.height - 20);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(img.width, img.height);
ctx.strokeStyle = "#ffffff";
ctx.stroke();
};
img.src = "img/test.jpg";
</script>
<canvas id="canvas"></canvas> 

在上面的代码中，我们绘制了一个图片，并设置了一些细节风格，如字体、颜色、位置等，同样也显示了如何在这个基础上绘制一些额外的形状和线条。

在这些代码之间，我们还可以使用HTML5的Canvas API、浏览器插件如Flash以及许多其他技术来实现更高级、更酷的效果。无论您是为自己的网站添加水印还是实现更大规模的图像空间，JavaScript在处理图像时都是一个有用的工具。

查看更多关于javascript 图片水印的详细内容...