aboutsummaryrefslogtreecommitdiffstats
path: root/library/cropperjs/src/js/preview.js
diff options
context:
space:
mode:
Diffstat (limited to 'library/cropperjs/src/js/preview.js')
-rw-r--r--library/cropperjs/src/js/preview.js142
1 files changed, 142 insertions, 0 deletions
diff --git a/library/cropperjs/src/js/preview.js b/library/cropperjs/src/js/preview.js
new file mode 100644
index 000000000..c47d03f4b
--- /dev/null
+++ b/library/cropperjs/src/js/preview.js
@@ -0,0 +1,142 @@
+import {
+ DATA_PREVIEW,
+} from './constants';
+import {
+ each,
+ empty,
+ extend,
+ getData,
+ getTransforms,
+ removeData,
+ setData,
+ setStyle,
+} from './utilities';
+
+export default {
+ initPreview() {
+ const { crossOrigin } = this;
+ const { preview } = this.options;
+ const url = crossOrigin ? this.crossOriginUrl : this.url;
+ const image = document.createElement('img');
+
+ if (crossOrigin) {
+ image.crossOrigin = crossOrigin;
+ }
+
+ image.src = url;
+ this.viewBox.appendChild(image);
+ this.image2 = image;
+
+ if (!preview) {
+ return;
+ }
+
+ const previews = preview.querySelector ? [preview] : document.querySelectorAll(preview);
+
+ this.previews = previews;
+
+ each(previews, (element) => {
+ const img = document.createElement('img');
+
+ // Save the original size for recover
+ setData(element, DATA_PREVIEW, {
+ width: element.offsetWidth,
+ height: element.offsetHeight,
+ html: element.innerHTML,
+ });
+
+ if (crossOrigin) {
+ img.crossOrigin = crossOrigin;
+ }
+
+ img.src = url;
+
+ /**
+ * Override img element styles
+ * Add `display:block` to avoid margin top issue
+ * Add `height:auto` to override `height` attribute on IE8
+ * (Occur only when margin-top <= -height)
+ */
+ img.style.cssText = (
+ 'display:block;' +
+ 'width:100%;' +
+ 'height:auto;' +
+ 'min-width:0!important;' +
+ 'min-height:0!important;' +
+ 'max-width:none!important;' +
+ 'max-height:none!important;' +
+ 'image-orientation:0deg!important;"'
+ );
+
+ empty(element);
+ element.appendChild(img);
+ });
+ },
+
+ resetPreview() {
+ each(this.previews, (element) => {
+ const data = getData(element, DATA_PREVIEW);
+
+ setStyle(element, {
+ width: data.width,
+ height: data.height,
+ });
+
+ element.innerHTML = data.html;
+ removeData(element, DATA_PREVIEW);
+ });
+ },
+
+ preview() {
+ const { imageData, canvasData, cropBoxData } = this;
+ const { width: cropBoxWidth, height: cropBoxHeight } = cropBoxData;
+ const { width, height } = imageData;
+ const left = cropBoxData.left - canvasData.left - imageData.left;
+ const top = cropBoxData.top - canvasData.top - imageData.top;
+
+ if (!this.cropped || this.disabled) {
+ return;
+ }
+
+ setStyle(this.image2, extend({
+ width,
+ height,
+ }, getTransforms(extend({
+ translateX: -left,
+ translateY: -top,
+ }, imageData))));
+
+ each(this.previews, (element) => {
+ const data = getData(element, DATA_PREVIEW);
+ const originalWidth = data.width;
+ const originalHeight = data.height;
+ let newWidth = originalWidth;
+ let newHeight = originalHeight;
+ let ratio = 1;
+
+ if (cropBoxWidth) {
+ ratio = originalWidth / cropBoxWidth;
+ newHeight = cropBoxHeight * ratio;
+ }
+
+ if (cropBoxHeight && newHeight > originalHeight) {
+ ratio = originalHeight / cropBoxHeight;
+ newWidth = cropBoxWidth * ratio;
+ newHeight = originalHeight;
+ }
+
+ setStyle(element, {
+ width: newWidth,
+ height: newHeight,
+ });
+
+ setStyle(element.getElementsByTagName('img')[0], extend({
+ width: width * ratio,
+ height: height * ratio,
+ }, getTransforms(extend({
+ translateX: -left * ratio,
+ translateY: -top * ratio,
+ }, imageData))));
+ });
+ },
+};