Empty pixels are removed on the left and top - Safari

[alexandru-dodon]

Looks like there is an issue on Safari: when making an image smaller than the stencil and leaving empty pixels on the left side and the top, the canvas returned by the package cuts those pixels.

Here's the image within the cropper (the orange background is on the cropper for illustration purposes):

Here's the image produced from the canvas that we get from the cropper:

This is only reproduced on Safari (mine was 15.3), but not on Chrome or Firefox (these browsers crop perfectly).

[Norserium]

@alexandru-dodon, hello!

Thank you for the valuable report, I will investigate this issue.

Could you take a look at this sandbox and test your case here (it's the similar library)? Did you try to reproduce this issue in another croppers?

[alexandru-dodon]

@Norserium I haven't tested with other croppers for now (haven't had the time). However, the sandbox you're pointing to restricts the image from being zoomed out until it's smaller than the cropper. I will change the parameters to allow this to happen and will test on Safari, but later today. Thank you for the quick reply!

[Norserium]

@alexandru-dodon, there is the another sandbox.

[alexandru-dodon]

@Norserium just tested and the same thing seems to be happening on Safari.

Here's the cropper:

Here's the cropped image:

And here's the same situation on Firefox.

The cropper:

The cropped image:

[Norserium]

@alexandru-dodon, it's my cropper and it's similar under the hood, so it was predictable. Could you test any other cropper? It will be helpful for me, because I can compare my implementation and its implementation.

[alexandru-dodon]

@Norserium I will try, but don't know if will get the chance to do that today.

[Norserium]

@alexandru-dodon, don't worry, there is no rush here.

[alexandru-dodon]

@Norserium I fixed the issue locally. The problem is in drawImage because Safari ignores negative sx and sy values, so we have to default sx and sy to 0 while offsetting dx and dy by the values that were in sx and sy.

I can share the code later in the evening if you need it.

[Norserium]

@alexandru-dodon, thank you! The code will be very helpful.

[Norserium]

@alexandru-dodon, any news?

[Norserium]

@alexandru-dodon, any news?

[upperhouse]

Hello @Norserium. Wondering if you have found any possible workaround on this? Thank you.

[alexandru-dodon]

@Norserium sorry, I disappeared! I had a very long break from work and all.

I've opened a PR into vue-next to fix this issue: https://github.com/advanced-cropper/vue-advanced-cropper/pull/214

[Norserium]

@alexandru-dodon, nice to see you and thank you for your contribution!

Could you move the changes to the master branch and make PR into master? Also I can copy the changes from your PR to my code directly if you don't mind.

[Norserium]

@alexandru-dodon, I moved your commit to master (with preserving the authorship). The pull request was closed. Thank you for your contribution again.

[Norserium]

@upperhouse, try to update to 1.11.4 (2.8.5 for Vue 3).

[upperhouse]

@Norserium, thanks for your help. I am running into errors when attempting to build this via Parcel:

🚨 /Users/erikoberhausen/Documents/upperhouse/sukle/awkwardagent/_dev/vuecropper/vuecrop/node_modules/vue-advanced-cropper/dist/index.es.js: Unexpected token: punc (.) at Z.get (/opt/homebrew/lib/node_modules/parcel-bundler/node_modules/terser/dist/bundle.min.js:1:525) at Object.errorToJson (/opt/homebrew/lib/node_modules/parcel-bundler/node_modules/@parcel/utils/src/errorUtils.js:9:20) at Pipeline.process (/opt/homebrew/lib/node_modules/parcel-bundler/src/Pipeline.js:29:26) at async Object.run (/opt/homebrew/lib/node_modules/parcel-bundler/src/worker.js:15:12) at async Bundler.loadAsset (/opt/homebrew/lib/node_modules/parcel-bundler/src/Bundler.js:577:19) at async /opt/homebrew/lib/node_modules/parcel-bundler/src/Bundler.js:610:13 at async Promise.all (index 1) at async Bundler.loadAsset (/opt/homebrew/lib/node_modules/parcel-bundler/src/Bundler.js:599:21) at async /opt/homebrew/lib/node_modules/parcel-bundler/src/Bundler.js:610:13 at async Promise.all (index 2) at async Bundler.loadAsset (/opt/homebrew/lib/node_modules/parcel-bundler/src/Bundler.js:599:21) at async /opt/homebrew/lib/node_modules/parcel-bundler/src/Bundler.js:610:13 at async Promise.all (index 1) at async Bundler.loadAsset (/opt/homebrew/lib/node_modules/parcel-bundler/src/Bundler.js:599:21) at async Bundler.processAsset (/opt/homebrew/lib/node_modules/parcel-bundler/src/Bundler.js:557:5) at async PromiseQueue._runJob (/opt/homebrew/lib/node_modules/parcel-bundler/src/utils/PromiseQueue.js:48:7)

Here is my package.json from my small test setup, that is separate from my application:

{ "name": "vue-advanced-cropper-fillcolor", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "vue": "^2.6.12", "vue-advanced-cropper": "1.11.4" }, "devDependencies": { "@vue/cli-plugin-babel": "3.6.0", "@vue/cli-plugin-eslint": "3.6.0", "@vue/cli-service": "3.6.0", "babel-eslint": "^10.0.1", "eslint": "^5.8.0", "eslint-plugin-vue": "^5.0.0", "parcel": "^2.7.0", "sass": "^1.54.3", "vue-template-compiler": "^2.6.12" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ], "keywords": [], "description": "" }

I also tried reinstalling all the modules with 'vue-advanced-cropper' backed down to '1.11.3', and it then built successfully, but it still might just be something broken with my setup, or Parcel, that isn't allowing a build with the new version. Let me know what you think.

I did also just setup the same changes you made in the PR, into a method with my current Vue app that is still using 1.11.3, and that indeed is fixing the issue with Safari.

Thanks for your time....

[Norserium]

@upperhouse, try to update to 1.11.5.

[upperhouse]

@Norserium, all looks good. Build is successful and issue in Safari is fixed.

Thanks very much!

[Norserium]

@upperhouse, that's nice. I close issue then.