react-admin-component
Version:
react library
142 lines • 6.95 kB
JavaScript
import * as tslib_1 from "tslib";
import React, { useState, useRef, useEffect, useImperativeHandle } from 'react';
import { Spin } from 'antd';
import CropperLib from 'cropperjs';
import { ModalContainer } from '..';
import Controller from './Controller';
var cropperIns;
var DEFAULT_CROPPERSIZE = 360;
var IMG_SPECTRATIO = 0;
var DEFAULT_SPECTRATIO = 450;
var DEFAULT_CROPPERCSTYLE;
var Cropper = function (_a, ref) {
var imgData = _a.imgData, children = _a.children, onCroppered = _a.onCroppered, className = _a.className, style = _a.style, onReady = _a.onReady;
var _b = useState({ width: 0, height: 0 }), cropperCStyle = _b[0], setCropperCStyle = _b[1];
var _c = useState({ width: 0, height: 0 }), cropperStyle = _c[0], setCropperStyle = _c[1];
var _d = useState(false), cropperLoading = _d[0], setCropperLoading = _d[1];
var modalRef = useRef(null);
var imgRef = useRef(null);
useImperativeHandle(ref, function () { return ({
showCropper: showCropper
}); });
useEffect(function () {
return function () {
cropperIns && cropperIns.destroy();
};
}, []);
var showCropper = function () {
if (modalRef.current) {
modalRef.current.open();
var setWH = function (lenKey1, lenKey2) {
var smallerSide = imgData[lenKey1] < imgData[lenKey2];
IMG_SPECTRATIO = +imgData[smallerSide ? lenKey2 : lenKey1] / DEFAULT_SPECTRATIO;
return smallerSide ? +imgData[lenKey1] / IMG_SPECTRATIO : DEFAULT_SPECTRATIO;
};
var cropperCH = setWH('height', 'width');
var cropperCW = setWH('width', 'height');
DEFAULT_CROPPERSIZE = cropperCH > cropperCW ? cropperCW : cropperCH;
DEFAULT_CROPPERCSTYLE = { width: cropperCW, height: cropperCH };
var timer_1 = setTimeout(function () {
setCropperCStyle(DEFAULT_CROPPERCSTYLE);
setCropperStyle({ width: DEFAULT_CROPPERSIZE, height: DEFAULT_CROPPERSIZE });
setCropperLoading(true);
clearTimeout(timer_1);
}, 0);
}
};
var initialCropper = function () {
cropperIns = new CropperLib(imgRef.current, {
aspectRatio: 1,
viewMode: 3,
zoomable: false,
minContainerHeight: DEFAULT_CROPPERCSTYLE.height,
minContainerWidth: DEFAULT_CROPPERCSTYLE.width,
ready: function () {
setCropperLoading(false);
resetCropperSize({ width: DEFAULT_CROPPERSIZE, height: DEFAULT_CROPPERSIZE });
onReady && onReady();
},
cropstart: function (_event) { },
cropend: function (_event) {
var _a = cropperIns.getCropBoxData(), width = _a.width, height = _a.height;
setCropperStyle({
width: Number(width.toFixed(0)),
height: Number(height.toFixed(0)),
});
},
});
};
function destroyCropper() {
if (!cropperIns)
return;
cropperIns.destroy();
}
function resetCropperSize(_a) {
var width = _a.width, height = _a.height;
cropperIns.setAspectRatio(width / height);
cropperIns.setCropBoxData({ width: Number(width), height: Number(height) });
}
function resetInputValue(_a) {
var width = _a.width, height = _a.height;
var calculate = function (size) { return Number((size * IMG_SPECTRATIO).toFixed(0)); };
return {
width: calculate(width),
height: calculate(height),
};
}
function onOk() {
if (modalRef.current) {
modalRef.current.close();
}
var canvasStyle = resetInputValue(cropperIns.getCropBoxData());
var canvasTemp = cropperIns.getCroppedCanvas(canvasStyle);
var image = new Image();
image.setAttribute('crossOrigin', 'anonymous');
image.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = canvasStyle.width;
canvas.height = canvasStyle.height;
var ctx = canvas.getContext('2d');
ctx && ctx.drawImage(image, 0, 0, canvasStyle.width, canvasStyle.height);
onCroppered && onCroppered(canvas);
destroyCropper();
};
image.src = canvasTemp.toDataURL('image/jpeg');
}
function changeAspectRatio(ratio) {
function setNewCropBox(judge) {
var _a;
if (judge === void 0) { judge = cropperCStyle.width >= cropperCStyle.height; }
var orderedKey = judge
? ['width', 'height']
: ['height', 'width'];
cropperIns.setAspectRatio(ratio.width / ratio.height);
return _a = {},
_a[orderedKey[1]] = cropperCStyle[orderedKey[1]],
_a[orderedKey[0]] = (cropperCStyle[orderedKey[1]] * ratio[orderedKey[0]]) / ratio[orderedKey[1]],
_a;
}
var newCropBoxData = setNewCropBox();
if (newCropBoxData.width > cropperCStyle.width ||
newCropBoxData.height > cropperCStyle.height) {
newCropBoxData = setNewCropBox(cropperCStyle.width < cropperCStyle.height);
}
cropperIns.setCropBoxData(newCropBoxData);
return { width: newCropBoxData.width, height: newCropBoxData.height };
}
return (React.createElement(React.Fragment, null,
children && React.createElement("div", { onClick: showCropper }, children),
React.createElement(ModalContainer, { title: "\u56FE\u7247\u88C1\u526A", onOk: onOk, ref: modalRef, style: tslib_1.__assign({ width: '80%', maxWidth: 946 }, style), onCancel: destroyCropper, className: className, destroyOnClose: true },
React.createElement(Spin, { spinning: cropperLoading },
React.createElement("div", { style: tslib_1.__assign({}, cropperCStyle, { margin: '0 auto', textAlign: 'center' }) },
React.createElement("img", { id: "cropper_img", ref: imgRef, style: tslib_1.__assign({}, cropperCStyle), alt: "\u88C1\u526A\u56FE\u7247", src: imgData.imgUrl, onLoad: initialCropper })),
cropperStyle.width && (React.createElement(Controller, tslib_1.__assign({}, {
imgData: imgData,
IMG_SPECTRATIO: IMG_SPECTRATIO,
resetCropperSize: resetCropperSize,
resetInputValue: resetInputValue,
initialValue: resetInputValue(cropperStyle),
}, { onSelectChange: changeAspectRatio, cropperIns: cropperIns })))))));
};
export default React.forwardRef(Cropper);
//# sourceMappingURL=index.js.map