前端水印生成

最新推荐文章于 2024-07-28 18:26:16 发布

weixin_33738555

最新推荐文章于 2024-07-28 18:26:16 发布

阅读量152

点赞数

文章标签：前端 javascript ViewUI

原文链接：https://my.oschina.net/18y/blog/1862664

版权

为什么80%的码农都做不了架构师？>>>

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>

前端生成水印的缺点在于保存图片时水印不会跟着保存，所以这两种方式都是防止截图或只做提醒功能

QQ音乐前端博客原文地址

转载于:https://my.oschina.net/18y/blog/1862664