antd-img-crop 4.0.2 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/antd-img-crop.cjs.js +30 -43
  2. package/dist/antd-img-crop.esm.js +31 -44
  3. package/package.json +9 -9
package/dist/antd-img-crop.cjs.js CHANGED
@@ -200,12 +200,10 @@ var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
200
200
  cropperProps = props.cropperProps,
201
201
  children = props.children;
202
202
  var cb = React.useRef({});
203
- React.useEffect(function () {
204
- cb.current.onModalOk = onModalOk;
205
- cb.current.onModalCancel = onModalCancel;
206
- cb.current.beforeCrop = beforeCrop;
207
- cb.current.onUploadFail = onUploadFail;
208
- }, [beforeCrop, onModalCancel, onModalOk, onUploadFail]);
203
+ cb.current.onModalOk = onModalOk;
204
+ cb.current.onModalCancel = onModalCancel;
205
+ cb.current.beforeCrop = beforeCrop;
206
+ cb.current.onUploadFail = onUploadFail;
209
207
  /**
210
208
  * Upload
211
209
  */
@@ -330,62 +328,51 @@ var ImgCrop = /*#__PURE__*/React.forwardRef(function (props, ref) {
330
328
  onClose();
331
329
  }, []);
332
330
  var onOk = React.useCallback( /*#__PURE__*/_asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee3() {
333
- var rawImg, _cropPixelsRef$curren, cropWidth, cropHeight, cropX, cropY, canvas, ctx, rawWidth, rawHeight, boxSize, imgWidth, imgHeight, ratio, half, imgX, imgY, rotatedImg, _fileRef$current, type, name, uid, onBlob;
331
+ var canvas, ctx, imgSource, _cropPixelsRef$curren, cropWidth, cropHeight, cropX, cropY, imgWidth, imgHeight, angle, sine, cosine, squareWidth, squareHeight, squareHalfWidth, squareHalfHeight, imgX, imgY, imgData, _fileRef$current, type, name, uid, onBlob;
334
332
 
335
333
  return _regeneratorRuntime__default["default"].wrap(function _callee3$(_context3) {
336
334
  while (1) {
337
335
  switch (_context3.prev = _context3.next) {
338
336
  case 0:
339
337
  onClose();
340
- rawImg = document.querySelector("." + cls + "-media");
341
- _cropPixelsRef$curren = cropPixelsRef.current, cropWidth = _cropPixelsRef$curren.width, cropHeight = _cropPixelsRef$curren.height, cropX = _cropPixelsRef$curren.x, cropY = _cropPixelsRef$curren.y;
342
338
  canvas = document.createElement('canvas');
343
339
  ctx = canvas.getContext('2d');
340
+ imgSource = document.querySelector("." + cls + "-media");
341
+ _cropPixelsRef$curren = cropPixelsRef.current, cropWidth = _cropPixelsRef$curren.width, cropHeight = _cropPixelsRef$curren.height, cropX = _cropPixelsRef$curren.x, cropY = _cropPixelsRef$curren.y;
344
342
 
345
343
  if (rotate && rotateValRef.current !== INIT_ROTATE) {
346
- // make canvas to cover the rotated image
347
- rawWidth = rawImg.naturalWidth, rawHeight = rawImg.naturalHeight;
348
- boxSize = Math.sqrt(Math.pow(rawWidth, 2) + Math.pow(rawHeight, 2));
349
- imgWidth = rawWidth;
350
- imgHeight = rawHeight; // fit the long image
351
-
352
- if (boxSize > 4096) {
353
- ratio = 4096 / boxSize;
354
- boxSize = 4096;
355
- imgWidth = rawWidth * ratio;
356
- imgHeight = rawHeight * ratio;
357
- cropWidth = cropWidth * ratio;
358
- cropHeight = cropHeight * ratio;
359
- cropX = cropX * ratio;
360
- cropY = cropY * ratio;
361
- }
362
-
363
- canvas.width = boxSize;
364
- canvas.height = boxSize; // rotate image
365
-
366
- half = boxSize / 2;
367
- ctx.translate(half, half);
368
- ctx.rotate(Math.PI / 180 * rotateValRef.current);
369
- ctx.translate(-half, -half); // draw rotated image to canvas center
370
-
344
+ imgWidth = imgSource.naturalWidth, imgHeight = imgSource.naturalHeight;
345
+ angle = rotateValRef.current * (Math.PI / 180); // get container for rotated image
346
+
347
+ sine = Math.abs(Math.sin(angle));
348
+ cosine = Math.abs(Math.cos(angle));
349
+ squareWidth = imgWidth * cosine + imgHeight * sine;
350
+ squareHeight = imgHeight * cosine + imgWidth * sine;
351
+ canvas.width = squareWidth;
352
+ canvas.height = squareHeight;
371
353
  ctx.fillStyle = fillColor;
372
- ctx.fillRect(0, 0, boxSize, boxSize);
373
- imgX = (boxSize - imgWidth) / 2;
374
- imgY = (boxSize - imgHeight) / 2;
375
- ctx.drawImage(rawImg, 0, 0, rawWidth, rawHeight, imgX, imgY, imgWidth, imgHeight);
376
- rotatedImg = ctx.getImageData(0, 0, boxSize, boxSize); // resize canvas to crop size
354
+ ctx.fillRect(0, 0, squareWidth, squareHeight); // rotate container
377
355
 
356
+ squareHalfWidth = squareWidth / 2;
357
+ squareHalfHeight = squareHeight / 2;
358
+ ctx.translate(squareHalfWidth, squareHalfHeight);
359
+ ctx.rotate(angle);
360
+ ctx.translate(-squareHalfWidth, -squareHalfHeight); // draw rotated image
361
+
362
+ imgX = (squareWidth - imgWidth) / 2;
363
+ imgY = (squareHeight - imgHeight) / 2;
364
+ ctx.drawImage(imgSource, 0, 0, imgWidth, imgHeight, imgX, imgY, imgWidth, imgHeight); // crop rotated image
365
+
366
+ imgData = ctx.getImageData(0, 0, squareWidth, squareHeight);
378
367
  canvas.width = cropWidth;
379
368
  canvas.height = cropHeight;
380
- ctx.fillStyle = fillColor;
381
- ctx.fillRect(0, 0, cropWidth, cropHeight);
382
- ctx.putImageData(rotatedImg, -(imgX + cropX), -(imgY + cropY));
369
+ ctx.putImageData(imgData, -cropX, -cropY);
383
370
  } else {
384
371
  canvas.width = cropWidth;
385
372
  canvas.height = cropHeight;
386
373
  ctx.fillStyle = fillColor;
387
374
  ctx.fillRect(0, 0, cropWidth, cropHeight);
388
- ctx.drawImage(rawImg, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
375
+ ctx.drawImage(imgSource, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
389
376
  } // get the new image
390
377
 
391
378
 
package/dist/antd-img-crop.esm.js CHANGED
@@ -14,7 +14,7 @@ import _asyncToGenerator from '@babel/runtime/helpers/esm/asyncToGenerator';
14
14
  import _extends from '@babel/runtime/helpers/esm/extends';
15
15
  import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
16
16
  import _regeneratorRuntime from '@babel/runtime/regenerator';
17
- import React, { forwardRef, useRef, useEffect, useState, useMemo, useCallback, memo } from 'react';
17
+ import React, { forwardRef, useRef, useState, useMemo, useCallback, memo, useEffect } from 'react';
18
18
  import Cropper from 'react-easy-crop';
19
19
  import LocaleReceiver from 'antd/es/locale-provider/LocaleReceiver';
20
20
  import AntModal from 'antd/es/modal';
@@ -184,12 +184,10 @@ var ImgCrop = /*#__PURE__*/forwardRef(function (props, ref) {
184
184
  cropperProps = props.cropperProps,
185
185
  children = props.children;
186
186
  var cb = useRef({});
187
- useEffect(function () {
188
- cb.current.onModalOk = onModalOk;
189
- cb.current.onModalCancel = onModalCancel;
190
- cb.current.beforeCrop = beforeCrop;
191
- cb.current.onUploadFail = onUploadFail;
192
- }, [beforeCrop, onModalCancel, onModalOk, onUploadFail]);
187
+ cb.current.onModalOk = onModalOk;
188
+ cb.current.onModalCancel = onModalCancel;
189
+ cb.current.beforeCrop = beforeCrop;
190
+ cb.current.onUploadFail = onUploadFail;
193
191
  /**
194
192
  * Upload
195
193
  */
@@ -314,62 +312,51 @@ var ImgCrop = /*#__PURE__*/forwardRef(function (props, ref) {
314
312
  onClose();
315
313
  }, []);
316
314
  var onOk = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
317
- var rawImg, _cropPixelsRef$curren, cropWidth, cropHeight, cropX, cropY, canvas, ctx, rawWidth, rawHeight, boxSize, imgWidth, imgHeight, ratio, half, imgX, imgY, rotatedImg, _fileRef$current, type, name, uid, onBlob;
315
+ var canvas, ctx, imgSource, _cropPixelsRef$curren, cropWidth, cropHeight, cropX, cropY, imgWidth, imgHeight, angle, sine, cosine, squareWidth, squareHeight, squareHalfWidth, squareHalfHeight, imgX, imgY, imgData, _fileRef$current, type, name, uid, onBlob;
318
316
 
319
317
  return _regeneratorRuntime.wrap(function _callee3$(_context3) {
320
318
  while (1) {
321
319
  switch (_context3.prev = _context3.next) {
322
320
  case 0:
323
321
  onClose();
324
- rawImg = document.querySelector("." + cls + "-media");
325
- _cropPixelsRef$curren = cropPixelsRef.current, cropWidth = _cropPixelsRef$curren.width, cropHeight = _cropPixelsRef$curren.height, cropX = _cropPixelsRef$curren.x, cropY = _cropPixelsRef$curren.y;
326
322
  canvas = document.createElement('canvas');
327
323
  ctx = canvas.getContext('2d');
324
+ imgSource = document.querySelector("." + cls + "-media");
325
+ _cropPixelsRef$curren = cropPixelsRef.current, cropWidth = _cropPixelsRef$curren.width, cropHeight = _cropPixelsRef$curren.height, cropX = _cropPixelsRef$curren.x, cropY = _cropPixelsRef$curren.y;
328
326
 
329
327
  if (rotate && rotateValRef.current !== INIT_ROTATE) {
330
- // make canvas to cover the rotated image
331
- rawWidth = rawImg.naturalWidth, rawHeight = rawImg.naturalHeight;
332
- boxSize = Math.sqrt(Math.pow(rawWidth, 2) + Math.pow(rawHeight, 2));
333
- imgWidth = rawWidth;
334
- imgHeight = rawHeight; // fit the long image
335
-
336
- if (boxSize > 4096) {
337
- ratio = 4096 / boxSize;
338
- boxSize = 4096;
339
- imgWidth = rawWidth * ratio;
340
- imgHeight = rawHeight * ratio;
341
- cropWidth = cropWidth * ratio;
342
- cropHeight = cropHeight * ratio;
343
- cropX = cropX * ratio;
344
- cropY = cropY * ratio;
345
- }
346
-
347
- canvas.width = boxSize;
348
- canvas.height = boxSize; // rotate image
349
-
350
- half = boxSize / 2;
351
- ctx.translate(half, half);
352
- ctx.rotate(Math.PI / 180 * rotateValRef.current);
353
- ctx.translate(-half, -half); // draw rotated image to canvas center
354
-
328
+ imgWidth = imgSource.naturalWidth, imgHeight = imgSource.naturalHeight;
329
+ angle = rotateValRef.current * (Math.PI / 180); // get container for rotated image
330
+
331
+ sine = Math.abs(Math.sin(angle));
332
+ cosine = Math.abs(Math.cos(angle));
333
+ squareWidth = imgWidth * cosine + imgHeight * sine;
334
+ squareHeight = imgHeight * cosine + imgWidth * sine;
335
+ canvas.width = squareWidth;
336
+ canvas.height = squareHeight;
355
337
  ctx.fillStyle = fillColor;
356
- ctx.fillRect(0, 0, boxSize, boxSize);
357
- imgX = (boxSize - imgWidth) / 2;
358
- imgY = (boxSize - imgHeight) / 2;
359
- ctx.drawImage(rawImg, 0, 0, rawWidth, rawHeight, imgX, imgY, imgWidth, imgHeight);
360
- rotatedImg = ctx.getImageData(0, 0, boxSize, boxSize); // resize canvas to crop size
338
+ ctx.fillRect(0, 0, squareWidth, squareHeight); // rotate container
361
339
 
340
+ squareHalfWidth = squareWidth / 2;
341
+ squareHalfHeight = squareHeight / 2;
342
+ ctx.translate(squareHalfWidth, squareHalfHeight);
343
+ ctx.rotate(angle);
344
+ ctx.translate(-squareHalfWidth, -squareHalfHeight); // draw rotated image
345
+
346
+ imgX = (squareWidth - imgWidth) / 2;
347
+ imgY = (squareHeight - imgHeight) / 2;
348
+ ctx.drawImage(imgSource, 0, 0, imgWidth, imgHeight, imgX, imgY, imgWidth, imgHeight); // crop rotated image
349
+
350
+ imgData = ctx.getImageData(0, 0, squareWidth, squareHeight);
362
351
  canvas.width = cropWidth;
363
352
  canvas.height = cropHeight;
364
- ctx.fillStyle = fillColor;
365
- ctx.fillRect(0, 0, cropWidth, cropHeight);
366
- ctx.putImageData(rotatedImg, -(imgX + cropX), -(imgY + cropY));
353
+ ctx.putImageData(imgData, -cropX, -cropY);
367
354
  } else {
368
355
  canvas.width = cropWidth;
369
356
  canvas.height = cropHeight;
370
357
  ctx.fillStyle = fillColor;
371
358
  ctx.fillRect(0, 0, cropWidth, cropHeight);
372
- ctx.drawImage(rawImg, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
359
+ ctx.drawImage(imgSource, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
373
360
  } // get the new image
374
361
 
375
362
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "antd-img-crop",
3
- "version": "4.0.2",
3
+ "version": "4.1.0",
4
4
  "description": "An image cropper for Ant Design Upload",
5
5
  "keywords": [
6
6
  "react",
@@ -32,21 +32,21 @@
32
32
  "react-dom": ">=16.8.0"
33
33
  },
34
34
  "dependencies": {
35
- "@babel/runtime": "^7.16.5",
35
+ "@babel/runtime": "^7.16.7",
36
36
  "react-easy-crop": "^4.0.1"
37
37
  },
38
38
  "devDependencies": {
39
- "@babel/core": "^7.16.5",
40
- "@babel/plugin-transform-runtime": "^7.16.5",
41
- "@babel/preset-env": "^7.16.5",
42
- "@babel/preset-react": "^7.16.5",
43
- "@rollup/plugin-replace": "^3.0.0",
44
- "eslint": "^8.4.1",
39
+ "@babel/core": "^7.16.7",
40
+ "@babel/plugin-transform-runtime": "^7.16.8",
41
+ "@babel/preset-env": "^7.16.8",
42
+ "@babel/preset-react": "^7.16.7",
43
+ "@rollup/plugin-replace": "^3.0.1",
44
+ "eslint": "^8.7.0",
45
45
  "eslint-config-prettier": "^8.3.0",
46
46
  "eslint-config-react-app": "^7.0.0",
47
47
  "eslint-plugin-prettier": "^4.0.0",
48
48
  "prettier": "^2.5.1",
49
- "rollup": "^2.61.1",
49
+ "rollup": "^2.64.0",
50
50
  "rollup-plugin-babel": "^4.4.0",
51
51
  "rollup-plugin-less": "^1.1.3",
52
52
  "typescript": "^4.5.4"