js 常规打水印方法 canvas方法

最新推荐文章于 2024-05-24 22:55:55 发布
最新推荐文章于 2024-05-24 22:55:55 发布
阅读量979 收藏 2
点赞数 1
分类专栏： 个人日记 javascript 文章标签： js 打水印 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wen_binobject/article/details/85281178
版权

看到同事曾经有写过一个打水印的方法就看了下实现方法。 js实现

<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 <title>Web page from child.com</title> 

 </head> 
 <body> 

 </body> 
 </html>
 <script type="text/JavaScript"> 
    function watermark(settings) {
        debugger;
        //默认设置
        var defaultSettings={
            watermark_txt:"text",
            watermark_x:20,//水印起始位置x轴坐标
            watermark_y:20,//水印起始位置Y轴坐标
            watermark_rows:20,//水印行数
            watermark_cols:20,//水印列数
            watermark_x_space:100,//水印x轴间隔
            watermark_y_space:50,//水印y轴间隔
            watermark_color:'#aaa',//水印字体颜色
            watermark_alpha:0.4,//水印透明度
            watermark_fontsize:'15px',//水印字体大小
            watermark_font:'微软雅黑',//水印字体
            watermark_width:210,//水印宽度
            watermark_height:80,//水印长度
            watermark_angle:15//水印倾斜度数
        };
        //采用配置项替换默认值，作用类似jquery.extend
        if(arguments.length===1&&typeof arguments[0] ==="object" )
        {
            var src=arguments[0]||{};
            for(key in src)
            {
                if(src[key]&&defaultSettings[key]&&src[key]===defaultSettings[key])
                    continue;
                else if(src[key])
                    defaultSettings[key]=src[key];
            }
        }

        var oTemp = document.createDocumentFragment();

        //获取页面最大宽度
        var page_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
        var cutWidth = page_width*0.0150;
        var page_width=page_width-cutWidth;
        //获取页面最大高度
        var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight)+450;
        // var page_height = document.body.scrollHeight+document.body.scrollTop;
        //如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
        if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width *defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) {
            defaultSettings.watermark_cols = parseInt((page_width-defaultSettings.watermark_x+defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space));
            defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1));
        }
        //如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
        if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) {
            defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
            defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));
        }
        var x;
        var y;
        for (var i = 0; i < defaultSettings.watermark_rows; i++) {
            y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
            for (var j = 0; j < defaultSettings.watermark_cols; j++) {
                x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;

                var mask_div = document.createElement('div');
                mask_div.id = 'mask_div' + i + j;
                mask_div.className = 'mask_div';
                mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
                //设置水印div倾斜显示
                mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                mask_div.style.visibility = "";
                mask_div.style.position = "absolute";
                mask_div.style.left = x + 'px';
                mask_div.style.top = y + 'px';
                mask_div.style.overflow = "hidden";
                mask_div.style.zIndex = "9999";
                mask_div.style.pointerEvents='none';//pointer-events:none  让水印不遮挡页面的点击事件
                //mask_div.style.border="solid #eee 1px";
                mask_div.style.opacity = defaultSettings.watermark_alpha;
                mask_div.style.fontSize = defaultSettings.watermark_fontsize;
                mask_div.style.fontFamily = defaultSettings.watermark_font;
                mask_div.style.color = defaultSettings.watermark_color;
                mask_div.style.textAlign = "center";
                mask_div.style.width = defaultSettings.watermark_width + 'px';
                mask_div.style.height = defaultSettings.watermark_height + 'px';
                mask_div.style.display = "block";
                oTemp.appendChild(mask_div);
            };
        };
        document.body.appendChild(oTemp);
    }
    watermark();
 </script>

在这里插入图片描述
canvas实现

<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 <title>Web page from child.com</title>  
 </head> 
 <body> 
    <div class="content">
        我是内容我是内容我是内容我是内容我是内容我是内容
        我是内容我是内容我是内容我是内容我是内容我是内容
        我是内容我是内容我是内容我是内容我是内容我是内容
        我是内容我是内容我是内容我是内容我是内容我是内容
        我是内容我是内容我是内容我是内容我是内容我是内容
        我是内容我是内容我是内容我是内容我是内容我是内容
        我是内容我是内容我是内容我是内容我是内容我是内容
        我是内容我是内容我是内容我是内容我是内容我是内容
        我是内容我是内容我是内容我是内容我是内容我是内容
        我是内容我是内容我是内容我是内容我是内容我是内容
        我是内容我是内容我是内容我是内容我是内容我是内容
        我是内容我是内容我是内容我是内容我是内容我是内容
    </div>
 </body> 
 </html>

 <script type="text/JavaScript"> 
    function addWaterMarker(str){
             var can = document.createElement('canvas');
             var body = document.body;
             body.appendChild(can);
             can.width=400; //画布的宽
             can.height=200;//画布的高度
             can.style.display='none';
             var cans = can.getContext('2d');
             cans.rotate(-20*Math.PI/180); //画布里面文字的旋转角度
             cans.font = "16px Microsoft JhengHei"; //画布里面文字的字体
             cans.fillStyle = "rgba(17, 17, 17, 0.50)";//画布里面文字的颜色
             cans.textAlign = 'left'; //画布里面文字的水平位置
             cans.textBaseline = 'Middle'; //画布里面文字的垂直位置
             cans.fillText(str,can.width/3,can.height/2); //画布里面文字的间距比例
             body.style.backgroundImage="url("+can.toDataURL("image/png")+")"; //把画布插入到body中
     }
     //调用这个方法即可
     addWaterMarker("水印");
  </script>

在这里插入图片描述

