@seniorsistemas/angular-components 17.3.7 → 17.3.8

package/bundles/seniorsistemas-angular-components.umd.js

@@ -12803,6 +12803,30 @@
         return StructureModule;
     }());
 
+    var ImageUtils;
+    (function (ImageUtils) {
+        function adjustAspectRatio(imageBase64) {
+            return new rxjs.Observable(function (observer) {
+                var image = new Image();
+                image.src = imageBase64;
+                image.onload = function () {
+                    var canvas = document.createElement('canvas');
+                    var context = canvas.getContext('2d');
+                    var size = Math.max(image.naturalWidth, image.naturalHeight);
+                    canvas.width = size;
+                    canvas.height = size;
+                    context.fillStyle = 'rgba(0, 0, 0, 0)';
+                    context.fillRect(0, 0, size, size);
+                    context.drawImage(image, (size - image.naturalWidth) / 2, (size - image.naturalHeight) / 2);
+                    var adjustedImageBase64 = canvas.toDataURL();
+                    observer.next(adjustedImageBase64);
+                    observer.complete();
+                };
+            });
+        }
+        ImageUtils.adjustAspectRatio = adjustAspectRatio;
+    })(ImageUtils || (ImageUtils = {}));
+
     var ImageCropperComponent = /** @class */ (function () {
         function ImageCropperComponent() {
             this.id = "s-image-cropper-" + ImageCropperComponent_1.nextId++;
@@ -12838,16 +12862,20 @@
             }
         };
         ImageCropperComponent.prototype.initCropper = function () {
+            var _this = this;
             if (this.cropper)
                 this.cropper.destroy();
-            this.image.nativeElement.src = this.imageSource;
-            this.cropper = new Cropper(this.image.nativeElement, {
-                aspectRatio: this.rounded ? 1 : this.aspectRatio,
-                guides: false,
-                dragMode: "move",
-                minCropBoxHeight: 2,
-                minCropBoxWidth: 2,
-                toggleDragModeOnDblclick: false,
+            ImageUtils.adjustAspectRatio(this.imageSource)
+                .subscribe(function (imageBase64) {
+                _this.image.nativeElement.src = imageBase64;
+                _this.cropper = new Cropper(_this.image.nativeElement, {
+                    aspectRatio: _this.rounded ? 1 : _this.aspectRatio,
+                    guides: false,
+                    dragMode: "move",
+                    minCropBoxHeight: 2,
+                    minCropBoxWidth: 2,
+                    toggleDragModeOnDblclick: false,
+                });
             });
         };
         ImageCropperComponent.prototype.getRoundedCanvas = function (sourceCanvas) {
@@ -12871,13 +12899,6 @@
                 this.croppedCanvas.emit();
             }
             else {
-                //hack to fix images if canvas doesnt match image (for mobile, tablets, etc)
-                if (this.cropper.getCanvasData().height !== this.cropper.getImageData().height) {
-                    this.cropper.getImageData().scaleY = this.cropper.getImageData().height / this.cropper.getCanvasData().height;
-                }
-                if (this.cropper.getCanvasData().width !== this.cropper.getImageData().width) {
-                    this.cropper.getImageData().scaleX = this.cropper.getImageData().width / this.cropper.getCanvasData().width;
-                }
                 var _croppedCanvas = this.rounded
                     ? this.getRoundedCanvas(this.cropper.getCroppedCanvas())
                     : this.cropper.getCroppedCanvas();