react-xiguan

import { useState } from 'react';
import html2canvas from 'html2canvas';

function $(id) {
  return document.getElementById(id);
}

function useXiguan(props) {
  //  xiguan  点击按钮
  // content 截屏内容载体
  // root 移动根容器
  // sucker 移动的圈
  const { xiguan, content, root, sucker } = props;
  const btn = $(xiguan);
  const con = $(content);
  const rt = $(root);
  const sur = $(sucker);
  const [px, setPx] = useState([]);
  const [centerpx, setCenterpx] = useState([]);
  // 截屏功能
  async function handlecanvas() {
    window.pageYOffset = 0;
    document.documentElement.scrollTop = 0
    document.body.scrollTop = 0
    return await html2canvas(rt,
      {
        width: rt.offsetWidth,
        height: rt.offsetHeight,
        scale: 1,
        removeContainer: true,
        useCORS: true, // 开启跨域
        scrollY: 0,
        scrollX: 0,
        logging: false,
        ignoreElements: (el) => {
          if (el.id === `${xiguan}`) {
            return true;
          }
          return false;
        }
      })
  }
  const onClick = () => {
    //  截屏并保存图像到canvas;
    clearMove();
    handlecanvas().then((canvas) => {
      const img = new Image();
      img.src = canvas.toDataURL('image/png');
      img.width = rt.offsetWidth;
      img.height = rt.offsetHeight;
      img.onload = function () {
        const ctx2 = con.getContext("2d");
        con.width = rt.offsetWidth;
        con.height = rt.offsetHeight;
        ctx2.drawImage(img, 0, 0);
      }
      img.onerror = function () {
          btn.click();
      }
      const rw = rt.offsetWidth;
      const rh = rt.offsetHeight;
      const rlt = rt.offsetLeft;
      const rtp = rt.offsetTop;
      const sw = 55;
      rt.onmousemove = function (e) {
        console.log('move');
        if (this.time && (Date.now() - this.time) < 16) return;
        this.time = Date.now();
        let [x, y] = [e.clientX - rlt, e.clientY - rtp];
        const ctx = con.getContext('2d');
        const pxData = ctx.getImageData(x - 11, y - 11, 11, 11)?.data || [];
        const px1 = [];
        const px2 = [];
        for (let i = 0; i < 121; i++) {
          let r = pxData[4 * i + 0];
          let g = pxData[4 * i + 1];
          let b = pxData[4 * i + 2];
          let a = pxData[4 * i + 3]
          if (i === 60) { // center data
            px2.push({
              r, g, b, a
            })
          }
          // round data
          px1.push({
            r, g, b, a
          })
        }
        //定义鼠标在glass的中心 ，最大宽度减去元素本身一半。
        x = x - sw;
        y = y - sw;
        if (x < - sw / 2) {
          x = - sw / 2;//用来判断在原点位置时x轴是否会溢出，这里是左边
        }
        if (y < - sw / 2) {
          y = - sw / 2;//用来判断在原点位置时y轴是否会溢出，这里是右边
        }

        let maxX = rw + sw;

        //定义glass在X轴可运动的最大范围
        if (x > maxX) {
          x = maxX; //如果大于，就让它等于
        }
        let maxY = rh + sw;
        //定义glass在Y轴可运动的最大范围
        if (y > maxY) {
          y = maxY; //如果大于，就让它等于
        }
        [sur.style.left, sur.style.top] = [x + "px", y + "px"];
        setPx(px1);
        setCenterpx(px2);
      }
    })
  }
  function clearMove() {
    rt.onmousemove = null;
  }
  return [onClick, px, centerpx, clearMove]

}

export default useXiguan;

 

import { useState } from 'react';
import html2canvas from 'html2canvas';

function $(id) {
  return document.getElementById(id);
}

function useXiguan(props) {
  //  xiguan  点击按钮
  // content 截屏内容载体
  // root 移动根容器
  // sucker 移动的圈
  const { xiguan, content, root, sucker } = props;
  const btn = $(xiguan);
  const con = $(content);
  const rt = $(root);
  const sur = $(sucker);
  const [px, setPx] = useState([]);
  const [centerpx, setCenterpx] = useState([]);
  // 截屏功能
  async function handlecanvas() {
    window.pageYOffset = 0;
    document.documentElement.scrollTop = 0
    document.body.scrollTop = 0
    return await html2canvas(rt,
      {
        width: rt.offsetWidth,
        height: rt.offsetHeight,
        scale: 1,
        removeContainer: true,
        useCORS: true, // 开启跨域
        scrollY: 0,
        scrollX: 0,
        logging: false,
        ignoreElements: (el) => {
          if (el.id === `${xiguan}`) {
            return true;
          }
          return false;
        }
      })
  }
  const onClick = () => {
    //  截屏并保存图像到canvas;
    clearMove();
    handlecanvas().then((canvas) => {
      const img = new Image();
      img.src = canvas.toDataURL('image/png');
      img.width = rt.offsetWidth;
      img.height = rt.offsetHeight;
      img.onload = function () {
        const ctx2 = con.getContext("2d");
        con.width = rt.offsetWidth;
        con.height = rt.offsetHeight;
        ctx2.drawImage(img, 0, 0);
      }
      img.onerror = function () {
          btn.click();
      }

      rt.onmousemove = function (e) {
        window.requestAnimationFrame(move.bind(null,e));
      }
    })
  }
  function move(e) {
    const rw = rt.offsetWidth;
    const rh = rt.offsetHeight;
    const rlt = rt.offsetLeft;
    const rtp = rt.offsetTop;
    const sw = 55;
    let [x, y] = [e.clientX - rlt, e.clientY - rtp];
    const ctx = con.getContext('2d');
    const pxData = ctx.getImageData(x - 11, y - 11, 11, 11)?.data || [];
    const px1 = [];
    const px2 = [];
    for (let i = 0; i < 121; i++) {
      let r = pxData[4 * i + 0];
      let g = pxData[4 * i + 1];
      let b = pxData[4 * i + 2];
      let a = pxData[4 * i + 3]
      if (i === 60) { // center data
        px2.push({
          r, g, b, a
        })
      }
      // round data
      px1.push({
        r, g, b, a
      })
    }
    //定义鼠标在glass的中心 ，最大宽度减去元素本身一半。
    x = x - sw;
    y = y - sw;
    if (x < - sw / 2) {
      x = - sw / 2;//用来判断在原点位置时x轴是否会溢出，这里是左边
    }
    if (y < - sw / 2) {
      y = - sw / 2;//用来判断在原点位置时y轴是否会溢出，这里是右边
    }

    let maxX = rw + sw;

    //定义glass在X轴可运动的最大范围
    if (x > maxX) {
      x = maxX; //如果大于，就让它等于
    }
    let maxY = rh + sw;
    //定义glass在Y轴可运动的最大范围
    if (y > maxY) {
      y = maxY; //如果大于，就让它等于
    }
    [sur.style.left, sur.style.top] = [x + "px", y + "px"];
    setPx(px1);
    setCenterpx(px2);
  }
  function clearMove() {
    rt.onmousemove = null;
  }
  return [onClick, px, centerpx, clearMove]

}

export default useXiguan;