前端水印图片文字教程如下，复制代码修改图片地址即可看到效果，工作中遇到总结的，喜欢就关注下哦：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="referrer" content="never">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="//topmdrt-static.oss-cn-shenzhen.aliyuncs.com/static/css/common/general.css" /> 公共默认样式
<link rel="stylesheet" href="../../../static/css/Free_insurance/free_insurance_new.css" /> ／／样式
<script src="//topmdrt-static.oss-cn-shenzhen.aliyuncs.com/static/js/common/adaptive.js"></script> ／／适配js
<script src="//topmdrt-static.oss-cn-shenzhen.aliyuncs.com/static/js/common/jquery.js"></script>
／／这里样式可以不用，应为水印的样式在底部js中
<title></title>
</head>
<body>
<!--<div align="center" class="img_photo">-->
<!--<img src="draw_baner_bg02.png" style="width: 100%;height: auto;">-->
<!--<img src="draw_log.png" width="300">-->
<!--<img src="person_log_bxzd.png" width="300">-->
<!-- <img src="person_rule.png" width="40px" height="40px">-->
<!--</div>-->
<!--<input type="button" value="一键合成" onClick="draw()" style="display:block;width: 60px; margin: 0 auto;">-->
<div id="imgBox" align="center"></div>
<div class="share_fixed"><br />长按<br />并保存图片</div>
<script>
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r != null) return unescape(r[2]);
return null;
};
var id_random = GetQueryString('id_random');
var open_id = GetQueryString('open_id');
$.get('http://a-test.topmdrt.com/zengxian/zengxian/ajaxZxSuccess/' + id_random + '/' + open_id + , {}, function(res) {
// $.get('http://a-test.topmdrt.com/zengxian/zengxian/share/103ea9e17b12ec47e9267388266e3988/oQ-CGwJFEidDgyGzHG_hsueh-NDw', {}, function(res) {
var pro = res.data;
if(res.errCode == "0") {
if(pro.name.length > 1) {
console.log(pro.name.substr(0, 3) + '...')
var name_id = pro.name.substr(0, 3) + '...'
} else {
var name_id = pro.name;
}
//shuiyin
// var data1 = ['./bg.png', './person_rule.png']; //[背景图，二维码]
var data1 = ['https://oss-img.topmdrt.com' + pro.diUrl, 'https://oss-img.topmdrt.com' + pro.erwUrl]; //[背景图，二维码]
var c = document.createElement('canvas'),
ctx = c.getContext('2d'),
len = data1.length;
c.width = 360; //背景图宽
c.height = 600; //背景图高
ctx.rect(0, 0, c.width, c.height);
ctx.fillStyle = 'transparent'; //画布填充颜色
ctx.fill();
function drawing(n) {
if(n < len) {
var img = new Image;
//img.crossOrigin = 'Anonymous'; //解决跨域
img.src = data1[n];
img.onload = function() {
if(n == 1) {
//绘制水印图片
ctx.drawImage(img, 14, 510, 80, 80);
// 绘制水印文字
ctx.font = "16px microsoft yahei";
ctx.fillStyle = "rgba(255,255,255,1)";
ctx.fillText(name_id + pro.product_name, 104, 540);
ctx.fillText("长按识别二维码，立即领取", 104, 570);
} else {
ctx.drawImage(img, 0, 0, c.width, c.height);
}
drawing(n + 1); //递归
}
} else {
//保存生成作品图片
convertCanvasToImage(c);
// Canvas2Image.saveAsJPEG(c); //保存到电脑
}
}
drawing(0);
//}
function convertCanvasToImage(canvas) {
var hc_image = new Image();
hc_image.src = canvas.toDataURL("image/png");
$('#imgBox').html(hc_image);
}
//end
}
}, 'json')
</script>
</body>
</html>
效果图：
更多交流可加qq:844271163