放大镜拾色器vue+typescript+canvas

最近有项目需要用到放大镜拾色器，在网上找了很久都没有找到相关的实现案例。
于是就自己动手开发了一个。
下面给大家分享一下实现的方法和具体的源码，颜色是可以看看具体色号的。

效果图片加粗样式

代码

<template>
  <div class="color-pick-up-home" ref="colorPickerView">
    <img class="logo" src="../assets/logo.png" />
    <div class="color-picker">
      <div class="color-picker-icon" @click="pickColor()"></div>
      <div class="color-picker-text">拾色器</div>
      <div class="pick-color" :style="pickUpColor"></div>
    </div>

    <div :style="magnifyBox" v-show="isShow" class="magnify-box">
      <div class="line-vertical"></div>
      <canvas id="painter" width="180" height="180" margin="2px"></canvas>
    </div>
  </div>
</template>

import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import html2canvas from "html2canvas";

@Component
export default class ColorPickUp extends Vue {
  @Prop({
    type: Object,
    default: null
  })
  private elDiv!: any;

  @Prop({
    type: Object,
    default: () => ({
      r: 255,
      g: 255,
      b: 255,
      a: 255
    })
  })
  private rgbaInfo!: { r: number; g: number; b: number; a: number };
  private moveX = 0;
  private moveY = 0;
  private imgSource!: any;
  private isShow = false;
  private dTop!: number;
  private dLeft!: number;
  private dWidth!: number;
  private dHeight!: number;
  private htmlUrl: any = null;
  private imagelUrl!: any;
  private elTop!: number;
  private elLeft!: number;
  private elWidth!: number;
  private elHeight!: number;
  private wRatio!: number;
  private hRatio!: number;
  private pickColorFlag = false;
  private griddingImage!: any;
  private griImg!: any;

  @Emit("colorSend") send(colorInfo: any) {
    console.log("colorInfo");
  }
  get magnifyBox() {
    return {
      position: "fixed",
      zIndex: 1,
      width: "180px",
      height: "180px",
      left: `${this.moveX}px`,
      top: `${this.moveY}px`,
      background: "#ffffff",
      border: "2px solid #ffffff",
      overflow: "hidden",
      "border-radius": "50%"
    };
  } //放大镜

  get pickUpColor() {
    let info = this.rgbaInfo;
    let a = 255;

    return {
      background: `rgba(${info.r}, ${info.g}, ${info.b}, ${info.a / a}) `
    };
  } //获取当前颜色

  mounted() {
    this.drawGridding();
    this.drawImage();
  }

