首页 > 代码库 > 利用html5canvas给图片增加文字水印
利用html5canvas给图片增加文字水印
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<canvas id=‘myCanvas‘ style="width: 280px; height: 280px" width="280" height="280"></canvas>
<script type="text/javascript">
getImg(‘候经理‘,80);
function getImg(text,fsz){
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
var img = new Image();
img.src = http://www.mamicode.com/‘hj.png‘;
img.onload=function(){//图片加载完成，才可处理
cxt.drawImage(img,0,0,280,280,0,0,280,280);
cxt.save();
cxt.font = fsz+"px Arial";
cxt.textBaseline = ‘middle‘;//更改字号后，必须重置对齐方式，否则居中麻烦。设置文本的垂直对齐方式
cxt.textAlign = ‘center‘;
var tw = cxt.measureText(text).width;
var ftop = c.height/2;
var fleft = c.width/2;
cxt.fillStyle="#ff0000";
cxt.fillRect(fleft-tw/2,ftop-fsz/2,tw,fsz);//矩形在画布居中方式
cxt.fillStyle="#ffffff";
cxt.fillText(text,fleft,ftop);//文本元素在画布居中方式
cxt.strokeStyle = ‘yellow‘;
cxt.strokeText(text,fleft,ftop);//文字边框
};
}
</script>
</body>
</html>
结果
利用html5canvas给图片增加文字水印
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。