bcabanes / angular-image-cropper Goto Github PK
View Code? Open in Web Editor NEWAngularJS directive for cropping images.
AngularJS directive for cropping images.
Hello, the callback method is being called more than once, repeatedly sends to the server, it has happened before?
Sorry the English.
Hey bcabanes,
Great directive!
Just having some trouble with the zoom api, it doesn't seem to work for integers less than 3 (including negative numbers).
Ideally, I'd like to pass in zoom(1) or zoom(-1).
See codepen link, try playing around with the settings on the "Zoom API" button.
I could not find this file anywhere in the repo.
Hi,
This looks really interesting. I would love to test it out. I'm trying to download the 0.1.0 release using bower and it looks like the version released is 0.1.0 but the version declared in the json is 0.0.1. As a result I'm not able to download it.
bower ng-image-cropper#* download https://github.com/bcabanes/angular-image-cropper/archive/v0.1.0.tar.gz
bower ng-image-cropper#* extract archive.tar.gz
bower ng-image-cropper#* mismatch Version declared in the json (0.0.1) is different than the resolved one (0.1.0)
bower ng-image-cropper#* resolved git://github.com/bcabanes/angular-image-cropper.git#0.1.0
bower angular-image-cropper#~0.1.0 ENORESTARGET No tag found that was able to satisfy ~0.1.0
In your bower.json the version is 0.0.1.
As the title indicates, if you have an image that doesn't have the same width as it does height, calling rotateImage() causes part of the image to be cut off, since the css.left value is, in my current sample, -33.3333%. setting this.elements.image.style.left = 0 right after the transform occurs makes it so the image is no longer cut off. the side effect of this is that the image is now stretched, since it's using the image height instead of the width.
i think a check to see if width > height needs to be in this function somewhere and then depending on the outcome of that, the newWidth and newHeight values are adjusted accordingly.
Please support "bower install" version support
bower install angular-image-cropper
Currently it updates bower.json to
"angular-image-cropper": "*"
It should update to i.e. same as package.json
"angular-image-cropper": "~1.1.5"
Hi,
Any thoughts on upgrading this to Angular 2?
Thanks!
Hi,
when adding new image croppers to the page, the existing image croppers zooms out if it's zoomed in.
Codepen: https://codepen.io/anon/pen/MybPwK
To reproduce the issue, zoom in the existing image cropper and then click the "Add one more" button.
I have the directive loaded with the image url on the directive bound to a property on my controller.
In my setup, a user can select the image to view, and I change the url source on my controller. However, the image does not update or reinitialize when the url changes.
It seems the directive does not get along with transparent images properly. In my case it's converting the background color to black.
I detect this behavior and is more common if you are zoomed and the box is small (so you need to drag a lot).
When you drag outside the box the image stops moving. If you release the click doesnt really release it until you are inside the box and click-release again. Also when you go back to the box the image "jumps" to adjust the origin-dragging-point to the new mouse position inside the box.
I think one solution is avoiding to go outside the box when you are dragging (dunno if this is posible) so every time you release you are always inside.Or maybe if you reach some of the edges of the box force the release.
The other solution could be enable dragging outside the box (until some limit is reached) and enable releasing the mouse outside too.
I'am getting this exception: "Cropper: No image url given." because I'am setting the image-url after the initialization of the directive. I'am requesting to a web service an object including the URL and binding the result to the image-url attribute but when the init() is called the exception is raised.
Is there a way to initialize the directive manually?
Error: Cropper: No image url given.
at new Cropper (http://localhost/web/app/bower_components/ng-image-cropper/dist/angular-image-cropper.js:87:12)
at module.exports.angular.module.directive.controller.init (http://localhost/web/app/bower_components/ng-image-cropper/dist/angular-image-cropper.js:889:25)
at module.exports.angular.module.directive.link (http://localhost/web/app/bower_components/ng-image-cropper/dist/angular-image-cropper.js:894:23)
at http://localhost/web/app/bower_components/angular/angular.js:8211:44
at invokeLinkFn (http://localhost/web/app/bower_components/angular/angular.js:8217:9)
at nodeLinkFn (http://localhost/web/app/bower_components/angular/angular.js:7726:11)
at compositeLinkFn (http://localhost/web/app/bower_components/angular/angular.js:7075:13)
at publicLinkFn (http://localhost/web/app/bower_components/angular/angular.js:6954:30)
at boundTranscludeFn (http://localhost/web/app/bower_components/angular/angular.js:7093:16)
at controllersBoundTransclude (http://localhost/web/app/bower_components/angular/angular.js:7753:18)
Hi,
I'm just wondering if it would be at all possible for you to allow the cropper to work with cross origin images at all? Currently, I get the following error when trying to access an image stored in amazons3:
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
I have made sure that the I have given my amazons3 bucket the required CORS rule to allow for cross origin images, however, the directive still does not work with these types of image.
Is there anything that could be done here?
Thanks
Hi,
Is there any way to declase image cropper controls outside the tag??
Hi,
I've been trying to upload an image and covert it to a base64, but when uploading another image again the cropper is not updating the image
hi i have implemented a range slider to zoom in & zoom out but i am not table to perfectly zoom-in & zoom-out using slider
here is what am i done so far
this.elements.controls.zoomEr.addEventListener('change', function(e,v) {
var newValue = e.target.value;
if (newValue > oldValue) {
self.applyZoom(1 + parseFloat(newValue));
} else {
self.applyZoom(1 - parseFloat(newValue));
}
oldValue = newValue;
});
can you pls help me to get it working perfectly
Regards
Every time i try to zoomIn/Out i get this error: Uncaught TypeError: self.applyZoom is not a function
In fact in the code, there is no applyZoom function! We just have this:
Cropper.prototype.bindControls = function() {
var self = this;
this.elements.controls.zoomIn.addEventListener('click', function() {
self.applyZoom(self.zoomInFactor);
});
this.elements.controls.zoomOut.addEventListener('click', function() {
self.applyZoom(self.zoomOutFactor);
});
};
Cropper.prototype.applyZoomIn = function(zoom) {
this.zoomImage(1 + parseFloat(zoom));
};
Cropper.prototype.applyZoomOut = function(zoom) {
this.zoomImage(1 / ( 1 + parseFloat(zoom)));
};
Then i went on the demo page to look at the code and i saw this:
Cropper.prototype.bindControls = function() {
var self = this;
this.elements.controls.zoomIn.addEventListener('click', function() {
self.applyZoom(self.zoomInFactor);
});
this.elements.controls.zoomOut.addEventListener('click', function() {
self.applyZoom(self.zoomOutFactor);
});
};
Cropper.prototype.applyZoom = function(zoom) {
this.zoomImage(zoom);
};
This code is working, everything is fine. But where do i get this code? I tried bower, npm and git but no way to find a working version. Can you help me?
Hi,
I'm getting this error ever since I've upgraded to Angular v1.6.x: this.actionLabels is not a function
.
I even tried the homepage demo with the new version of Angular and the same error is showing. If I revert the Angular version, the error goes away.
Any ideas what is causing this and how to fix it?
Thanks,
San
Hi,
I installed angular-image-cropper with bower and then injected it using wiredep.
Wiredep was not able to inject the .js and .css file into my application because here you have specified to add dist/angular-image-cropper.js file but it doesn't exist. Instead of this, you should have the following in the bower.json file
"main": ["./dist/angular-image-cropper.min.js, ./dist/angular-image-cropper.min.css"]
Our application does not use JQuery and refers Angualrs JQlite. But the angular-image-cropper, does not work without Jquery. Can you just edit the line in the directive, where it uses angular.element('body') to angular.element(document).find('body').
This would be really great and I can use this without have to tweak it too much
Thanks
While rotating an image (using controls), it doesn't rotate top/right/bottom/left, only top/bottom.
If image cropper is located inside form
, it submit form
when clicking on cropper control buttons.
Because default button
type is submit
<button>Ok</button> === <button type="submit">Ok</button>
Hi, I want to change cropper width and height dynamically and I am doing the below
<image-cropper image-url="{{imageURL}}"
width="{{cropper.width}}"
height="{{cropper.height}}"
show-controls="true"
fit-on-init="false"
center-on-init="true"
crop-callback="setSelectedTileBg"
ng-if="imageURL"
></image-cropper>
In controller Im using
$scope.cropper = { width:$element.context.offsetWidth,height:$element.context.offsetHeight};
Any help??
Exploring the directive.js file in your Dev folder of project, I have seen the directive adds classes like imgCropper-dragging
so the css could change the style.
Unfortunately my version is not adding any classes.
What I wanted to achieve was to play around with css to make a blur version of image that is outside of canvas so that the user would see the rest of image that is not cropped. That was were I found out the classes you intended to add are not adding at all!!
Any help would be appreciated.
Hello !
I'm looking for a way to not display rotate buttons controls can you help me ?
Maybe you can help me with another issue, i'm using ionic and i want to apply crop changes on another button located in a ion-footer. My save button call the same function but the image isn't cropped when i save :
` <ion-content>
<ion-list>
<ion-item>
<div class="imgCropper_layer"></div>
<img ng-if="!image_cropper_url" src="{{profil.image}}" alt="" style="width: 100%; height: 300px; overflow:hidden">
<img ng-src="imageURI" alt="" style="display: none">
<image-cropper class="crop_container" image-url={{image_cropper_url}}
width="500"
height="300"
show-controls="true"
fit-on-init="true"
center-on-init="true"
zoom-step="0.05"
crop-callback="update_result_cropper_image"
action-labels="my_cropper_button_labels"
ng-if="image_cropper_url"
></image-cropper>
</ion-item>
</ion-list>
<div class="margin-auto text-center">
<button class="button button-large button-default btn-rounded" ng-click="get_photo()">{{"prendre_photo" | translate}}</button>
<br>
<br>
<span class="text-center">Ou</span>
<br>
<input type="file" class="custom-file-input" onchange="angular.element(this).scope().setFile(this)" placeholder="." accept="image/*"/>
</div>
</ion-content>
<ion-footer-bar>
<button class="button button-block button-large button-positive " ng-click="update_result_cropper_image()">{{"sauvegarder" | translate}}</button>
</ion-footer-bar>`
Thank you for you help !
Hi,
I was using your project from bower and there used to be a dist folder with:
angular-image-cropper.min.css
angular-image-cropper.min.js
With the update to 1.0 these files are missing.
Hi, it seems like zoom-step doesn't work properly. I've tried changing it from 0.1 to 0.9, but it's always the same zoom. Browsers: Safari (v 9.0.3), Chrome Canary(v 50.0.2652.0), Firefox (v 43.0.4).
Hi,
It would a good option to export the crop as png files to preserve transparency. We can add this as an option which defaults to jpg but we can override it.
I see the code to export the crop is this:
var base64 = canvas.toDataURL('image/jpeg');
this.events.triggerHandler('Cropped', base64);
We can just change it to
var base64 = canvas.toDataURL(this.options.format); //default is still jpeg for BC
this.events.triggerHandler('Cropped', base64);
What do you think? Should I submit a PR?
Thanks!
San.
I can see this behavior on example page: http://bcabanes.github.io/angular-image-cropper/
As I understand, if image is "fit" it should be fully visible? Please advice, what I'm missing
TypeError: Cannot read property 'wrapper' of undefined
at Cropper.remove (http://localhost:9000/bower_components/ng-image-cropper/dist/angular-image-cropper.js:297:49)
Throws error on the last line of this code:
/**
* Remove all DOM element parts of the Cropper.
*/
Cropper.prototype.remove = function() {
var elements = this.elements;
elements.target.removeChild(elements.wrapper);
elements.target.removeChild(elements.controls.wrapper);
};
After cropping the image from tool if we compare new image with original image then the quality is very poor.
Hello,
Does this usefull module work well with angular 1.4.* ?
I'm using 1.4.7 and no controll button is displayed. What can I do ?
Hey @bcabanes ,
I would like that the crop is initialized anytime the user takes an action ( move, rotate, etc ) so the user is not dependent on clicking the crop action.
Do you have any plans to roll this out at all ?
I implemented this already, but wondering on your thoughts if there is a better approach or should I submit a Pull Request ?
Thanks
angular-image-cropper.js
Here is what I added for it to work.
this.elements.controls.rotateLeft.addEventListener('click', function() {
self.applyRotation(-90);
self.elements.controls.crop.click(); // line added
});
this.elements.controls.rotateRight.addEventListener('click', function() {
self.applyRotation(90);
self.elements.controls.crop.click(); // line added
});
this.elements.controls.zoomIn.addEventListener('click', function() {
self.applyZoomIn(self.zoomInFactor);
self.elements.controls.crop.click(); // line added
});
this.elements.controls.zoomOut.addEventListener('click', function() {
self.applyZoomOut(self.zoomOutFactor);
self.elements.controls.crop.click(); // line added
});
And another in move function
// Move.
this.setOffset(left, top);
this.elements.controls.crop.click(); // line added
Hello,
I'd just like to say thanks for the plugin - it really has helped me as I was struggling to find anything that was suitable for cropping on a mobile device and almost got ready to develop something like this myself. You've saved me a lot of time!
I have one question though (and I'm not sure it's an issue) - when I change the original image dynamically to an image which is smaller in size, some of the cropped image result is cut off and displayed as blank. I'm guessing that I need to somehow refresh the directive once the image has been changed. Is there an easy way to achieve this?
when i import imageCropper.js file to admin.jsp it is showing imageCropper.js:1 Uncaught ReferenceError: module is not defined error.
how to fix this error ?
imageCropperDirective.js:5 Uncaught ReferenceError: module is not defined
at imageCropperDirective.js:5
It seems in order to use this you need to use javascript modules.
hello,
Firstly, thank you for the brilliant work. I have it working in my angular application, however what are the best practices for setting the size of the Cropping canvas?
For example, if I want to allow users to crop large images to a size of 500x150. I want to display the crop tool at the size 500x150. At the moment it just fills the container.
@bcabanes I see many issues not responded to in many months.
What's the status of any of these issues and pull requests?
im using the image croper in a $uibModal template like this:
<image-cropper image-url=" promises[0].$$state.value + "
width="options.width"
height="options.height"
show-controls="true"
"it-on-init="true"
center-on-init="true"
crop-callback="updateResultLogo"
check-cross-origin="false"
zoom-step="options.zoom+""
action-labels="myButtonLabelsObject"></image-cropper>
i use the width & height dynamically bec. its possible to upload such small pictures, that a 3000*300 output div looks bad. Is it possible to change the zoom calculation depends on image size? Or to generate the zoom calculation with a separate function?
Has anyone been successful using image cropper with ng file upload?
Dynamic appending on imageUrl attribute seems not working. The image url is showing as 'undefined'.
Here's the ngf uploader and a cropper
<div type="file"
ng-model="myfile"
ngf-select
ngf-drop
ngf-model-options="{updateOn: 'change click drop dropUrl paste', debounce: 0}"
ngf-pattern="image/*"
ngf-allow-dir="true">
</div>
<image-cropper
ng-if="myfile"
imageUrl="{{myfile | ngfDataUrl}}"
width="1000" height="1000"
show-controls="true"
fit-on-init="false"
center-on-init="true"
check-cross-origin="false"
zoom-step="0.1"
action-labels="myButtonLabelsObject">
</image-cropper>
Hello,
first to say, great work with the cropper.
But we have a big issue at the moment, since you released 1.1.8 the bower install isn't available anymore.
Overtime we try to access it by bower following exception occurs:
Server error: ENOENT: no such file or directory, lstat '/tmp/[email protected]/tmp/[email protected]/bower.zip'
Can you please fix this? It is quite urgent, cause our project is not able to build anymore.
Thanks
Florian
It looks like it's just using CSS to rotate, is it possible to save it's mutated state?
How can I set aspect ratio so user can crop the image under that aspect ratio?
Like using an attr aspect-ratio="1.3"
or api?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.