  //获取颜色的实现方法
  pickColor() {
    this.isShow = true;
    let elIcon: any;
    if (this.elDiv === null) {
      elIcon = document.body;
    } else {
      elIcon = this.elDiv;
    }

    this.elTop = elIcon.getBoundingClientRect().top;
    this.elLeft = elIcon.getBoundingClientRect().left;
    this.elWidth = elIcon.getBoundingClientRect().width;
    this.elHeight = elIcon.getBoundingClientRect().height * 3; //图片与实际大小出现了偏差，这里需要放大3倍

    html2canvas(elIcon, {
      backgroundColor: null,
      useCORS: true
      // tslint:disable-next-line:ter-arrow-parens
    }).then(canvas => {
      this.imagelUrl = canvas.toDataURL("image/png");
    });
    this.imgSource = new Image(this.elWidth, this.elHeight);
    this.imgSource.src = this.imagelUrl;
    this.griImg = new Image(this.elWidth, this.elHeight);
    this.griImg.src = this.griddingImage;
    this.imgSource.onload = () => {
      this.wRatio = this.imgSource.naturalWidth / this.elWidth;
      this.hRatio = this.imgSource.naturalHeight / this.elHeight;
      let moveCb = (e: MouseEvent) => {
        this.isShow = true;
        let canvas = document.getElementById("painter") as HTMLCanvasElement;
        let ctx = canvas.getContext("2d");
        let off = 90;
        this.moveX = e.clientX - off;
        this.moveY = e.clientY - off;
        if (ctx) {
          ctx.clearRect(0, 0, this.elWidth, this.elHeight);
          ctx.closePath();
          ctx.drawImage(
            this.imgSource as any,
            (e.clientX - off - this.elLeft + 2 + (off * 7) / 8) * this.wRatio,
            (e.clientY - off - this.elTop + 2 + (off * 7) / 8) * this.hRatio,
            off * 2 * this.wRatio,
            off * 2 * this.hRatio,
            0,
            0,
            off * 16,
            off * 16
          );
          ctx.beginPath();
          for (let i = 0; i < 16; i += 1) {
            ctx.moveTo(0, 15.5 + i * 10);
            ctx.lineTo(180, 15.5 + i * 10);
          }
          for (let j = 0; j < 16; j += 1) {
            ctx.moveTo(15.5 + j * 10, 0);
            ctx.lineTo(15.5 + j * 10, 180);
          }
          ctx.stroke();
          ctx.lineWidth = 1;
          ctx.strokeStyle = "#000000";
          ctx.closePath();
          ctx.beginPath();
          ctx.moveTo(85.5, 85.5);
          ctx.lineTo(95.5, 85.5);
          ctx.lineTo(95.5, 95.5);
          ctx.lineTo(85.5, 95.5);
          ctx.lineTo(85.5, 85.5);
          ctx.stroke();
          ctx.strokeStyle = "#999999";
          ctx.lineWidth = 1;
          ctx.closePath();
        }
      };
      let upCb = (e: MouseEvent) => {
        let canvas = document.getElementById("painter") as HTMLCanvasElement;
        let ctx = canvas.getContext("2d");
        let a = 180;
        if (ctx) {
          let info = ctx.getImageData(a / 2, a / 2, 1, 1).data;
          this.rgbaInfo.r = info[0];
          this.rgbaInfo.g = info[1];
          this.rgbaInfo.b = info[2];
          this.rgbaInfo.a = info[3];
        }
        this.isShow = false;
        document.removeEventListener("mousemove", moveCb);
        document.removeEventListener("mouseup", upCb);
        this.send(this.rgbaInfo);
        let info = this.rgbaInfo;
      };
      document.addEventListener("mousemove", moveCb);
      document.addEventListener("mouseup", upCb);
    };
  }
  //绘制放大镜
  drawGridding() {
    let canvas = document.querySelector("#painter") as HTMLCanvasElement;
    let ctx = canvas.getContext("2d");
    if (ctx) {
      for (let i = 0; i < 8; i += 1) {
        // tslint:disable-next-line:no-magic-numbers
        ctx.moveTo(0, 20.5 + i * 20);
        // tslint:disable-next-line:no-magic-numbers
        ctx.lineTo(180, 20.5 + i * 20);
        ctx.stroke();
      }
      for (let j = 0; j < 8; j += 1) {
        // tslint:disable-next-line:no-magic-numbers
        ctx.moveTo(20.5 + j * 20, 0);
        // tslint:disable-next-line:no-magic-numbers
        ctx.lineTo(20.5 + j * 20, 180);
        ctx.stroke();
      }
      ctx.lineWidth = 1;
      ctx.strokeStyle = "#999999";
    }
    this.griddingImage = canvas.toDataURL("image/png"); //canvas绘制字体转base64
  }
  //绘制图片
  drawImage() {
    let elIcon: any;
    if (this.elDiv === null) {
      elIcon = document.body;
    } else {
      elIcon = this.elDiv;
    }
    this.elTop = elIcon.getBoundingClientRect().top;
    this.elLeft = elIcon.getBoundingClientRect().left;
    this.elWidth = elIcon.getBoundingClientRect().width;
    this.elHeight = elIcon.getBoundingClientRect().height;
    html2canvas(elIcon, {
      backgroundColor: null,
      useCORS: true
      // tslint:disable-next-line:ter-arrow-parens
    }).then(canvas => {
      this.imagelUrl = canvas.toDataURL("image/png");
    });
    this.imgSource = new Image(this.elWidth, this.elHeight);
    this.imgSource.src = this.imagelUrl;

    this.imgSource.onload = () => {
      this.wRatio = this.imgSource.naturalWidth / this.elWidth;
      this.hRatio = this.imgSource.naturalHeight / this.elHeight;
    };
  }
}

项目源码: link.