zoukankan      html  css  js  c++  java
  • 简单的前端水印(canvas)

    前几天做项目,客户要求在页面中添加水印,在查询一段资料后,就自己改了些东西,想到了canvas,想到就去做;

    代码:js地址:https://home.400gb.com/#item-files/action-index

    function textBecomeImg(text,fontsize,fontcolor){
            var canvas = document.createElement('canvas');
            $buHeight = 0;
            if(fontsize <= 32){ $buHeight = 45; }
            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;
            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;
            canvas.width = 250;
            canvas.height = 100;
            context.fillStyle = fontcolor;
            context.font=fontsize+"px Arial";
            context.textBaseline = 'middle'; 
            context.fillText(text,0,fontsize/2);
            var dataUrl = canvas.toDataURL('image/png');
            return dataUrl;
      }
      function  contant(cont,left,top) { 
        var text = cont;
        var shuiyinDiv = document.createElement('div');
        var style = shuiyinDiv.style;
        style.position = 'absolute';
        style.left = left;
        style.top = top;
        style.width = '250%';
        style.height = '300%';
        style.opacity = '0.15';
        style.background = "url("+textBecomeImg(text,22,"red")+")";
        style.zIndex = 9999999991;
        style.transform = "rotate(-30deg)";
        style.pointerEvents = "none";
      document.getElementById('contant').appendChild(shuiyinDiv);
       }
    //调用的时候:
      contant('测试水印','-60%','-60%');
      //但需要调用多次的时候,我们需要把纵坐标进行调整就行了
     
      contant('测试水印1','-60%','-55%')

      contant('测试水印2','-60%','-50%')
     

    实现的逻辑主要就是通过canvas新建div实现的;上面的代码中

    document.getElementById('contant').appendChild(shuiyinDiv);可以更改为
    document.body.appendChild(shuiyinDiv);
    这样的话内容就会被添加到body当中,因为这样的话,我们无法获取页面的实际高度,所以会出险只有当前屏幕有水印的结果;
    所以我在页面中是这样写的,用一个div存放水印,div通过定位定到当前页面,设置宽高百分百,这样就能达到所有内容下都有水印。
    html代码:
      <div id="contant"></div>

    css:

     html,body{
           100%;
          height: 100%;
          overflow: auto;
        }
        #contant{
           100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
           100%;
          overflow: hidden;
          z-index: -2
        }

    需要的拿走,谢谢!!!

     
  • 相关阅读:
    POJ1006: 中国剩余定理的完美演绎(非原创)
    poj 1001 分析
    document.createElement()的用法
    js innertext
    转csdn-css4
    css中最基本几个选择器
    Django解决(1146, "Table 'd42.django_session' doesn't exist")方法
    django清理migration终极解决办法
    linux中的fork炸弹
    nginx转发php文件到php-fpm服务器提示502错误
  • 原文地址:https://www.cnblogs.com/wgs-blog/p/11158706.html
Copyright © 2011-2022 走看看