自定义图片截取 React TS

组件

import React, {
     Component, FormEvent} from 'react';
import './ImgSlice.scss'
import {
     readBlobAsDataURL, setData} from "@/shared";
import {
     getImageWidth} from "@/util/tool";

let flag = false;

class ImgSlice extends Component {
     
    static propTypes: {
     };
    canvasRef!: HTMLCanvasElement;
    state: any = {
     
        imgSrc: "",
        jieTu: {
     
            width: 100,
            height: 100
        },
        imgStyle: {
     
            top: 0,
            left: 0
        },
        kuangWidth: 100,

    }
    ImgDom!: HTMLImageElement;

    async DrawImg() {
     
        let {
     canvasRef, state} = this;
        var ctx = canvasRef?.getContext('2d');
        // img,sx,sy,swidth,sheight,x,y,width,height)
        // 前两位控制 要截取图片的位置 左上y角为起点 3，4
        let x = parseInt(state.imgStyle.left);
        let y = parseInt(state.imgStyle.top);
        // console.log()
        let {
     jieTu} = this.state
        let ImgSize: any = await getImageWidth(this.ImgDom.getAttribute('src') as string);
        console.log(ImgSize.width / ImgSize.height, this.ImgDom.offsetWidth / this.ImgDom.offsetHeight);
        let k = ImgSize.width / ImgSize.height;
        let bili = ImgSize.width / this.ImgDom.offsetWidth
        console.log(k, bili)
        ctx?.drawImage(this.ImgDom, x * bili, y * bili, jieTu.width * bili, jieTu.height * bili, 0, 0, jieTu.width, jieTu.height)
    }

    async domMoveStart() {
     
        flag = true;
    }

    domMoveEnd() {
     
        flag = false;
    }

    async domMove(ev: any) {
     
        if (!flag) {
     
            return
        }
        ev.persist();
        let Dom = document.getElementsByClassName('slice-img')[0].getBoundingClientRect();
        let {
     screenY, screenX} = ev;
        let x = (screenX - Dom.left) - 0.5 * this.state.kuangWidth;
        let y = (screenY - Dom.top) - 1.5 * this.state.kuangWidth;

        let data: any = {
     
            imgStyle: {
     
                // top: `${ev.target.offsetTop + ev.movementX}px`,
                // left: `${ev.target.offsetLeft + ev.movementY}px`
                left: `${
       x}px`,
                top: `${
       y}px`,
            }
        }
        await setData.call(this, data);
    }

    async changeImg(e: FormEvent<HTMLInputElement>) {
     
        e.persist();
        let file = e.currentTarget.files ? e.currentTarget.files[0] : new File(["First Line Text", "Second Line Text"], '123');
        let res = await readBlobAsDataURL(file) as any;
        let data = {
     
            imgSrc: res.currentTarget.result
        }
        await setData.call(this, data);

    }

    render() {
     
        let {
     imgSrc, imgStyle} = this.state;
        return (
            <div>
                <input type="file" onInput={
     (e: FormEvent<HTMLInputElement>) => {
     
                    this.changeImg(e)
                }}/>
                <div className={
     'slice-img'}>
                    <img src={
     imgSrc} alt=""

                         ref={
     (ref: HTMLImageElement) => {
     
                             this.ImgDom = ref
                         }}/>
                    <canvas
                        className="slice-kuang"
                        style={
     imgStyle}
                        onMouseDown={
     (event) => {
     
                            this.domMoveStart()
                        }}
                        onMouseMove={
     (event) => {
     
                            this.domMove(event)
                        }}
                        onMouseUp={
     () => {
     
                            this.domMoveEnd()
                        }}
                        width="100" height="100" ref={
     (ref: HTMLCanvasElement) => this.canvasRef = ref}></canvas>

                </div>

                <button onClick={
     () => this.DrawImg()}>印刷</button>
            </div>
        );
    }
}

ImgSlice.propTypes = {
     };

export default ImgSlice;

ImgSlice.scss

.slice-img {
     
  position: relative;
  display: inline-block;
  border: 1px solid #ff0000;
  img{
     
    width: 500px;
    //height: 500px;
    display: block;

  }
  .slice-kuang {
     
    position: absolute;
    width:  100px;
    height: 100px;
    border: 1px solid #ff0000;
    top: 0;
    left: 0;

    //right: 50%;
    //transform: translate(50%, -50%);
  }
}

export function setData(val: any) {
     
    return new Promise((resolve, reject) => {
     
        this.setState({
     
            ...val
        }, () => {
     
            resolve()
        })
    })
}

export function readBlobAsDataURL(blob: Blob | File) {
     
    var a = new FileReader();
    return new Promise((resolve, reject) => {
     
        a.onload = function (e) {
     
            resolve(e);
        };
        a.readAsDataURL(blob);
    })


}