最近遇到一个需求,给所有页面加水印(登录人),不影响其他点击等功能的使用,目的是防止信息外漏,当时就在想:这年头,PS就不说人人都能使用,谁手机还没个涂鸦功能,防不了,但是就是这么个需求,那就实现吧!

具体实现思路:在页面底部加一个大的div,给这个div添加背景图,背景图?从哪来?canvas实现吧!

function textBecomeImg(text,fontsize,fontcolor,target){
var canvas = document.createElement('canvas');
$buHeight = 0;
if(fontsize <= 32){ $buHeight = 99; }
else if(fontsize > 32 && fontsize <= 60 ){ $buHeight = 2;}
else if(fontsize > 60 && fontsize <= 80 ){ $buHeight = 4;}
else if(fontsize > 80 && fontsize <= 100 ){ $buHeight = 6;}
else if(fontsize > 100 ){ $buHeight = 10;}
canvas.height=fontsize + $buHeight ;
canvas.padding=30;
canvas.width = 450;
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width*2, canvas.height);
context.fillStyle = fontcolor;
context.font=fontsize+"px Arial";
context.textAlign = "center";
context.textBaseline = 'middle';
context.fillText(text,0,fontsize/2);
var canvasWidth = canvas.width/99;
canvasWidth = context.measureText(text).width;
var dataUrl = canvas.toDataURL('image/png');
var shuiyinDiv = document.createElement('div'); var style = shuiyinDiv.style;
style.position = 'absolute';
style.left = 0;
style.top = '-10%';
style.width = '120%';
style.height = '100%';
style.opacity = '0.1';
style.background = "url("+dataUrl+")";
style.zIndex = 9999999991;
style.transform = "rotate(-30deg)";
style.pointerEvents = "none";
target.appendChild(shuiyinDiv);
}

  

canvas实现水印的更多相关文章

  1. 离线合成联想到的--canvas合成水印

    前段时间做了功能模块:用户设置自定义勋章: 实现方式:前端把用户设置的昵称传到后台,后台根据不同用户等级,使用离线合成技术合成不同的勋章返回到前端: 方案算是实现了,但是有点坑就是,后台的离线合成没有 ...

  2. 实用js方法DataUrl转为File、url转base64

    声明:仅为方便自己所需,也希望能方便他人,如有侵权,联系删除. 1,DataUrl转为File /** * DataUrl转为File * @param {String} dataUrl - data ...

  3. canvas给图片加水印

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 利用canvas添加图片水印--直接上代码

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. 赵雅智_运用Bitmap和Canvas实现图片显示,缩小,旋转,水印

    上一篇已经介绍了Android种Bitmap和Canvas的使用,以下我们来写一个详细实例 http://blog.csdn.net/zhaoyazhi2129/article/details/321 ...

  6. vue + canvas 图片加水印

    思路:将两张图片绘制为一张 目标:输入的文字,绘制到图片上,简单实现图片水印 效果:输入的文字1: ‘你猜猜’ + 图片2 = 图片3(不要看清除水印的按钮,本人垃圾 没实现) 选择图片 html & ...

  7. 前端使用canvas生成盲水印的加密解密

    为了保障信息安全,防止重大信息泄露,并且能够锁定泄露用户,需要对页面展示的图片加入当前用户信息的盲水印,即最终图片外观看起来和原图一样,但是经过解码以后可以识别出水印信息,并且在截图后仍能进行较好的识 ...

  8. canvas实现平铺水印

    欲实现的水印平铺的效果图如下: 从图上看,应该做到以下几点: 文字在X和Y方向上进行平铺: 文字进行了一定的角度的旋转: 水印作为背景,其z-index位置应位于页面内容底部, 即不能覆盖页面主内容: ...

  9. HTML5 Canvas 为网页添加文字水印

    <!DOCTYPE html> <html> <body> <canvas id=" style="border:1px solid #d ...

随机推荐

  1. ASP.NET 中的 Session 怎么正确使用

    Session对象用于存储从一个用户开始访问某个特定的aspx的页面起,到用户离开为止,特定的用户会话所需要的信息.用户在应用程序的页面切换时,Session对象的变量不会被清除. 对于一个Web应用 ...

  2. vue项目中导出PDF的两种方式

    参考大家导出的方式,基本上是如下两种: 1.使用 html2Canvas + jsPDF 导出PDF, 这种方式什么都好,就是下载的pdf太模糊了.对要求好的pdf这种方式真是不行啊! 2.调用浏览器 ...

  3. 关键字:for_each

    std::for_each 先贴cppreference中对for_each的概述: template< class InputIt, class UnaryFunction > //此处 ...

  4. JavaSpring【七、AspectJ】

    AspectJ 概念 @AspectJ类似纯Java注解的普通Java类 Spring可以使用AspectJ来作为切入点 AOP在运行时仍是纯SpringAOP,对AspectJ无依赖 配置: 对@A ...

  5. Junit5常用注解

    0. IDEA中Maven项目测试类的新建方法 a. 如图在src目录下新建文件夹test b. 鼠标右键test,将该文件设置成test source c. 右键需要新建的测试类,如下图操作,选中T ...

  6. C# 对象遍历 string类型 null转空字符串和去前后空格

    using System; using System.Collections.Generic; namespace OA.Common.Extensions { /// <summary> ...

  7. kubernetes之Taints污点和Tolerations容忍

    介绍说明 nodeaffinity节点亲和性是pod上定义的一种属性, 使得pod能够被调度到某些node上运行, taint污点正好相反, 它让node拒绝pod运行, 除非pod明确声明能够容忍这 ...

  8. Istio技术与实践05:如何用istio实现流量管理

    Istio是Google继Kubernetes之后的又一开源力作,主要参与的公司包括Google,IBM,Lyft等,它提供了完整的非侵入式的微服务治理解决方案,解决微服务的管理.网络连接以及安全管理 ...

  9. mysql——数据库存储引擎

    MyISAM INNODB myISAM.innodb.memory MyISAM对事务要求不高,以查询和添加为主,考虑使用. 如bbs中的发帖表,回复表: INNODB存储引擎 对事务要求高,保存的 ...

  10. log4j2 日志打两遍的问题

    在使用log4j2的时候,一般都需要不同的日志分类打印不同的日志等级,如下面的配置 <!-- 用于指定log4j自动重新配置的监测间隔时间,单位是秒 --> <configurati ...