fix: improve quality of image before sending to server #3680

maze-runnar · 2019-12-02T12:32:24Z

Fixes #3663
it is resizing the image to higher pixel before sending to server

Checklist

I have read the Contribution & Best practices Guide.
My branch is up-to-date with the Upstream development branch.
The acceptance, integration, unit tests and linter pass locally with my changes
I have added tests that prove my fix is effective or that my feature works
I have added necessary documentation (if appropriate)

kushthedude · 2019-12-02T14:03:20Z

app/components/modals/cropper-modal.js

@@ -32,7 +32,7 @@ export default ModalBase.extend({
      this.onVisible();
    },
    cropImage() {
-      this.$('img').croppie('result', 'base64', 'original', 'jpeg').then(result => {
+      this.$('img').croppie('result', 'base64', 'original', 'jpeg', 1).then(result => {


What is this one, any official guide?

Quality parameter in croppie .

Link to official guide ?

https://foliotek.github.io/Croppie/

maze-runnar · 2019-12-02T14:28:49Z

Quality parameter in croppie .

maze-runnar · 2019-12-02T14:34:35Z

@kushthedude i have migrated the cropper-madal code to ES6 , should i open a seperate PR for that ?

kushthedude · 2019-12-02T14:36:59Z

Yes

…

On Mon, 2 Dec, 2019, 20:04 Sundaram Dubey, ***@***.***> wrote: @kushthedude <https://github.com/kushthedude> i have migrated the cropper-madal code to ES6 , should i open a seperate PR for that ? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3680?email_source=notifications&email_token=AKQMTLVYVEUHSAOPSQJKXPTQWUMHXA5CNFSM4JTVDHD2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFTVY4A#issuecomment-560422000>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKQMTLQGJWC6JV2UMMIMIFTQWUMHXANCNFSM4JTVDHDQ> .

kushthedude · 2019-12-05T13:34:36Z

app/templates/components/forms/wizard/basic-details-step.hbs

@@ -94,7 +94,7 @@
        icon='camera'
        hint=(t 'Select Event Image')
        maxSizeInKb=10000
-        helpText=(t 'We recommend using at least a 2160x1080px (2:1 ratio) image')
+        helpText=(t 'We recommend using at least a 2160x1080px (2:1 ratio) image and never less than 1500x750px image')


We have already specified the at least, This change is unneeded.

kushthedude · 2019-12-05T14:00:25Z

Default is already 1, Why define explicitly then?

…

On Thu, 5 Dec, 2019, 19:26 Sundaram Dubey, ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In app/components/modals/cropper-modal.js <#3680 (comment)> : > @@ -32,7 +32,7 @@ export default ModalBase.extend({ this.onVisible(); }, cropImage() { - this.$('img').croppie('result', 'base64', 'original', 'jpeg').then(result => { + this.$('img').croppie('result', 'base64', 'original', 'jpeg', 1).then(result => { https://foliotek.github.io/Croppie/ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3680?email_source=notifications&email_token=AKQMTLSDVX2UEDUFUI2YYWTQXECCRA5CNFSM4JTVDHD2YY3PNVWWK3TUL52HS4DFWFIHK3DMKJSXC5LFON2FEZLWNFSXPKTDN5WW2ZLOORPWSZGOCODEBJY#discussion_r354326063>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKQMTLUVH5SKHXF7U4H2BGDQXECCRANCNFSM4JTVDHDQ> .

maze-runnar · 2019-12-05T14:05:43Z

Default is already 1, Why define explicitly then?
…
On Thu, 5 Dec, 2019, 19:26 Sundaram Dubey, @.> wrote: @.* commented on this pull request. ------------------------------ In app/components/modals/cropper-modal.js <#3680 (comment)> : > @@ -32,7 +32,7 @@ export default ModalBase.extend({ this.onVisible(); }, cropImage() { - this.$('img').croppie('result', 'base64', 'original', 'jpeg').then(result => { + this.$('img').croppie('result', 'base64', 'original', 'jpeg', 1).then(result => { https://foliotek.github.io/Croppie/ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3680?email_source=notifications&email_token=AKQMTLSDVX2UEDUFUI2YYWTQXECCRA5CNFSM4JTVDHD2YY3PNVWWK3TUL52HS4DFWFIHK3DMKJSXC5LFON2FEZLWNFSXPKTDN5WW2ZLOORPWSZGOCODEBJY#discussion_r354326063>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKQMTLUVH5SKHXF7U4H2BGDQXECCRANCNFSM4JTVDHDQ .

i got that it's affecting the quality a bit , if you say i will remove it .

kushthedude

Also dont change the factor, Simply change the result method for the images used to this :

'viewport' the size of the resulting image will be the same width and height as the viewport
'original' the size of the resulting image will be at the original scale of the image

Just change the viewport to the original

kushthedude · 2019-12-06T17:25:07Z

app/components/modals/cropper-modal.js

@@ -32,7 +32,7 @@ export default ModalBase.extend({
      this.onVisible();
    },
    cropImage() {
-      this.$('img').croppie('result', 'base64', 'original', 'jpeg').then(result => {
+      this.$('img').croppie('result', 'base64', 'original', 'jpeg', 1).then(result => {


Revert this change

kushthedude · 2019-12-06T18:06:23Z

Also dont change the factor, Simply change the result method for the images used to this :
'viewport' the size of the resulting image will be the same width and height as the viewport
'original' the size of the resulting image will be at the original scale of the image
Just change the viewport to the original

.

maze-runnar · 2019-12-06T18:09:39Z

Also dont change the factor, Simply change the result method for the images used to this :
'viewport' the size of the resulting image will be the same width and height as the viewport
'original' the size of the resulting image will be at the original scale of the image
Just change the viewport to the original

it''s not making any diffrence in quality and returning that poor quality again . when i am changing like this -
this.$('img').croppie('result', 'base64', 'original', 'jpeg')
Foliotek/Croppie#438

kushthedude · 2019-12-14T16:20:45Z

Also dont change the factor, Simply change the result method for the images used to this :
'viewport' the size of the resulting image will be the same width and height as the viewport
'original' the size of the resulting image will be at the original scale of the image
Just change the viewport to the original
it''s not making any diffrence in quality and returning that poor quality again . when i am changing like this -
this.$('img').croppie('result', 'base64', 'original', 'jpeg')
Foliotek/Croppie#438

@maze-runnar I think you will need to upgrade our croppie version too. Also, The following solution should work.

maze-runnar · 2019-12-14T17:19:30Z

@kushthedude should i update cropipie to 2.6.4 https://www.npmjs.com/package/croppie/v/2.6.4

kushthedude · 2019-12-14T17:25:48Z

Sure just make sure there are not major changes in them, or else it may require you a greater amount of work and time for.

…

On Sat, 14 Dec, 2019, 22:49 Sundaram Dubey, ***@***.***> wrote: @kushthedude <https://github.com/kushthedude> should i update cropipie to 2.6.4 https://www.npmjs.com/package/croppie/v/2.6.4 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3680?email_source=notifications&email_token=AKQMTLUJIF4EFH7YTCBNM2DQYUISHA5CNFSM4JTVDHD2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEG4HCPA#issuecomment-565735740>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKQMTLTMBSILKAYZOZOJXZDQYUISHANCNFSM4JTVDHDQ> .

maze-runnar · 2019-12-14T18:15:19Z

@kushthedude i have upgraded the croppie but still no difference

kushthedude · 2019-12-14T18:25:29Z

Did you check if there is any syntax changes in the new version? As in new we have to define result and follow the method I told you

…

On Sat, Dec 14, 2019 at 11:45 PM Sundaram Dubey ***@***.***> wrote: [image: Screenshot from 2019-12-14 23-42-21] <https://user-images.githubusercontent.com/56407566/70852794-adb90680-1ecb-11ea-84d6-96025b2fdbe1.png> [image: Screenshot from 2019-12-14 23-44-03] <https://user-images.githubusercontent.com/56407566/70852795-adb90680-1ecb-11ea-9cd5-10cdb1eca4fc.png> @kushthedude <https://github.com/kushthedude> i have upgraded the croppie but still no difference — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3680?email_source=notifications&email_token=AKQMTLSNO5R7PEID43RJ42LQYUPDPA5CNFSM4JTVDHD2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEG4IB4A#issuecomment-565739760>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKQMTLVSPY5RSYR5VVHC3ULQYUPDPANCNFSM4JTVDHDQ> .

maze-runnar · 2019-12-21T08:42:01Z

working finally 😌

maze-runnar · 2019-12-21T08:47:23Z

@kushthedude please review

kushthedude · 2019-12-21T16:44:37Z

app/components/modals/cropper-modal.js

@@ -32,7 +32,7 @@ export default ModalBase.extend({
      this.onVisible();
    },
    cropImage() {
-      this.$('img').croppie('result', 'base64', 'original', 'jpeg').then(result => {
+      this.$('img').croppie('result', { type: 'base64', size: 'original', quality: 1 }).then(result => {


@maze-runnar Why did you remove the jpeg ?

i think it's not needed.and it was working fine so i removed it .

Please restore it.

kushthedude · 2019-12-22T15:31:20Z

package.json

@@ -136,7 +136,7 @@
  },
  "private": true,
  "dependencies": {
-    "@bower_components/Croppie": "Foliotek/Croppie#^2.4.1",
+    "@bower_components/Croppie": "Foliotek/Croppie#^2.6.4",


@maze-runnar You sure there will be no changes to yarn.lock for this ?

yes , i don't made any changes beside this in my local . So i am sure .

Revert it, not needed

kushthedude

@maze-runnar One last thing, Just to be on the safe side, Can you please upload a video or GIF showing the images are not scaling down then we can merge it.

maze-runnar · 2019-12-24T07:33:39Z

maze-runnar · 2019-12-24T07:39:49Z

https://youtu.be/xsjCQJfWyrM

maze-runnar · 2019-12-24T08:29:01Z

https://youtu.be/xsjCQJfWyrM

@kushthedude please merge.

package.json

Co-Authored-By: Kush Trivedi <[email protected]>

iamareebjamal · 2019-12-24T18:08:40Z

@kushthedude Please prepare a release

improve quality of image before sending to server

8652bea

auto-label bot added the fix label Dec 2, 2019

improving help text

3367b8b

kushthedude reviewed Dec 2, 2019

View reviewed changes

kushthedude reviewed Dec 5, 2019

View reviewed changes

removing extra help text

e72bb64

Merge branch 'development' into patch-14

680a203

maze-runnar requested a review from kushthedude December 5, 2019 15:26

kushthedude suggested changes Dec 6, 2019

View reviewed changes

removing one from croppie result

0ecbc99

Update cropper-modal.js

963a1ab

Merge branch 'development' into patch-14

1c0c773

maze-runnar requested a review from kushthedude December 21, 2019 08:47

fix build

98867da

kushthedude previously approved these changes Dec 21, 2019

View reviewed changes

kushthedude reviewed Dec 21, 2019

View reviewed changes

maze-runnar added 2 commits December 22, 2019 17:20

Merge branch 'development' into patch-14

9fa1386

updating croppie

b3998f8

maze-runnar dismissed kushthedude’s stale review via b3998f8 December 22, 2019 14:52

Merge branch 'development' into patch-14

a7ef394

kushthedude reviewed Dec 22, 2019

View reviewed changes

restoring file format to 'jpeg'

853a9d1

kushthedude reviewed Dec 24, 2019

View reviewed changes

Merge branch 'development' into patch-14

e72c104

kushthedude reviewed Dec 24, 2019

View reviewed changes

package.json Outdated Show resolved Hide resolved

Update package.json

7ebc34a

Co-Authored-By: Kush Trivedi <[email protected]>

kushthedude approved these changes Dec 24, 2019

View reviewed changes

kushthedude requested review from kushthedude, iamareebjamal and uds5501 December 24, 2019 16:37

iamareebjamal approved these changes Dec 24, 2019

View reviewed changes

iamareebjamal merged commit 9bd3a2e into fossasia:development Dec 24, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: improve quality of image before sending to server #3680

fix: improve quality of image before sending to server #3680

maze-runnar commented Dec 2, 2019

kushthedude Dec 2, 2019

kushthedude Dec 5, 2019

maze-runnar Dec 5, 2019

maze-runnar commented Dec 2, 2019

maze-runnar commented Dec 2, 2019

kushthedude commented Dec 2, 2019 via email

kushthedude Dec 5, 2019

kushthedude commented Dec 5, 2019 via email

maze-runnar commented Dec 5, 2019

kushthedude left a comment •

edited

Loading

kushthedude Dec 6, 2019

kushthedude commented Dec 6, 2019

maze-runnar commented Dec 6, 2019 •

edited

Loading

kushthedude commented Dec 14, 2019

maze-runnar commented Dec 14, 2019

kushthedude commented Dec 14, 2019 via email

maze-runnar commented Dec 14, 2019

kushthedude commented Dec 14, 2019 via email

maze-runnar commented Dec 21, 2019

maze-runnar commented Dec 21, 2019

kushthedude Dec 21, 2019

maze-runnar Dec 22, 2019

kushthedude Dec 22, 2019

maze-runnar Dec 22, 2019

kushthedude Dec 22, 2019

maze-runnar Dec 22, 2019

kushthedude Dec 24, 2019

kushthedude left a comment

maze-runnar commented Dec 24, 2019

maze-runnar commented Dec 24, 2019

maze-runnar commented Dec 24, 2019 •

edited

Loading

iamareebjamal commented Dec 24, 2019

fix: improve quality of image before sending to server #3680

fix: improve quality of image before sending to server #3680

Conversation

maze-runnar commented Dec 2, 2019

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

maze-runnar commented Dec 2, 2019

maze-runnar commented Dec 2, 2019

kushthedude commented Dec 2, 2019 via email

Choose a reason for hiding this comment

kushthedude commented Dec 5, 2019 via email

maze-runnar commented Dec 5, 2019

kushthedude left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kushthedude commented Dec 6, 2019

maze-runnar commented Dec 6, 2019 • edited Loading

kushthedude commented Dec 14, 2019

maze-runnar commented Dec 14, 2019

kushthedude commented Dec 14, 2019 via email

maze-runnar commented Dec 14, 2019

kushthedude commented Dec 14, 2019 via email

maze-runnar commented Dec 21, 2019

maze-runnar commented Dec 21, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kushthedude left a comment

Choose a reason for hiding this comment

maze-runnar commented Dec 24, 2019

maze-runnar commented Dec 24, 2019

maze-runnar commented Dec 24, 2019 • edited Loading

iamareebjamal commented Dec 24, 2019

kushthedude left a comment •

edited

Loading

maze-runnar commented Dec 6, 2019 •

edited

Loading

maze-runnar commented Dec 24, 2019 •

edited

Loading