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))));
+    });
+  },
+};