使用Canvas给图片添加水印

HTML5 herman 1759浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

在生活中我们到处都可以见到带有水印的文档。网上也到处可见的水印图片,如csdn,淘宝,百度上的图片都带有水印。
尤其是现在盗版非常严重的社会。你刚写的文章,几秒钟后就出现在其他网站上,然后就会出现,到底谁是原创问题。如何解决盗版问题,其他的方法之一就是图片添加水印,让盗文章的人没有立足之地。
运行效果如下:

全部源代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>使用Canvas给图片添加水印</title>
</head>
<body>
	<canvas id="xttblog" width="500" height="200"></canvas>
	<br/><input value="www.xttblog.com" id="test"/><br/>
	<input value="重新生成水印" type="button" onclick="watermark(document.getElementById('test').value);"/>
 <script>
	function watermark(url) {
		canvas = document.getElementById("xttblog");
		if (canvas.getContext){
			ctx = canvas.getContext('2d');
			var img1 = new Image();
			img1.src='xttblog.bmp';
			img1.onload = function(){
				var imgWidth=img1.width;
				var imgHeight=img1.height;
				canvas.width= imgWidth;
				canvas.height=imgHeight;
				ctx.drawImage(img1,0,0);
				// 创建渐变
				var gradient=ctx.createLinearGradient(0,0,canvas.width,0);
				gradient.addColorStop("0","magenta");
				gradient.addColorStop("0.5","blue");
				gradient.addColorStop("1.0","red");
				// 用渐变填色
				ctx.fillStyle    = gradient;
				// 水印字体
				ctx.font         = '30px Verdana';
				// 水印
				ctx.fillText(url, canvas.width-450,canvas.height-100);			
			}
		}
	}
	watermark('www.xttblog.com');
</script>
</body>
</html>

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » 使用Canvas给图片添加水印