前端水印图片文字教程如下，复制代码修改图片地址即可看到效果，工作中遇到总结的，喜欢就关注下哦：

<!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

前端水印图片及文字js教程的更多相关文章

  1. IOS给图片增加水印(图片、文字)

    在网上发现很多人使用 CGContextDrawImage(context,CGRectMake(0,0,self.width,self.height),[image CGImage]); //原图  ...

  2. ASP.NET(C#)图片加文字、图片水印，神啊，看看吧

    ASP.NET(C#)图片加文字.图片水印 一.图片上加文字: //using System.Drawing; //using System.IO; //using System.Drawing.Im ...

  3. C#(.net)水印图片的生成

    /* * *    使用说明: * 建议先定义一个WaterImage实例 * 然后利用实例的属性,去匹配需要进行操作的参数 * 然后定义一个WaterImageManage实例 * 利用WaterI ...

  4. MVVM开源框架Knot.js 教程2 - 大幅改变前端框架开发体验的Debugger

    Knotjs教程系列 1.CBS初步 2.Knot.js Debugger(本文) ....持续增加中 Knot.js 教程2 - 改变前端框架开发体验的Debugger Debugger只是一个方便 ...

  5. PHP图片加文字水印和图片水印方法（鉴于李老师博客因没加水印被盗，特搜集的办法。希望能有用！）

    $dst_path = 'dst.jpg'; //创建图片的实例 $dst = imagecreatefromstring(file_get_contents($dst_path)); //打上文字 ...

  6. ios图片添加文字或者水印

    在项目中,我们会对图片做一些处理,但是我们要记住,一般在客户端做图片处理的数量不宜太多,因为受设备性能的限制,如果批量的处理图片,将会带来交互体验性上的一些问题.首先让我们来看看在图片上添加文字的方法 ...

  7. php 图片添加文字水印 以及 图片合成(微信快码传播)

    1.图片添加文字水印: $bigImgPath = 'backgroud.png'; $img = imagecreatefromstring(file_get_contents($bigImgPat ...

  8. PHP实现文字水印图片

    php实现简单的文字水印图片,使用前需要开启php配置中的gd2功能 <?php/*打开图片*/ //1.配置图片路径 $src="image/55.jpg";//这个路径改 ...

  9. Asp.net 上传图片添加半透明图片或者文字水印的方法

    主要用到System.Drawing 命名空间下的相关类,如Brush.Image.Bitmap.Graphics等等类 Image类可以从图片文件创建Image的实例,Bitmap可以从文件也可以从 ...

随机推荐

  1. nyoj281 整数中的1（二） 数位DP

    和整数中的1一毛一样.就是输入时改了一下罢了. AC代码: #include<cstdio> const int maxn = 35; int w[maxn], h[maxn]; void ...

  2. 跨域问题jsonp

    不得不说的同源政策: 同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指域名,协议,端口相同.当一个浏览器的两个tab页 ...

  3. 创建基于MailKit和MimeKit的.NET基础邮件服务

    邮件服务是一般的系统都会拥有和需要的功能,但是对于.NET项目来说,邮件服务的创建和使用会较为的麻烦..NET对于邮件功能提供了System.Net.Mail用于创建邮件服务,该基础服务提供邮件的基础 ...

  4. GitHub上最火的Android开源项目整理

    这篇文章介绍GitHub上另外34个非常受欢迎的Android开源项目,在这些项目中,你又在用或用过哪些呢? 41. android-swipelistview SwipeListView是一个And ...

  5. NetBeans部署项目（Extjs）报错（二）

    NetBeans部署项目(Extjs)报错(二) 1.具体错误如下: Using CATALINA_BASE: "C:\Users\Administrator.FOXB2MKB3RGUNIL ...

  6. jquery对象和js对象的转化

    jquery对象和js对象的转化   jquery对象只能使用jqury方法,不能使用js的方法,相反的,js对象也只能使用js的方法,如果js对象使用了jquery方法,那么浏览器就会报错. 但是在 ...

  7. Echarts自动刷新数据

    1.Echarts自动刷新数据 1.Echarts柱状图的正常配置 注:声明了 myChart.test这两个都有用 官方示例中myChart是声明在 function(ec)里面的 <scri ...

  8. gprecoverseg导致的元数据库问题致使数据库无法启动以及修复

    一.现象描述 在一次执行gprecoverseg后发现数据库无法正常连接,现象如下: 执行gprecoverseg日志如下: gprecoverseg:mdw-:gpadmin-[INFO]:-Sta ...

  9. 【BZOJ1009】GT考试（KMP算法，矩阵快速幂，动态规划）

    [BZOJ1009]GT考试(KMP算法,矩阵快速幂,动态规划) 题面 BZOJ 题解 看到这个题目 化简一下题意 长度为\(n\)的,由\(0-9\)组成的字符串中 不含串\(s\)的串的数量有几个 ...

  10. 【Luogu3768】简单的数学题（莫比乌斯反演，杜教筛）

    [Luogu3768]简单的数学题(莫比乌斯反演,杜教筛) 题面 洛谷 \[求\sum_{i=1}^n\sum_{j=1}^nijgcd(i,j)\] $ n<=10^9$ 题解 很明显的把\( ...