Comments (8)
@rinoldsimon could you send me what options you are setting prior to changing the source? There may be some we are missing. There are some properties where we tear down and construct a new Cropper instance completely, so some of those options may be getting lost if we aren't copying things over properly.
from ember-cropperjs.
hbs
{{#image-cropper
source=model.profile_photo
options=(hash
aspectRatio=1
viewMode=2
minContainerWidth=748
minContainerHeight=400
...
...
) as |cropper|}}
{{/image-cropper}}
I'm using ember-file-upload
addon for file uploads
So when i select a image file from my local machine uploadPhoto
action will be called where i set source
to the new image.
js
uploadPhoto(file) {
file.readAsDataURL().then((url) => {
set(model, 'profile_photo', url);
...
...
}
In this scenario cropper
source
is changed to the new image. But the previous cropper
options
are not available. So i get a different view with different minContainerWidth
, minContainerHeight
, etc..
According the cropperjs
document there is a method replace(url)
which Replace the image's src and rebuild the cropper.
How to call the replace(url)
method in uploadPhoto
action ?
from ember-cropperjs.
Right, we are calling replace
already here when the source changes: https://github.com/danielthall/ember-cropperjs/blob/master/addon/components/image-cropper.js#L91
I wonder if we're just missing passing additional options after a replace or something. I can dig in a bit more later this evening.
from ember-cropperjs.
hasSameSize
param to true
_cropper.replace(source, true)
works. But the image occupies the same space as the previous one. so if the new image is the portrait
one it gets expanded to the size of the previous landscape
image.
Think this is not the solution
According to the cropperjs
doc, It will not rebuilt the cropper and only update the urls of all related images
from ember-cropperjs.
is the addon uses the latest version of cropperjs
?
from ember-cropperjs.
Thanks for digging in more, @rinoldsimon. Could you try using the branch at https://github.com/danielthall/ember-cropperjs/tree/replace-hasSameSize-fix and let me know if this resolves the issue for you?
You'll just need to add the following to your image-cropper
:
I have an open issue for upgrading to the latest version of cropperjs
. It looks like replace
with the sameSize option is supported in the version we are using though. If this doesn't work, I'll upgrade to the latest version of cropperjs and try again.
from ember-cropperjs.
I forgot to add this rule.
img {
max-width: 100%;
}
adding the above rule fixes the issue
from ember-cropperjs.
@rinoldsimon glad you got it figured out!
from ember-cropperjs.
Related Issues (18)
- How can i get cropped image as base64 encoded data ? HOT 3
- how to call image-copper-call yielded component in template? HOT 19
- Get tests running with CI
- Update documentation to show use cases
- lorempixel.com added to the CSP HOT 1
- Upgrade to latest Ember version with new RFC176 syntax
- poor quality after cropping? HOT 2
- Changing "zoomable" after first initialization doesn't take effect HOT 5
- Add a tag for version `0.8.0` HOT 1
- Issues with re-initializing cropper on attributes change HOT 18
- wrong path to chunk.js when vendor.js loading in async mode
- This Addon is not fastboot compatible.
- calling cropper methods - please add a little bit more documentation
- Use ember-cli-addon-docs for documentation
- Builds of consuming app with postCSS are broken HOT 3
- Convert to a v2 addon
- Upgrade cropperJS to latest release
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ember-cropperjs.