前端canvas生成满屏水印

1、为整个页面生成水印

未生成之前

生成后效果

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="1.jpg" alt="">
</body>
</html>

<script>
 (function () {
      // canvas 实现 watermark
      function __canvasWM({
        // 使用 ES6 的函数默认值方式设置参数的默认取值
        // 具体参见 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters
        container = document.body,
        width = '200px',
        height = '150px',
        textAlign = 'center',
        textBaseline = 'middle',
        font = "20px microsoft yahei",
        fillStyle = 'rgba(184, 184, 184, 0.8)',
        content = '请勿外传',
        rotate = '30',
        zIndex = 1000
      } = {}) {
 		var args = arguments[0];
        var canvas = document.createElement('canvas');
        canvas.setAttribute('width', width);
        canvas.setAttribute('height', height);
        var ctx = canvas.getContext("2d");

        ctx.textAlign = textAlign;
        ctx.textBaseline = textBaseline;
        ctx.font = font;
        ctx.fillStyle = fillStyle;
        ctx.rotate(Math.PI / 180 * rotate);
        ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);

        var base64Url = canvas.toDataURL();
        const watermarkDiv = document.createElement("div");
        watermarkDiv.setAttribute('style', `
          position:absolute;
          top:0;
          left:0;
          width:100%;
          height:100%;
          z-index:${zIndex};
          pointer-events:none;
          background-repeat:repeat;
          background-image:url('${base64Url}')`);

        container.style.position = 'relative';
        container.insertBefore(watermarkDiv, container.firstChild);
      };

      window.__canvasWM = __canvasWM;
    })();
     // 为了兼容不同的环境
    if (typeof module != 'undefined' && module.exports) {  //CMD
        module.exports = __canvasWM;
    } else if (typeof define == 'function' && define.amd) { // AMD
        define(function () {
        	return __canvasWM;
        });
    } else {
        window.__canvasWM = __canvasWM;
    }
    // 调用
    __canvasWM({
      content: '请勿外传'
    })

</script>

 

2、或者可以为单个图片右下角添加水印


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="" alt="">
</body>
</html>

<script>
  var base64Url = '';
  (function() {
      function __picWM({
        url = '',
        textAlign = 'center',
        textBaseline = 'middle',
        font = "20px Microsoft Yahei",
        fillStyle = 'rgba(184, 184, 184, 0.8)',
        content = '请勿外传',
        cb = null,
        textX = 100,
        textY = 30
      } = {}) {
        const img = new Image();
        img.src = url;
        img.crossOrigin = 'anonymous';
        img.onload = function() {
          const canvas = document.createElement('canvas');
          canvas.width = img.width;
          canvas.height = img.height;
          const ctx = canvas.getContext('2d');

          ctx.drawImage(img, 0, 0);
          ctx.textAlign = textAlign;
          ctx.textBaseline = textBaseline;
          ctx.font = font;
          ctx.fillStyle = fillStyle;
          ctx.fillText(content, img.width - textX, img.height - textY);

          const base64Url = canvas.toDataURL();
          cb && cb(base64Url);
        }
      }

      if (typeof module != 'undefined' && module.exports) {  //CMD
        module.exports = __picWM;
      } else if (typeof define == 'function' && define.amd) { // AMD
        define(function () {
          return __picWM;
        });
      } else {
        window.__picWM = __picWM;
      }
      
    })();

    // 调用
    __picWM({
        url: 'img/1.jpg',
        content: '请勿外传',
        cb: (base64Url) => {
          document.querySelector('img').src = base64Url
        },
      });
</script>

 

前端生成水印在不需要保存的情况下非常好用,但是缺点在于保存图片时水印不会跟着保存,所以这两种方式都是防止截图或只做提醒功能

php随笔

PHP 算出字符串中文个数

2018-7-13 15:15:14

工作日志随笔

window wamserver 安装 redis 拓展

2018-8-7 17:47:26

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