search

alexk111 / ngImgCrop

Image Crop directive for AngularJS (THIS PROJECT IS NOT MAINTAINED ANYMORE)
MIT License
1.12k stars 516 forks source link

Image not showing up in HTML with Angular 1.4 #93

Open drewtunney opened 9 years ago

drewtunney commented 9 years ago

The image does not appear in the box when using Angular 1.4

Here is a fiddle of the demo using 1.4

Is this a known issue?

mgoodfellow commented 9 years ago

Under "Frameworks & Extensions" use No wrap - in <head> or No wrap - in <body> instead of onLoad. Click Run again, and it works fine for me.

If you check the dev console, you will see that the original setting is throwing an error:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.5/$injector/modulerr?p0=app&p1=Error%3A%20%…udflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.5%2Fangular.min.js%3A19%3A381)

Which resolves to:

Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
SempaChoo commented 9 years ago

@mgoodfellow What about in custom project, not fiddle version ? I've got the same problem but what does "No wrap - in or No wrap - in " means ? Thx

mgoodfellow commented 9 years ago

The No wrap options are simply to do with how/when the code is executed. If the code is running on the "onLoad" event of the page, it is too late, and Angular has already tried to bind the app module (which doesn't exist yet) because of <body ng-app="app" ng-controller="Ctrl">

See a description of the settings here: http://doc.jsfiddle.net/basic/introduction.html

When the JS is not wrapped, and simply put in script tags at the head/body, then the angular module will be correctly defined when angular tries to bind to the HTML.

To be honest, I'm not sure why this is affecting you - it should only be an oddity because of JSFiddle.

Btw - as an aside, I don't use this library, I was coming through assessing different options for an image cropper and I was intrigued by the original issue as I want it for AngularJS 1.4!

After going through some different options, I'm actually going to try https://github.com/AllanBishop/angular-img-cropper as this project seems to be abandoned, see https://github.com/alexk111/ngImgCrop/issues/83

mgoodfellow commented 9 years ago

@SempaChoo it looks like you might be describing: https://github.com/alexk111/ngImgCrop/issues/91

Although, I notice in the given URL it shows 1.3.14 as the AngularJS version which isn't latest.

SempaChoo commented 9 years ago

@mgoodfellow Thank you on your explanation. When I download full zip on my desktop and test it it works but not in my project files.. I remove all my custom scripts and everything but still nothing. I dont think it is a problem in angular version and I dont have any errors. Its just that result image wont show.. :(

albertonaperijr commented 9 years ago

Hi Guys,

I encountered the same problem with ng-img-crop but I managed to make it work so I just want to share what I did to make it work. Here's the demo in jsfiddle: https://jsfiddle.net/albertonaperijr/3ybymvmL/1/

and the code:

HTML:

Just add onchange="angular.element(this).scope().uploadFile(this.files[0])" in the input tag.

E.g.

<input type="file"
       id="fileInput"
       onchange="angular.element(this).scope().uploadFile(this.files[0])" />

JS:

Replace

var handleFileSelect = function(evt) {
    var file = evt.currentTarget.files[0];
    var reader = new FileReader();
    reader.onload = function(evt) {
        $scope.$apply(function($scope) {
            $scope.myImage = evt.target.result;
        });
    };
    reader.readAsDataURL(file);
};
angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect);

With

$scope.uploadFile = function(file) {
    if (file) {
        // ng-img-crop
        var imageReader = new FileReader();
        imageReader.onload = function(image) {
            $scope.$apply(function($scope) {
                $scope.myImage = image.target.result;
            });
        };
        imageReader.readAsDataURL(file);
    }
};

Hope this helps.

SempaChoo commented 9 years ago

@bebertz93 Thank you on ur example, but I see that you modified uploadImage function.. But my resultImage still not showing.. I am using angular 1.4 and I dont have any errors in my console :(

albertonaperijr commented 9 years ago

@SempaChoo Sorry, I mistakenly put the scope that I'm using in my project.

You can fix it by changing:

$scope.cropper.myImage = image.target.result;

To

$scope.myImage = image.target.result;

I updated my earlier comment.

drewtunney commented 9 years ago

@bebertz93 thank you, this works :+1:

albertonaperijr commented 9 years ago

@drewtunney Your welcome.

SempaChoo commented 9 years ago

@albertonaperijr Can you provide me with ur full structure please cuz I cant still get it to work :{ . I changed everything you posted but still nothing... Uploaded image is showing but the result one nahh

albertonaperijr commented 9 years ago

@SempaChoo That's the full structure that I'm using in my project (JSFiddle demo link) but you can provide us the sample your code so that we can help you to check/debug your code.

By the way, you can try declaring your image source and cropped image result inside an object. It's safer to declare it that way. JSFiddle link

E.g.

HTML:

<img-crop image="cropper.myImage" result-image="cropper.myCroppedImage"></img-crop>
<input type="file"
       id="fileInput"
       onchange="angular.element(this).scope().uploadFile(this.files[0])" />

JS:

$scope.cropper = {
    myImage: '',
    myCroppedImage: ''
};

$scope.uploadFile = function(file) {
    if (file) {
        // ng-img-crop
        var imageReader = new FileReader();
        imageReader.onload = function(image) {
            $scope.$apply(function($scope) {
                $scope.cropper.myImage = image.target.result;
            });
        };
        imageReader.readAsDataURL(file);
    }
};

Hope this will help you.

SempaChoo commented 9 years ago

@albertonaperijr Damnn, I still can't get it to work and I realy don't know why :( I dont know how to embed these "code blocks" like you do cuz I am new here but I can tell you my project setup.

-I use express skeleton for nodejs -latest version of angularjs

I added this to my code in controller :

$scope.showChange = function() { console.log($scope.cropper.myCroppedImage); }

and myCroppedImage property has a value of a new image, but my view is not updating and I can't see cropped image

albertonaperijr commented 9 years ago

@SempaChoo Can you provide a jsFiddle demo that will recreate the problem? It's hard to fix/debut without seeing it in actual.

SempaChoo commented 9 years ago

@albertonaperijr I dont know why and how but on fiddle It works and you can see it here http://jsfiddle.net/SenMe/7jta70ry/ . Only thing that is different is my project structure.. I use express node skeleton and view extensions are not .html but .hjs

gianko commented 8 years ago

@albertonaperijr it doesn't work with Angular .1.4.8

albertonaperijr commented 8 years ago

@gianko I guess it's because the versions of the two are not compatible since this rep was no longer being maintained.