initPreview: function () { var crossOrigin = getCrossOrigin(this.crossOrigin); var url = crossOrigin ? this.crossOriginUrl : this.url; var $clone2; this.$preview = $(this.options.preview); this.$clone2 = $clone2 = $(''); this.$viewBox.html($clone2); this.$preview.each(function () { var $this = $(this); // Save the original size for recover $this.data(DATA_PREVIEW, { width: $this.width(), height: $this.height(), html: $this.html() }); /** * Override img element styles * Add `display:block` to avoid margin top issue * (Occur only when margin-top <= -height) */ $this.html( '' ); }); }, resetPreview: function () { this.$preview.each(function () { var $this = $(this); var data = $this.data(DATA_PREVIEW); $this.css({ width: data.width, height: data.height }).html(data.html).removeData(DATA_PREVIEW); }); }, preview: function () { var image = this.image; var canvas = this.canvas; var cropBox = this.cropBox; var cropBoxWidth = cropBox.width; var cropBoxHeight = cropBox.height; var width = image.width; var height = image.height; var left = cropBox.left - canvas.left - image.left; var top = cropBox.top - canvas.top - image.top; if (!this.isCropped || this.isDisabled) { return; } this.$clone2.css({ width: width, height: height, marginLeft: -left, marginTop: -top, transform: getTransform(image) }); this.$preview.each(function () { var $this = $(this); var data = $this.data(DATA_PREVIEW); var originalWidth = data.width; var originalHeight = data.height; var newWidth = originalWidth; var newHeight = originalHeight; var ratio = 1; if (cropBoxWidth) { ratio = originalWidth / cropBoxWidth; newHeight = cropBoxHeight * ratio; } if (cropBoxHeight && newHeight > originalHeight) { ratio = originalHeight / cropBoxHeight; newWidth = cropBoxWidth * ratio; newHeight = originalHeight; } $this.css({ width: newWidth, height: newHeight }).find('img').css({ width: width * ratio, height: height * ratio, marginLeft: -left * ratio, marginTop: -top * ratio, transform: getTransform(image) }); }); },