简单的js图片加水印

最新推荐文章于 2024-05-16 09:14:17 发布

蓝格子.

最新推荐文章于 2024-05-16 09:14:17 发布

阅读量631

点赞数 3

分类专栏： js图片操作文章标签： HTML5 Canvas 水印图片处理 JavaScript

本文链接：https://blog.csdn.net/qq_35168861/article/details/116029790

版权

js图片操作专栏收录该内容

9 篇文章 1 订阅

订阅专栏

简单的图片加水印
原图：
在这里插入图片描述

处理完的图片：
在这里插入图片描述

直接贴代码，记录一下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>加水印</title>
</head>

<body>
  <input type="file" name="" id="imgFile"><br>
  原图：
  <img class="img1" src="" alt="">
  <br>
  水印图：
  <img class="img2" src="" alt="">
  <canvas id="canvas" width="400" height="600" style="display: none;"></canvas>
</body>

</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  // 水印处理方法
  function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }

  function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

  function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

  var Watermark = /*#__PURE__*/function () {
    // 画板
    // 需要处理的图片
    function Watermark(canvas, image) {
      _classCallCheck(this, Watermark);

      _defineProperty(this, "canvas", null);

      _defineProperty(this, "ctx", null);

      _defineProperty(this, "image", null);

      if (_instanceof(!canvas, HTMLCanvasElement)) {
        throw new Error('canvas is not Canvas Element');
      }

      this.canvas = canvas;
      this.ctx = this.canvas.getContext('2d'); // 图片可以后期推送

      if (_instanceof(image, HTMLImageElement)) {
        this.initCanvas(image);
      }
    } // 加载远程图片


    _createClass(Watermark, [{
      key: "loadImg",
      value: function loadImg(src) {
        var _this = this;

        return new Promise(function (resolve, reject) {
          var img = new Image();

          img.onload = function (event) {
            _this.initCanvas(event.target);

            resolve(_this);
          };

          img.src = src;
        });
      } // 初始化画板

    }, {
      key: "initCanvas",
      value: function initCanvas(image) {
        if (_instanceof(image, HTMLImageElement)) {
          this.image = image;
        }

        if (_instanceof(!this.image, HTMLImageElement)) {
          throw new Error('No valid image provided');
        } // 设置画板宽高


        var height = this.image.height,
          width = this.image.width,
          ratio = 1;

        if (height > 800 || width > 800) {
          var height_ratio = 800 / height,
            width_ratio = 800 / width;
          ratio = height_ratio < width_ratio ? height_ratio : width_ratio;
          height *= ratio;
          width *= ratio;
        }

        this.canvas.height = height;
        this.canvas.width = width; // 输出 图片

        this.ctx.scale(ratio, ratio);
        this.ctx.drawImage(this.image, 0, 0);
        this.ctx.scale(1 / ratio, 1 / ratio);
      } // 设置文字样式

    }, {
      key: "setStyle",
      value: function setStyle(font) {
        this.ctx.font = font;
      } // 设置文字

    }, {
      key: "setContent",
      value: function setContent(content, small) {
        // 重新设置图片
        this.initCanvas(); // 设置默认样式

        this.setStyle("16px Arial");
        this.ctx.globalAlpha = 1;
        this.ctx.fillStyle = "rgba(0,0,0,.3)"; // 测试输出文字宽度

        var width = this.ctx.measureText(content).width; // 围绕图片中心设置旋转

        this.ctx.rotate(-20 * Math.PI / 180); // 循环设置水印

        for (var x = -1 * this.canvas.width; x < (this.canvas.width + this.canvas.height) * 2; x += 120) {
          for (var y = -1 * this.canvas.height - x * width * 0.5; y < (this.canvas.width + this.canvas.height) * 2; y += width + 66) {
            this.ctx.fillText(content, y, x);
          }
        } // 还原旋转


        this.ctx.rotate(20 * Math.PI / 180);
        if (!small) return; // 再次随机添加细碎小文字

        this.setStyle("12px Microsoft YaHei MingLiU Arial");
        this.ctx.globalAlpha = 0.15;
        this.ctx.fillStyle = "#ddd"; // 测试输出文字宽度

        width = this.ctx.measureText(content).width; // 循环设置水印

        for (var _x = 0, i = 0; _x < this.canvas.width; _x += 36, i++) {
          for (var _y = -1 * (i % 2 == 1 ? width / 2 : 0); _y < this.canvas.height + width; _y += width + 60) {
            this.ctx.fillText(content, _y, _x);
          }
        }
      }
    }]);

    return Watermark;
  }(); // 加载远程图片
  // canvas转base64
  function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
  }
  var app = new Watermark(document.querySelector('#canvas'));
  $("#imgFile").change(function (e) {
    console.log(e)
    let imgf = e.target.files[0];
    let reader = new FileReader();
    reader.readAsDataURL(imgf);
    reader.onload = function (e) {
      $(".img1").attr("src", this.result)
      app.loadImg(this.result).then(function (app) {
        app.setContent("china no 1,china no 1", false);
        let canvas = document.querySelector('#canvas');
        $(".img2").attr("src", convertCanvasToImage(canvas).getAttribute("src"));
      });
    }
  })
</script>

代码直接复制下来就可以用的，里面的一些设置可以自行调整，例如：字体大小，颜色，间距，倾斜角度等
之前还另外手写过一个图片加水印的功能：https://www.onlinedo.cn/img-shuiyin

蓝格子.

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
简单的js图片加水印

简单的图片加水印原图：处理完的图片：直接贴代码，记录一下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>加水印</title></head><b
复制链接

扫一扫

专栏目录