@felix.lsf/taro-cropper/types/components/taro-cropper/index.d.ts

Taro框架下的图片裁剪组件封装，开箱即用

import Taro, { Canvas as Cvs } from '@tarojs/taro';
import { PureComponent } from 'react';
import { BaseEventOrig } from '@tarojs/components';
interface TaroCropperComponentProps {
    cropperCanvasId: string;
    cropperCutCanvasId: string;
    width: number;
    height: number;
    cropperWidth: number;
    cropperHeight: number;
    themeColor: string;
    maxScale: number;
    fullScreen: boolean;
    fullScreenCss: boolean;
    src: string;
    onCut: (src: string) => void;
    onCancel: () => void;
    onFail: (err: any) => void;
    hideFinishText: boolean;
    hideCancelText: boolean;
    finishText: string;
    cancelText: string;
    fileType: 'jpg' | 'png' | undefined;
    quality: number;
}
interface TaroCropperComponentState {
    scale: number;
}
declare class TaroCropperComponent extends PureComponent<TaroCropperComponentProps, TaroCropperComponentState> {
    static defaultProps: {
        width: number;
        height: number;
        cropperWidth: number;
        cropperHeight: number;
        cropperCanvasId: string;
        cropperCutCanvasId: string;
        src: string;
        themeColor: string;
        maxScale: number;
        fullScreen: boolean;
        fullScreenCss: boolean;
        hideFinishText: boolean;
        hideCancelText: boolean;
        finishText: string;
        cancelText: string;
        fileType: string;
        quality: number;
        onCancel: () => void;
        onCut: () => void;
        onFail: () => void;
    };
    systemInfo: any;
    constructor(props: any);
    cropperCanvas: Cvs;
    cropperCutCanvas: Cvs;
    cropperCanvasContext: any;
    cropperCutCanvasContext: any;
    imageLeft: number;
    imageTop: number;
    imageLeftOrigin: number;
    imageTopOrigin: number;
    width: number;
    height: number;
    cropperWidth: number;
    cropperHeight: number;
    imageInfo: any;
    realImageWidth: number;
    realImageHeight: number;
    scaleImageWidth: number;
    scaleImageHeight: number;
    image: HTMLImageElement;
    imageToDraw: Taro.Image;
    /**
     * 根据props更新长等信息
     */
    updateInfo(props: TaroCropperComponentProps): Promise<unknown>;
    componentDidMount(): void;
    /**
     * 单位转换
     * @param value
     * @private
     */
    _getRealPx(value: number): number;
    /**
     * 绘制裁剪框的四个角
     * @private
     */
    _drawCropperCorner(): void;
    /**
     * 绘制裁剪框区域的图片
     * @param props
     * @param image             待绘制的图片对象
     * @param deviationX        图片绘制x向偏移
     * @param deviationY        图片绘制y向偏移
     * @param imageWidth        图片的原始宽度
     * @param imageHeight       图片的原始高度
     * @param drawWidth         图片的绘制宽度
     * @param drawHeight        图片的绘制高度
     * @param reverse
     * @private
     */
    _drawCropperContent(image: Taro.Image, deviationX: number, deviationY: number, imageWidth: number, imageHeight: number, drawWidth: number, drawHeight: number): void;
    update(): void;
    /**
     * 图片资源有更新则重新绘制
     * @param nextProps
     * @param nextContext
     */
    componentWillReceiveProps(nextProps: Readonly<TaroCropperComponentProps>, nextContext: any): void;
    /**
     * 图片移动边界检测
     * @param imageLeft
     * @param imageTop
     * @private
     */
    _outsideBound(imageLeft: number, imageTop: number): void;
    touch0X: number;
    touch0Y: number;
    oldDistance: number;
    oldScale: number;
    newScale: number;
    lastScaleImageWidth: number;
    lastScaleImageHeight: number;
    _oneTouchStart(touch: any): void;
    _twoTouchStart(touch0: any, touch1: any): void;
    _oneTouchMove(touch: any): void;
    _getNewScale(oldScale: number, oldDistance: number, touch0: any, touch1: any): number;
    _twoTouchMove(touch0: any, touch1: any): void;
    handleOnTouchEnd(): void;
    handleOnTouchStart(e: BaseEventOrig<any>): void;
    handleOnTouchMove(e: BaseEventOrig<any>): void;
    /**
     * 将当前裁剪框区域的图片导出
     */
    cut(): Promise<{
        errMsg: string;
        filePath: string;
    }>;
    render(): any;
}
export default TaroCropperComponent;