Source: CropComponent.es.js

  1. /**
  2.  * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
  3.  *
  4.  * This library is free software; you can redistribute it and/or modify it under
  5.  * the terms of the GNU Lesser General Public License as published by the Free
  6.  * Software Foundation; either version 2.1 of the License, or (at your option)
  7.  * any later version.
  8.  *
  9.  * This library is distributed in the hope that it will be useful, but WITHOUT
  10.  * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
  11.  * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
  12.  * details.
  13.  */
  15. import {core} from 'metal';
  16. import Component from 'metal-component';
  17. import Soy from 'metal-soy';
  19. import componentTemplates from './CropComponent.soy';
  21. import './CropControls.soy';
  23. /**
  24.  * Creates a Crop component.
  25.  */
  26. class CropComponent extends Component {
  28. 	/**
  29. 	 * Applies the brightness filter to generate a final version of the image.
  30. 	 *
  31. 	 * @param  {Object} imageData The image representations.
  32. 	 * @return {Promise} A promise that resolves when the webworker
  33. 	 * finishes processing the image for preview.
  34. 	 */
  35. 	process(imageData) {
  36. 		const imageCanvas = this.getImageEditorCanvas();
  38. 		var horizontalRatio = imageData.width / imageCanvas.offsetWidth;
  39. 		var verticalRatio = imageData.height / imageCanvas.offsetHeight;
  41. 		const cropHandles = this.components[this.ref + 'CropHandles'];
  42. 		const selection = {
  43. 			height: cropHandles.element.offsetHeight,
  44. 			left: cropHandles.element.offsetLeft - imageCanvas.offsetLeft,
  45. 			top: cropHandles.element.offsetTop - imageCanvas.offsetTop,
  46. 			width: cropHandles.element.offsetWidth,
  47. 		};
  49. 		const rawCanvas = document.createElement('canvas');
  50. 		rawCanvas.width = imageData.width;
  51. 		rawCanvas.height = imageData.height;
  53. 		rawCanvas.getContext('2d').putImageData(imageData, 0, 0);
  55. 		const canvas = document.createElement('canvas');
  56. 		const normalizedLeft = selection.left * horizontalRatio;
  57. 		const normalizedWidth = selection.width * horizontalRatio;
  58. 		const normalizedTop = selection.top * verticalRatio;
  59. 		const normalizedHeight = selection.height * verticalRatio;
  61. 		canvas.width = normalizedWidth;
  62. 		canvas.height = normalizedHeight;
  64. 		const context = canvas.getContext('2d');
  65. 		context.drawImage(
  66. 			rawCanvas,
  67. 			normalizedLeft,
  68. 			normalizedTop,
  69. 			normalizedWidth,
  70. 			normalizedHeight,
  71. 			0,
  72. 			0,
  73. 			normalizedWidth,
  74. 			normalizedHeight
  75. 		);
  77. 		cropHandles.dispose();
  79. 		return Promise.resolve(
  80. 			context.getImageData(0, 0, canvas.width, canvas.height)
  81. 		);
  82. 	}
  83. }
  85. /**
  86.  * State definition.
  87.  *
  88.  * @static
  89.  * @type {!Object}
  90.  */
  91. CropComponent.STATE = {
  93. 	/**
  94. 	 * Injected helper that retrieves the editor canvas.
  95. 	 *
  96. 	 * @type {Function}
  97. 	 */
  98. 	getImageEditorCanvas: {
  99. 		validator: core.isFunction,
  100. 	},
  101. };
  103. Soy.register(CropComponent, componentTemplates);
  105. export default CropComponent;