mawi137 / ngx-image-cropper Goto Github PK

I have an image like (http://3.bp.blogspot.com/-yP2cOsXJrQI/VfmLlTDJSJI/AAAAAAAAAEA/UzhCbhwnWdE/s1600/indeks3.png). What should I do to crop this image?

Make available configure min width/height dimensions to crop
E.g. need to crop image with 1.5 aspect ratio and to be not less then 320x240px

Can I use the plugin in the server side rendering apps?

Hi guys, I found this issue in my Ipad pro, Iphone and also same issue in a android mobile as well.

I used the ngx-image-cropper in our app, but after testing in the mobile uploading a portrait image, i got the following.

As you can see i just opened the https://stackblitz.com/edit/image-cropper in a mobile phone and add a photo in a portrait mode, notice that half of the image is black, if you move the cropper from the middle to the top the issue with black part is solved. But the image is still rotated left.

In my case I also used that in progress web app, where i used the mobile camera and depending on the orientation you use the mobile phone the image can be upside down.

Tried to find out in the code where the image is being rotated, if you could let me know please?

Thanks

I am using this library for cropper and canvas for rotate.
Once rotate is finished then the base64 code also being changed. at moment, library reset the cropper to the startup point and we lost everything, I would like to keep the current cropper and set it after rotated image loaded.

I have tried to manually set cropper using viewchild but didn't get it working.

also another topic is just want to set cropper ratio dynamically, but ratio change is not reflected to the view. If i tries to crop again then the cropper ratio reflected. any solution for these problems?

Thank you

Hi! There is a problem. When I try to make npm i ngx-image-cropper
The result is:

-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY angular@>=1.4 <1.7

Information about Angular version:

Angular CLI: 1.7.3
Node: 7.10.1
OS: linux x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.2.2
@angular/cli: 1.7.3
@angular/material: 5.2.3

Thanks!

Currently not working on these browsers

1. iPad safari
2. Android Chrome

Any workaround/updates?

HI,

How to configure ngx-image-cropper to work with ImageDropEvent

<image-cropper
[imageDropEvent]="imageDropEvent"
[maintainAspectRatio]="true"
[aspectRatio]="4 / 3"
[resizeToWidth]="128"
format="png"
(imageCropped)="imageCropped($event)"

we are trying to integrate this drag and drop plugin with this crop plugin
https://www.npmjs.com/package/ngx-file-drop

Advanvce Thanks !!!

Is there a way to control the quality of an image? I know we can't really improve the quality, but can we decrease the quality? Does the cropper offer an option for that?

I tried to give cropper to full image and i had given maintainAspectRatio to false. But it always takes width of the cropper as same as height of the image.

Hi, here is my image file format,

and below is my cropped image format
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVUAAACqCAYAAAAdv9xWAAAgAElEQVR4Xty9aaxl6XUdts483Hm+981jvZq6q4rd7GY3KbItShQpypYRBIgRQA5sI7AiJ04iIBEMOYYD5EcQwEgMyQkS25ApR7IlO3ISSY4kRpya3WQPrGJXd3XN79Wb7zyeeQz2vnVbzabg/K8DFN6r9+6759xzvm99a6+99v4EPEPHf/BXrqVymsJIAVlIkAgxIqRwY/qBiGzGREHRoSbAJPBQKpeQyWbgBz6C0EeqCEhi8L/JeIr2eRcedIiCAEkRkaQJXM+BECb8XlnDhCikiKIAcURfYwACVEWDJMtIIcALAnieC1ESEEUhisUsgmgKpAI0RUcaJ0hjIFUUqLqBOEmRQIRlO0gnMRzPQZqmSERAVVVkdBVxFEKVRIgpvVLg6zcME57n8dOM4wiSKkJWReiGAU03+Hq0jIFYSKCrOgrZIkRJQpoI0FUDlmXDchxks3mIsoQ0DBBGKiazELbjQZAECHAQBw5C24IYCgidGMdPzlEsFjCdzrC21oAkAbBHqDYzePELl/Dqlz+H6vISHMuC59nIFmtwHRn14jY818bp6X2cHbVx+KCNW99/hAd3DyEpNlw3AEQZcSwgTUU4foCQHoyYQpcUaKmAWehAURTUqhX+7MVSEa1cCa2lVZi5CsaWDy9I4KQxhqMRjk+OMR4PMZtNMbNthFGMFCmiNOFnK8oykiQBBPqsAoCU76cMuob5RBHox/SMRYHHBf8gTfkZpXTf+IUpBEGEJEn0lzwOBEFGmtLrJUAUIYgiZEGA7ztQJAmKKML1fISqCFFV+Jy6qkCVUiSeDSQedi9tY2N3A5qoQVElSKqEldUlhEmIfL4MRVb5PIIgQRRFiKKBfq+DpVYThZyJyWSMTEZHHKeYTh24QQRdyyCXL8IwNCShCwk0lh3YzggPHn+I566/gG5/imy2BNu1oOshOp0OcrkcSqUifD+AbTtYWl6G69DfOZhOJ8hlc5BFEeP+AJokQxKAQq0Bz/MhqSomlgPfDyFEAd+hRJQxGo+RiBJc10aKGIHvIp8xoIgCup0+hFRCpVKBABGaruPs5Ay1cg35QgGSKGE8nsznqKjwXEmiCJEf4ntvvolMvoRqsw5BkSFqCkRFRj4QkMtk4DozWOMJmo0qsvkCzjptNFaXISgK7j1+hMu7m7i6t4dyqYb/+lf+DjRFw96lS8gXcvjg7h08OTrAxtYGGq0mtCzNyGfo+Ot/4+WUJgWNaxpUBGIEaoquwdCzsK2AvzbrLRiOj1wpAzWjwk892P4MERwIiYiH9x5DkwxYUxdtaEASQUojaGIKTRGhhSFURYGmaXz3oihCkgqI4wRRJECRTWSMHERJgePYCAIHUexBVgQYWR1O7PLklWWZQYEm4sgaIJcr8MQjgJ5MppCFKg/QNI2RyRpQVRmKGEKIEwhJitB2kTezCKUYrudBEIQ5KADQNJk/t6IZiGlyqxoyuoKMJsEwihAkA1EsQdUzkBQV7mwKy5pBTGPomgprMANEAX6UIAxTEFomkQ/P9eHbHkI/QhwmmPR9yLIEIQ2QMRTkciYurdfwaP8urrx4Ab/wi7+AJ2cPsbm7ASHx4Xa6iNwERrYJSdZx3u5icG6h3/bx+jfewcGTM8xkB0kU82cU6VkKAiJamBQNThAhEmSEEWAIPt/7VquOMAp4kpcKBZSrNeh6HpJq4I033sL69iZG4yHOzs4xHo9h2xYsN0Cc/tn9omfACxoB6hw5f+zrx6eKIosfvWbx+iimRXV+0PgjUBUFCQndPllFQO+fAAb9nIGawFeYjyNRRBBG87GUJPxzSQQEMUKchNAyOurNGqrVMtZbZXi+DcOUIcvApct7MPQictkCZFmFJMkI/AiTiY1yuQhFkVCuFPHuu+/g8pULfF2O4yAMwznwJxJ0XaeRDFGKeaz2Rz2eE4auY3d7B6eHxwjDAJAlnJ6eIo5jLC0tod/vY3V9B7Zt8zVPJhP+7DM5hm9bcEYjNApF5E0DlYIKy3Jg2S7MXAFBFCEXmxgNR6g0G7ADD8PpBKV6gdZTRIEP37EwHvYRBgGiMEK5XMXJ8TkqlSrfyxAKZElGrdbAW2+9y4vr8vpF/mytVgu9Xg/37t2DourY2NoELaOCJEEiUBVlSJIAWUgRuC50TUGjVsdkOoOfxNAyWbz59ru49uIV9Pod9Hp9TMbzz7m1sYPRYIJutwvXdflZfubVV5DotOQ+Q8cv/iefS2VaiXi1cxEEAbMx1TChyDriCFAUE/lsHstmjlf6WI4QpAEihOgPTpExsnh0fx+nRx2US3kMRRMiEmgiYCiArkiIZzMGQ5oMdINpgEGMEMYRAo8mlgxVMZkFEHOglTcIXEgSsUcJ08Cas8+nwErvEyKEpukQIGE0mkISZXgzicFClgWYpgFRAjQpYWY0m0xBPIiAR5AFRHHE10QHvTcDsE4rsgY/TSFpBnKmBpPYq06D1mRQhaAgJQAgVpYmCFwbnutApt8xqKZwHB9eGCIJA9iWjdANgURCHM4nPDGKmBi5a1NAgKKa5YkewkV5qYT/4r/627hz/7uoFWWkloX2YQff+Nbb+Kt/42/hyVkH02EA3xLxx3/4bfT7E0zjCbM4/nxM/FJEXgBZNzB1fISpiDABNDHgz1sqFWAYKoqlAgPK6tomppaHJJHwre+8gZ1LF9DrdRlQafEhAPCjGH4Y872iMULnoEVREKWPFiYGHGEOfp88ZElg8KDfz1mhCM/3P3rt4neKLCOKE8iqziBO3xuyAkJa+lt6ZvxaeriCyGCwANY0iSGKCbNzyCkKpQLK5RJ0MYAk0zqX4PKVXXzqhRsw9DwK+RIvygktuEHM44kWPLqJBB5nZycolcowDIPP6fs+LMuas1tRYICWZOKNIVIEUDQBw/4AN99+F5vr6xiNRxA1FdPpFKurq/xZ6/U62t0RzwECZmKI9N6d0MKw00ZWVVHSDeiyBENOMRpP4XkBqo0mAvqbQOV7ki0VMLKmSCURI2sIVZN4vBHQmUxeElhTC47j8cLebC7z/VLMLMajKWRZ4fnd7fZQbC7h8YOHINRN4gSh5+PRo33c+NQNmPkcYooqkKJVqNAQh5BGcG0bCq1iaQrdNHms5cplHJ6eo1TPMXM+OHiCe3cfMVDnskWUCxX+3KPRCDs7O1hZXUG+kn+2QPVX/5ufSwmg6KHSBKIBqmg6FI3CdIVibMiSBl0z0MqWEIsxvMRFgIBXxtdf/waeu3oVGU1HtVTCW299DzOxwOxNTiMoQgxFSBG7PhT5R0FV0HwEsQdr6jFb1VQThpqFLKq8etJA4MkjCfCFkAckTZ4FU6HwnkKpKEoxGk45vAodkiNiKKoM01QZKHMU/scxBqMhg3qcJPCsGT9IGtR0DjqCwIOZM6GbOQwtC6Kmo1kroZg1oCgZQDSQpAqiROB7hIiYzQiuRdJEgkaxjiHdwwSIE4HD5fFgyAM7CVLIkoIkSjD1ziCLEjKGiciPkMYx1CjD15KKCcrVIuqNCr7wpT3o2gyj41M0S038X//3nyIQyvjCV76I0BMwGwf4oz/4U/Q7Q+gZidk4AQ8xOvpEJK2Iisqg6icCQpJpEovZviyLqNZKyGRMZLJF1JtLuP9gH2a2hJu33kOlWcdgOGAwpXvHzILYLzPHObOnn88jHInZ2//fQfOPzr1gtPT9AlQXIEzPlkAhiEJmSolAckYCWhe1p2AahhE/M1nRWBr4EQBnWSFCGIUQVXpOMkQphRS7ME0N165fwfbOGl566UVIkgpDzzBg8eKA+WcgmYCiJWKf9PlbzVU+HxEOAtVMJgNRUjl0ptfEicfnrNbyaLcPcXZ8gqxuYDgYIFcoIJYEBs5sNotqtcrvc94Z8uJA70WATaAT5lQoSDHp9aDQAmZbaFWqvHhEJMeJMgbjMWI7+ohBdkZ9ZoiqoSGXz0IUaPBFyJkGqyzTyRSu6/HnlCWVF5CpZaPX7aFcriOTybJM4BsiBt0eKtkC7PEEo14fnbM2di7solStMEulxbVVXoIiSxDTCNZ0CoGEN1HE9oULGFkWYkHEzPWRLxuoNap8X3/7t34Hy8srOD/tYHtzl+8xsXX63Pl8HsvLy88WqP7DX/trKd0UmiA0gAi0KASXNROSqCIMwQwyny2gnq/w6m+HFqzAYv01DXwMBl3kMgasyRCCkKI9Id0ygSIkUNKIv58NJxxyLJghgXcgWAjiAEEQQxQIuDNQJRkaraAxEPoU0kmI0hShOAdVAkWajHSdkqZhPJ7CtlxEEU0KEXIksV6bEKjLxCQkmLKMTD4Px3cxmI5hZDLQiPXQCquTXhY/ZToh9IwJPZOFRYxd1VAtFVDM6kgSBQlUQNAQhAm/JvZp0s0gIUHGNOGMbMxsC25I75fCD0OM+mNYUxsescCIzikg0cYgwTfyY0T0GRMBOT3HId362gqiMIQsidi+UcXKqokLyyt4dOchNKOG7751C1tXLmOttYnxwMK7b9/CyeEpqlmNGSoRNCLQc3VTYqZnexEtgbDdAKns8WAOQw+ra8t8f2SNmAjQ7gwhKwYGoymcwGUtnPQ8eicC6DAlBig+XdxCWkfmIfdHeqTIgLsI0T8JsqSl86IWx/w6Ahpa4Oj7j/+drknww4BBFTItiCkix2NQpWdPf0/jiK6VPuNCSmCwf6rPxkkEgfR+xIjCAHlDwMbmKl544XkG1mIpz5q6KMgMqnTHSCuv1Sss6fQHXWbyo9EA5dIyj480mbM1WrwhqhiMBrCsMSBE0HQJuppCSgMeV4amsTZ5cnYKOwn5b1ZWVjj0LRQKsJyQwYjApdFo4PDwEK4h8lg9fXKA1HFhKDJWGyvMKIOQdOwU3f4A1WIFuXweM9/FWa+LaqOO2nIDs+kEpqFB5SgiYvCja/a8ELOpxZr72uoa2u02giBCo7HEUVS5VMF3H9zCkwePcePiZYh+jFl/iH73nK8tVyxCUolMxMjIRWQMHaoiMqjGYYBas8HafbleZyJy8/YH2Lu6DVkRsb//5KPciTVzoSsGP2uSQ3Z3d1Gr1rDUXHq2QPU3vvafpzRgiBkS0PHghgBZy0KRNTh2CF3PolapQ5cMSJqImTdGfzqAF7mwhyNY1gTNegmGJsE0VJwP50AqJAHEyGd91RrPGFRpUtA5aLUeOn34cUgpDGbFAmk9QoqcIUMSNcQRJTQU+FEEN3H5+mi1p4N0qEyhiOFwgulkBk3V0e8PsVJpzueyEDPAU7KrYGYwGI2QLxcRCAlG0wnKigZFkvn9CATovUmH9WOSP1QoxEZUDcW8iUalCM9LEcYSRMmAHybMVJ3pFFHkswwgiQISN4aiqWj3huh0+iBRIwnAA3rSH8GxPYBYbt6HImlwZj6SUAAiEeNRH6tLdTzab+O5vXVO6PnZKTJF4D/69/59/Mkffh2bW8/jG995A3bg4ud/7i9Dk038H7/7eyjlSrC7ZzAUle8xyRvE1lNB5ZDdCRMkooLR1EYo2swOXNfCzs4Wh7kjy8f5+QhmLotOdwgzW0B/PJgnpGjxIj1NkjgpR1oFgVgUhIzciqLSrf6ILS7Cf5Z3PnEQUyUgpfek33PYK0n8/Zz1ziUDXSdZIICq6xBken0KiYCXgC1NeQzNgVSBJBv8/8V5aUEiLVEhtpuEiJKAw/i8LuC55y/jJ7/4E6jVyqhUi8y+VYXCfZUjMQJvP3A4OeV6M2bx9LeikOOQmBI+tCjQ2ItJovJdzKwJTFNGpVpA9+wJttebCH0fnfM2Ctkc3r35A2xc3mMA/frXv46f//mfZ3b6zW+/yayVrp1AbmtrC2MhwKjbgTUcwhmOsLe9hdCK4Tguz8lacwmuH6JaqUBWFaSKBI/id0nE2J7x+xRovFarcB0LukKkKITr+ixrPHywz+C+u7ONwCcS5WI8GjNxuT89gTOa4NrORYxO2qhk89h/cBfNpRYvwpS81k0DoS2hkMshY6iwZlOEvgdJU9BcXka2VAJkBd/67pt48ZXr2N7ZxM2bP0S/N8SDBw/xpZ/+CjJ6Fm+88QZee+01joxJf0bwjGmq//p3/l5Kg4tWGtXQOewi8T9D+qmkI/QpHMszWyWB29AEBOEE7fMDnJ0e4MrzF3lwkkZCTJf0phdffB6nxycwdQOR58O2LIRCxAysUi5gMhwiDFwoognXDZEQeAoiJyhUVYOuG8w6ZzObfybrCrqzQ1gzh7XKfL7Ag8RzEiiKhtnM4SQDTczADZHPZRCFDnIZHWkSoFarYGI7COIEfgqMZ1NoKVCrlHnSeNYUy0st1kkpm8xZf1OfT2pFARkUKHSSEoWTaYaRhTP1YQc+IiGFF4eYOTaDcuj4SCl7PrEReaSdzhNoxIYm4xnrW3E4T7rRwckZYt5ySAIEEt/Fqy+9jM++/ALkgoHhpIdkMsZnXngZuUITb77zPv7fb34XX/3yV5i9/dHv/yEnzLayCjRDZ003fMoWI09EKshoD0YQNAOTqQNHGDNTe/vd93kiVCsNlOtLeOPNN/nZ0SJHiYmAmL8wj2A4eqFo5mMsdCHDkB5Lr/vzjoX+vdDQiakS+HHWnzRr+v7pH7K++jRxSJLmXHOljDwttiIUBu4EoUBZb4F1REmiTL/GX1PSgiByRpuy2UlCyasQUUyJVh2NkonVtRYuX9lBvVmEIMQoN+rI54vMUGk8uSSThFPWP7e3t/krXXvnfMyASouAaZp8P5yYtHNiqMSYU0xnQ0yH51hrFnBydIyttXXO7FNyyA9iDu+JpRI7IzAhKYXYKYW+xLrpPN9//xaWlpronp8yOVlqteB1x8gWCgjJBaGoPEcjZrkyWuvrcIIQtkfyToDheIB8NgtSAKrlCh4/fshSBkkR79++jUa1BtMg506MUqnE/2jOvv/++yhuVPHm699FXjeR1QzWVE/utbGzu4lcJQNBTJEvZ1ESmsjmMghClyUSOlm93uRIsN5aRqZUwhtvvQ3LmSAMfR4/ly5d4oWIkmYf3rnLksDW1i5azWX+uSY9Y9n/3/tXfz+lyURZbwp9Hd97qpERe1ShKTkocgaOHcCjzLccQ5IDiIKPwJ8hjCweZHQcHx/zZGhWSjwB6XsS7VlaCF1sbKzDs8lionKIYo0TOFbID4fsMhRO0oSgmUb2DxEyxqQJ+TaKLRW27SEKk3nYJkoYDW3WKc/PO8xYKVGVyRagkXUmibDUqEJEDC9wOJucygqIF49nM6RRhGI2C01VOFlUqxTnr6FwViLJIUG2kGdgncwcaKqBUrYCTTHZPiYkMmIRGM6mnCwgIKKw0R7PEHsR/JnPg5vuG1mvwiCB74X8PQ0q0hIDP4AozvW2SPKwslJFKafgyqUN/NRrn8HahT1oqoasJOF7r38fxcoqnnvhc/jGN19HEkbwphZ+97f/BRI/QDZw2B5VqddgZEn/FXByeA7HCyBIGs7afb43HesQe5d2MRpbCGNye6RYWtvCwZMnHJJRiO+FPkBaZpLws/tkpn4BkouEE4HZj4X6T2WCRfKJJQHMw/xFkop/9vR1dM9Jr6T3JNmGeCgBB/2j54qn2jPpk6kszkFVlCGLpPnPtUIGVYlsWHTdFHXFDAaUsCzoCmESlpYr2N5dw9paC83VZRQLZV7wSOaYTW0O4/n1hQJfD3EokphIJvrIYUDhtZJFvlRi0J5ZA4zGfczGXdRLJkI/QLlQxMnREfK5PAbDISdlCEAeP37MAF0slxnQymU6v8e/m8YhXGuGtdVlmIYOazJGPLOQyRdx2u1CMTPwwgB7Kxs8PyJBgqTpOOt08e57P0C328Grr7yCermCoyeHqNWqEBWJyUwaxdDJCWLbTJpIH6WFg+bubDbDJHUgpQIe3buH04MjXNzZxdn+gPXolY1VxGmAfKmApkHMVYPtTBGElBCmxRZQdB2Xr11HudHAnfsPcHzyBNPZmIcFLSh7e3uMBYZmYHVlDaaR5bHX6XQRBv6zFf7/z7/2iymFI5brsA+tWC7BcT3k8yXoWhaSYEAUdARBAlHNIfSnsJ0+Qn8Cyxogm1WY4dA/niyCAIOGtyShN+ij2mzAC3x4lJWFgKypcxKL9B5ZKGM6ttmuQ5lZYhfzcMXjsDKTybFeet45hVkUUK020OsOMBgMkc3m5uw5pEHhIIlTDqsO2gOU81l40xFq2SyWG1UMRwMY2SwsL8DUcZEvl9jqQVnmUimPyPNAmWnyRxaKBfapTu0ZD5RaowFZNVgKMeQMcSYG1chPIeka/CRiXWvmWBgOhoj9mMOZ6WAMd0bsVYFjuwj8EGEYw7Jc9hUGvs8DmxekFMgUFFRKGdQqOp6/uoat9RrK1Sp2trawVm/A9wWEaQ6dkcOa7ns3b0FJBXzjj/8Es/EEomvxIKcsrJnP8sIQxjGDeZIIcCzKCmfQtU+wd3ELl69ex9FpB999/U3Iem6efe522f5jew5E1jLn+ii9FwEKgeyPH2Sn+nFQJXBc/FskpshcTCDNtilxrr8SqC40UtYt0xSKvLBnEXDO7U4iuQ7oGkQyMQGxMAdkVVI5fCdApUQTuUVowaXMdxiRs4BAHMgqKjRdxMpqAzc+dQXXrl9FiADZTJ7DfgZoWWXbFV1fsVjkMU2hL10TgR6BH31P4+zodIBsroCllSbCyMF43EeSeGg1yzh49BiryysYDwYwDQMZU8eDBw/4fWu1Gkd2lVqNSQiBKo15smulioG7H97B9uYGe1TTOIQqJ0gFkcftcbsDxTDw6Z1djuj2j46RyjK6ZK+qVtkL26zVMZtMUC6W0Fpd5nFMWv1Kcxk/ePcWNtdXcHTwhO/9jRs35s9XlnEy6yEOQljDMSc8u+dtaFIB550OLl65Ml9g0xSXWmvQNAUnJ4dwXJvtavlyBYVKGYKqsyQXpCmePHmEyXiIb37zm0/zKCkq5QrWVzdQrzU4Ajk6OsFoNEG9ufJsgeo/+V//dmo7Npu4SYymLJ+ZyRCtQ6XSABIVYSAgDFLUlzcReBP4wRiaEsP3Z+iePWZBhAYFgVS314PfHSGTzyFXLuKocw4tY6I/nXE4tL25ziZ8VZGQ1erwfLLDuAhCG2HoIKXiA9IAY/JA0twQOOGTChGmEwuaRuFXzGBKLJVOTllcmlDEYO91+jAkEXoSY6NWgxD4OGufICSAIFsO+UuJgSgaT9JauciAqrKoH7KOpqgq3MBHrljg0MtxA2aqppKd26IoNE4UyIaG4XSKk+453zsS4kfdIdypA2/mQCQHADkbwoR1LZr45Kcd2gOe7AxUMX0lRkVy5VxPXl0uQ0p9rK6W8fNf/QKuXryCam0D3ZmAQnUF52dtIErw4M6H+L3f/VfwbAfuZAzHdRGnCetfVNxQrBXhWC5qxTqyeg6+EyGQe7h09XmcnfeI/OHDO/cxc+lzZ/jvwzRmNkSpxoV3mUBxYfD/kdCdw3hKVv354f+C4S5kjjSZRzQfB9uEbVnzxNMiYUWRxvw8ZIHS2DWi8FhIEUlgqSqgiAYpVPodgyoBNRnKJGanBGBxHEAQE37OGTkLTRewtFzFlas72Lu4DTWjIJ8rQtfNuVdVlHF0fMjjuFavI44iqJrKVqXpZIIwiliDpOKXdpdIhIJqrQxZSRDFxLITvP7Gt7C+sorLexchPbXdZU0CkCNcvnwZb7755lzT9sni1GSNlj47JaymNrlZXBQyJkaDLl/H0el9Ns2PLBtf/9Z3sH1hF5/b3UEcxTjv9+HFCU7O2gzSpOGSZa/XGaFWzWNpdQ2CqaN33mGrFP3Od12cHR+x+V+WJKxvrKPZbOHmw7uQBAHexEIahBz+94cez8+NnQtsN4tSAdfXV9hRc3R8wIs4WfMkw0ClUWcfrR2GMHJ5HB08wp0PbvOiQQsTfdb9x/tYbq1gNrM46jw6PMaHd++jvrL1bIHq7/z2rzJTnZLp2PeQyWURUMo/pfB6hsAHGvU1FAtV1lR1lbToEIocY…"

Internet Explorer 11 throws IndexSizeError after loading of some images if canvas size is restricted from elements around. This always happens if the ratio in the crop method is calculated to be greater than 1. I already prepared a PR to fix this issue.

It's not a issue exactly. I'm wondering if there is a way to get the modified File once it's cropped.

Thank you, this module is really useful.

Hi

I can't get the cropper to work with Firefox and iOS-devices, all the resize dots are in the same position and it's not possible to move them. See screenshot below

I have configured the cropper like so:
<image-cropper
[imageChangedEvent]="imageChangedEvent"
[maintainAspectRatio]="true"
[aspectRatio]="16 / 9"
[resizeToWidth]="1200"
format="jpeg"
(imageCropped)="imageCropped($event)"
>

I'm using this component to crop an image before uploading. it works fine.
but after uploading, i want to let the user upload another image.
the previous image is still loaded, and that is undesirable. I want it to be empty,
just like the first time. Any idea how to achieve that? tnx.

Hello.
Unfortunately I tried to implement your example code and I experience problems in Google Chrome Version 66.0.3359.117 (Official Build) (64-bit). The cropping frame does not move smoothly, it jumps in small steps. I have to mention that at the same time it works smoothly in Microsoft Edge.
Is there any ideas what might be the problem?

Hi -
This library works fine when I try to add a portrait size image - but doesn't work when I try to upload landscape style images.

This issue is occurring because it has been placed in a bootstrap model. Should I be making any changes to restrict the image cropper to the bootstrap width.

I am getting IndexSizeError in my console

Code Used:

 <input type="file" (change)="fileChangeEvent($event)" id="comImg" />
<image-cropper [imageChangedEvent]="imageChangedEvent" 
 [maintainAspectRatio]="true" 
[aspectRatio]="1/ 1" 
[resizeToWidth]="150"
 format="png" 
(imageCropped)="imageCropped($event)" 
(imageLoaded)="imageLoaded()" 
(loadImageFailed)="loadImageFailed()">
</image-cropper>

Thank you in advance

I suggest you to change this style:

:host .cropper{
  outline-width: 1000px;
}

Become:

:host .cropper{
  outline-width: 100vw;
}

So, the cropper will cover all image width. I have prove it in large image with > 1000px width.
I try to change it in my CSS file, but it can not change.

I have changed the format attribute="jpg" in my html. But the resultant image is always png. Jpg images are also being converted into png. Please tell any solution.

if the input image size is 1024798 for cropping.when we load the image into canvas for cropping it will be resized according that.ho we can get the resized image widthheight?

Seems like a bug, following code prevents the imageLoaded event from being used to set the size or cropper values due to order of operations, will edit this if I find a solution.

component:

imageLoadedInView(): void {
        if (this.originalImage != null) {
            this.imageLoaded.emit();
            setTimeout(() => {
                this.setMaxSize();
                this.resetCropperPosition();
                this.cd.markForCheck();
            });
        }
}

Following gives me expected functionality, unsure what purpose of setTimeout was here and had to call crop afterwards since it's private, could also just make that public.

    if (this.originalImage != null) {
      this.setMaxSize();
      this.resetCropperPosition();
      this.cd.markForCheck();
      this.imageLoaded.emit();
      this.crop();
    }

Hello, I want to know hot post the cropped image to server?
Im having a Upload Image button and want to post that cropped image to server. Can you post some sample code for post the image data in base64.
Thanks.

Currently cropper is not working on mobile because in this case startMove is called after moveImg. I see touchmove and touchend events so I guess the plan was to support that and this is a bug?

To see the issue, you can use chrome mobile simulator

If we want cropped co-ordinates(x1,x2,y1,y2) on the input image How to get?

Is there a way to allow to cropper to get bigger then the selected image?

For example, I maintain aspect ratio of 1 / 1 which is a square, and if I upload an image with width of 600 and height of 100, the cropper will be a square of width and height 100 but there's no way to make it bigger.
Imagine if we want to fit the 600x100 image into a 200x200 cropper. Is there a way to do it?
Yeah, I know then the image wont be pretty and will have dead space, but that's not important. Just need to have the option.

https://stackblitz.com/edit/image-cropper-jenfnl

Hello I was wondering when your component could be used in Angular 6 ?
Thanks

hi ,
Sometimes when an image is loaded for cropping, the cropper square remains non-resizeable
leaving cropped image corrupted .
Please help what should be done in such scenario.
Note :
in attached image cropper is non-resizable and below is cropped image which is not generated

I have tried with png and jpeg format. Both image quality are not good. Anyway is there to improve cropped image quality?

Hello ! First of all, a really big thank you for this plugin. It's very fast and it's what I needed.

But - there's a but - I've seen an issue when building my ionic app : the view is not updated when I move or resize the picture (only the view).

I've already seen that before so I knew how it can be corrected. I forked the repo and add a reference to

ChangeDetectorRef

in the file.

I will make a PR !

Hi. When I uploaded the image with size more then 3 Mb I saw this error (see below).
What can you advise about this?

ImageCropperComponent.html:3 ERROR RangeError: Maximum call stack size exceeded
at RegExp.[Symbol.match] ()
at String.match (native)
at sanitizeUrl (webpack-internal:///../../../platform-browser/@angular/platform-browser.es5.js:3438:44)
at DomSanitizerImpl.sanitize (webpack-internal:///../../../platform-browser/@angular/platform-browser.es5.js:4008:24)
at setElementProperty (webpack-internal:///../../../core/@angular/core.es5.js:9600:78)
at checkAndUpdateElementValue (webpack-internal:///../../../core/@angular/core.es5.js:9520:13)
at checkAndUpdateElementInline (webpack-internal:///../../../core/@angular/core.es5.js:9454:24)
at checkAndUpdateNodeInline (webpack-internal:///../../../core/@angular/core.es5.js:12537:20)
at checkAndUpdateNode (webpack-internal:///../../../core/@angular/core.es5.js:12484:16)
at debugCheckAndUpdateNode (webpack-internal:///../../../core/@angular/core.es5.js:13341:59)

How can I get the original height and width of uploaded image and also is there any method to get the cropped x1,y1, x2,y2 positions

I try to zoom the source image. I have wrapped it, so by clicking the zoom in icon, the image should be zoom in too.

I can not find the best way to zoom in the image. Could you help me?

Is there any way to use round cropper?

I am trying to zoom in and zoom out the source image. And I've found the best way to do that. I have to change the style property of class source-image. Like this:

[_nghost-c7] > div[_ngcontent-c7] .source-image[_ngcontent-c7] {
    max-width: 100%;
    max-height: 100%;
}

In inspect element, I try to change the max-width and max-height and the image going zoom in. So, do you have any idea to access that class directly from TS file?

No clipper, only images.

请问下，如何设置初始化默认图片？

I set the height to <image-cropper>. And when I upload the image with portrait orientation locating of cropper area is not in the appropriate place.

P. S.: cropper is initing in the dialog (modal) window

My server side is expecting multipart form data but I have with me base64 string. How can I make this base64 to multipart form-data.

error fetch same image not to edit and also open file search window when click on cancel button error appears "ERROR TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob' " . I still can not solve

$$_gendir\node_modules\ngx-image-cropper\ngx-image-cropper.ngfactory.ts Unexpected token (13:40)
You may need an appropriate loader to handle this file type.
| import * as i2 from '@angular/common';
| import * as i3 from '@angular/platform-browser';
| export const ImageCropperModuleNgFactory:i0.NgModuleFactory<i1.ImageCropperModule> = i0.╔╡cmf(i1.ImageCropperModule,
| ([] as any[]),(_l:any) => {
| return i0.╔╡mod([i0.╔╡mpd(512,i0.ComponentFactoryResolver,i0.╔╡CodegenComponentFactoryResolver,
@ ./$$_gendir/ClientApp/app/components/client/updateclient.component.ngfactory.ts 12:0-106
@ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts
@ ./ClientApp/boot.server.ts

any ideas please?
Thank you
Girish

@Mawi137 would it make sense to make resize squares a bit bigger on touch devices? It's really hard to point to it with finger currently with this size.

The image cropper is always square. I can't able to crop a image with free size. Any solution to achieve the free positions like rectangle?

I want to show cropper only if the uploaded file meet specified conditions (like dimensions). So I would like to switch visibility by standard *ngIf. Problem is, that once I set shouldBeVisible to true the image is not visible on the page at all. (btw I set this property in promise.then)

# a.component.ts
<image-cropper
  *ngIf="shouldBeVisible"
  [imageChangedEvent]="imageChangedEvent"
  (imageCropped)="imageCropped($event)"
  (imageLoaded)="imageLoaded()"
  (loadImageFailed)="loadImageFailed()">
</image-cropper>

Rearranging the cropping emit an event passing the base64 string of cropped section and displayed into view by just assigning the src value to the variable.

how to store the cropped section local or on server.?

Cropper resizer distorted in RTL

I have a service that that returns a URL to an image & I want that image loaded up to crop (vs. using the file input button to load the image). I am not seeing a way to do this with this library, but maybe I am missing something?

I'm upgrade from version 0.1.24 to 0.1.30 then is showing angular warning:

WARNING: sanitizing unsafe style value 0px; (see http://g.co/ng/security#xss).

on platform-browser.js

as the angular itself recommends: see http://g.co/ng/security#xss

Hi, is there a way to set canvas size? At the moment whenever I set the size of the container itself, the image will still overflow and as a result cover up my other stuff in display.

If I do this way

<div class="col-lg-3 text-center" style="height:33vh">
        <div *ngIf="file">
          <div class="row">
            <image-cropper class="col-lg-12"
            [imageChangedEvent]="imageChangedEvent"
            [maintainAspectRatio]="true"
            [aspectRatio]="1"
            [resizeToWidth]="128"
            format="jpeg"
            (imageCropped)="imageCropped($event)"
            ></image-cropper>
          </div>
          <div><p>Preview</p></div>
        </div>
      </div>

The image will poke through the container

If I do this way

<div class="col-lg-3 text-center">
        <div *ngIf="file">
          <div class="row">
            <image-cropper class="col-lg-12" style="height:33vh"
            [imageChangedEvent]="imageChangedEvent"
            [maintainAspectRatio]="true"
            [aspectRatio]="1"
            [resizeToWidth]="128"
            format="jpeg"
            (imageCropped)="imageCropped($event)"
            ></image-cropper>
          </div>
          <div><p>Preview</p></div>
        </div>
      </div>

The image will get cut instead

Currently uploaded images are not properly oriented according to the exif data