wen_binObject
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js 给图片添加水印
weixin_41277748的博客
06-12 3178
1、把图片或者图片文件转成image元素。2、把转成的image转成canvas。3、在生成的canvas中添加水印。
jquery页面水印插件，支持多行水印、行错开
weixin_33882452的博客
06-10 701
最近工作需求，需要在页面上加水印，但发现网上示例无法满足我的需求，所以还是自己动手写。 有几个特别需求： 1.可以写多行水印，并且中心对齐。 2.每行水印错开。 PS：我找到的例子都是单行水印，所以用不了，想做的效果如下。 （图1）实现思路 实现页面水印主要是有两种方法。 1.DOM元素 就是将水印放置DOM元素里，按一定规律铺设在目标区域。 优点： （1）.元素计算方式相对简单些 缺点： （...
使用JS代码实现页面添加水印的方法详解
最新发布
Oona_01的博客
05-24 105
信息标识： 水印可以用于标识文档的所有者、保密级别、状态或其他相关信息，帮助用户更好地理解文档内容的属性。不适用于移动端： 在移动设备上，屏幕空间有限，添加水印可能会占用宝贵的屏幕空间，影响用户的阅读和操作。视觉干扰： 过多或过显眼的水印可能会影响页面的美观度和可读性，甚至干扰用户对页面内容的浏览和理解。用户体验： 一些用户可能会认为水印对页面内容的查看和操作产生不必要的干扰，从而降低他们的使用体验。以上就是使用JS代码实现页面添加水印的方法详解的详细内容，更多关于JS页面添加水印的资料请关注。
前端实现：图片添加水印JS+Canvas（简易版）
m0_48749505的博客
11-01 1146
图片加水印是一种常见的图像处理技术，通常用于保护版权、防止盗用、增加图片的识别度等多种场景。例如：证件照片加水印、个人照片加水印、网站图片保护等等。
JS前端基于canvas给图片添加水印，并下载带有水印的图片
qq_37831545的博客
02-02 2032
前端原生基于canvas给图片添加水印，并下载带有水印的图片
canvas实现水印效果
老白干的zone
07-17 3910
canvas两种实现水印效果
js+canvas绘制矩形的方法
11-26
本文实例讲述了js+canvas绘制矩形的方法。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
js+canvas绘制五角星的方法
11-22
本文实例讲述了js+canvas绘制五角星的方法。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
canvas 下载二维码和图片加水印的方法
01-21
昨天介绍了一个生成二维码的插件QRCode.js，它是借助HTML5 Canvas绘制而成。所以，今天的主角就是canvas啦–canvas的实际应用。 一、下载二维码（查看如何生成二维码） HTMLCanvasElement提供了toDataURL方法，该...
js+canvas简单绘制圆圈的方法
11-26
本文实例讲述了js+canvas简单绘制圆圈的方法。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
js HTML5 canvas绘制图片的方法
01-19
demo.js [removed]=function() { createcanvas(); drawImage(); } function createcanvas() { var CANVAS=document.getElementById('mycanvas'); context=CANVAS.getContext('2d'); } function drawImage() {...
CanvasJS v2.2 消除水印Trial Version
01-02
CanvasJS v2.2 消除水印Trial Version，无须修改许多源代码，只要注解一列代码即可消除 Trial Version + CanvasJS.com，canvasjs.min.js、jquery.canvasjs.min.js都须修改的。
Js和Canvas实现水印且控制台不可删除
爱酸的博文
09-27 819
【代码】通过Js和Canvas实现水印且控制台不可删除。
Canvas增加水印
weixin_43924261的博客
08-30 128
export const waterMarkMixin = { methods: { /** * 图片添加水印 * @param data { url: '图片地址', depName: '门店名称', time: '当前时间', userName: '用户显示名' } */ addWaterMark(data) { return new Promise(resolve => { if (!data.time) { .
小程序使用 canvas 给图片添加水印
weixin_47170010的博客
03-13 2588
小程序使用 canvas 给图片添加水印 操作 canvas 相关的 api 使用的是微信最新提供的 (一路过来踩了好多坑…) 浅用微信小程序 canvas 给图片添加简单水印, 废话不多说, 先上效果, 后看代码 (uniapp等框架写法大同小异) 效果图 代码部分 (没有细分拆开来讲, 但大部分代码都加解释注释了) WXML <view class="container"> <button bindtap="chooseImages">选择图片</button&
js中给页面添加水印方法
不吃草的程序猿的博客
09-11 1453
调用方法时传递的参数数量可以自行设置： watermark('参数1','参数2','参数3'); function watermark(t1, t2, t3) { var maxWidth = document.documentElement.clientWidth; var maxHeight = document.documentElement.clientHeight; // 间隔宽度 var intervalWidth = 2
添加文字水印,实现倾斜文字水印背景
Kevin_love_Chrissy的博客
11-26 5438
其主要原理是利用UIColor类的一个方法：把图片变成颜色。 [[UIColor alloc] initWithPatternImage:xxxxx]; 该方法会把图片平铺变成一个颜色实体。   #pragma mark - 创建水印 - (UIImage *)imageWithText:(NSString *)text{     /**      这里之所以外面再放一个UIVie...
前端小程序——js+canvas 给图片添加水印
热门推荐
gjq1993的博客
03-03 1万+
图片来自网络 市场上各种各样的图片处理器有很多，那么作为程序员的我们是不是应该自己做一个呢？那就从加水印开始吧 html： 点击添加水印 画完页面就是这个样子了： 加上js处理： /*加水印*/ function shuiyin(canvasid,imgurl,addtext){
canvas 使用方法
05-30
好的，以下是canvas的基本使用方法： 1. 创建canvas元素：首先在HTML页面中创建一个canvas元素，可以使用标签`<canvas>`或JavaScript代码动态创建，例如： ```html <canvas id="myCanvas"></canvas> ``` ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值