cstefanache / angular2-img-cropper Goto Github PK

Hi!

After following your quickstart tutorial, I am facing a js error which is :

platform-browser.umd.js:2311 EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'visitStatement' of undefined

I am running @angular rc.3

The problem is clearly not coming from my html template because when I remove the img-cropper related code from it, I am still facing the same error.

Does anyone know where it could come from ?

Here is the complete Typescript code I am using :

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router-deprecated'
import { Response } from '@angular/http';

// Services
import { UserService } from './../services/user.service';
import { FileService } from './../services/file.service';

// Image cropping
import { ImageCropperComponent, CropperSettings } from 'ng2-img-cropper';

@Component({
    providers: [UserService, FileService],
    directives: [RouterLink, ImageCropperComponent],
    selector: 'profile-preview',
    templateUrl: '../templates/profile-preview.component.html',
})

export class ProfilePreviewComponent {
    user: any = [];
    experiences: any = [];
    education: any = [];
    testimonials: any = [];
    profilePicture: any = [];
    data: any;
    cropperSettings: CropperSettings;

    constructor(private userService: UserService,
                private fileService: FileService) {
        let __this = this;

        this.user = JSON.parse(localStorage.getItem('user'));

        this.userService.getExperiences().subscribe((res: Response) => {
            __this.experiences = res.json();
        });

        this.userService.getEducation().subscribe((res: Response) => {
            __this.education = res.json();
        });

        this.userService.getTestimonials().subscribe((res: Response) => {
            __this.testimonials = res.json();
        });

        this.cropperSettings = new CropperSettings();
        this.cropperSettings.width = 100;
        this.cropperSettings.height = 100;
        this.cropperSettings.croppedWidth =100;
        this.cropperSettings.croppedHeight = 100;
        this.cropperSettings.canvasWidth = 400;
        this.cropperSettings.canvasHeight = 300;

        this.data = {};
    }
}

Thanks very much in advance for your help

Cheers

Hi,

I am using the below settings for cropper. The cropper doesn't seem to return the correct coordinates of the cropped image if the height of the image is less than the canvas height.

export class TestComponent {

cropData: any;
cropSettings: CropperSettings;
@ViewChild('cropper', undefined) cropper: ImageCropperComponent;

constructor() {
    this.cropSettings = new CropperSettings();
    this.cropSettings.width = 200;
    this.cropSettings.height = 200;
    this.cropSettings.keepAspect = true;

    this.cropSettings.croppedWidth = 200;
    this.cropSettings.croppedHeight = 200;

    this.cropSettings.canvasWidth = 643;
    this.cropSettings.canvasHeight = 482;

    this.cropSettings.minWidth = 150;
    this.cropSettings.minHeight = 150;

    this.cropSettings.minWithRelativeToResolution = true;

    this.cropSettings.cropperDrawSettings.strokeColor = '#ffffff';
    this.cropSettings.cropperDrawSettings.strokeWidth = 2;
    this.cropSettings.noFileInput = true;
    this.cropSettings.rounded = true;

    this.cropData = {};
}

edit(image:string) {
        var img = new Image();
        img.src = image;
        var that = this;
        img.onload = function () {
            that.cropper.setImage(img);
        }
}

}

Hello,

Any chance this component can be updated to work with RC4 or RC5 (since 5 is already released)?
I'm seeing that package.json specifies RC1.

Best Regards

EDIT

Installing on RC4 does not throw an npm error of unmet dependencies. It'll need further validation to confirm if indeed it works with more recent versions of Angular2

Though the cropper works with RC 6, but it would be better to add support for Angular 2 RC 6 NgModule.

I can't able to change my canvas size in chrome browser. Its perfectly work fine in firefox browser.
How can i solve this problem?

It would be nice to crop images without a fixed aspect ratio.

Are there any plans to include pinch-and-zoom feature?

On Chrome stable:

browser_adapter.ts:78 TypeError: Cannot create property 'numerator' on number '72'
at Function.Exif.readTagValue (exif.ts:595)
at Function.Exif.readTags (exif.ts:535)
at Function.Exif.readEXIFData (exif.ts:677)
at Function.Exif.findEXIFinJPEG (exif.ts:424)
at handleBinaryFile (exif.ts:348)
at Function.Exif.getImageData (exif.ts:360)
at Function.Exif.getData (exif.ts:741)
at ImageCropperComponent.getOrientedImage (imageCropperComponent.ts:144)
at eval (imageCropperComponent.ts:130)
at ZoneDelegate.invokeTask (zone.js:356)

Is there a way to set the minimul cropp area?
I know in the cropper settings you can set up the initial cropp area size, but I would like to be able to set the minimum cropp area size.(and I need the cropp area size to be smaller then the current minimum cropp size).

Is this possible, or we have to implement this feature ?

When I want to use the image cropper using the angular-cli latest version(now it switch to webpack), i get some errors when trying to run "npm i ng2-img-cropper --save"

305 silly lifecycle [email protected]~postinstall: Args: [ '-c', 'typings install' ]
306 info lifecycle [email protected]~postinstall: Failed to exec postinstall script
307 verbose unlock done using /home/mike/.npm/_locks/staging-15aa102294960ce4.lock for /home/mike/dev/repos/repo/myProj/node_modules/.staging
308 silly rollbackFailedOptional Starting
309 silly rollbackFailedOptional Finishing
310 silly runTopLevelLifecycles Finishing
311 silly install printInstalled
312 warn optional Skipping failed optional dependency /chokidar/fsevents:
313 warn notsup Not compatible with your operating system or architecture: [email protected]
314 warn [email protected] requires a peer of [email protected] || 2.x.x but none was installed.
315 verbose stack Error: [email protected] postinstall: `typings install`
315 verbose stack spawn ENOENT
315 verbose stack     at ChildProcess.<anonymous> (/home/mike/.npm-packages/lib/node_modules/npm/lib/utils/spawn.js:33:16)
315 verbose stack     at emitTwo (events.js:106:13)
315 verbose stack     at ChildProcess.emit (events.js:191:7)
315 verbose stack     at maybeClose (internal/child_process.js:877:16)
315 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
316 verbose pkgid [email protected]
317 verbose cwd /home/mike/dev/repos/repo/myProj
318 error Linux 4.4.0-36-generic
319 error argv "/usr/bin/nodejs" "/home/mike/.npm-packages/bin/npm" "i" "ng2-img-cropper" "--save"
320 error node v6.5.0
321 error npm  v3.10.7
322 error file sh
323 error code ELIFECYCLE
324 error errno ENOENT
325 error syscall spawn
326 error [email protected] postinstall: `typings install`
326 error spawn ENOENT
327 error Failed at the [email protected] postinstall script 'typings install'.
327 error Make sure you have the latest version of node.js and npm installed.
327 error If you do, this is most likely a problem with the ng2-img-cropper package,
327 error not with npm itself.
327 error Tell the author that this fails on your system:
327 error     typings install
327 error You can get information on how to open an issue for this project with:
327 error     npm bugs ng2-img-cropper
327 error Or if that isn't available, you can get their info via:
327 error     npm owner ls ng2-img-cropper
327 error There is likely additional logging output above.
328 verbose exit [ 1, true ]

I am not sure if I am doing something wrong, or there is a problem with the cropper not getting along with webpack.
It is working fine when using the angular-cli with broccoli

On mobile the crop area can be dragged outside the image thus causing the preview to not update

In sample punkler is possible to reproduce the issue:

https://embed.plnkr.co/V91mKCNkBQZB5QO2MUP4/

When I use the integrated file input, the cropped img is set automatically.

When I use the sample cropper 2, the cropped img is only set if I move the cursor.

It would be great if the colors were customizable via CropperSettings. That would make it a lot easier to adjust the cropper to corporate style guides. In terms of customization it would be awesome if one could pass down a css class name to the file input.

When cropAspect == sourceAspect the cropper dimensions are smaller than they should be.
Plunker: https://embed.plnkr.co/GdlRu0q3EEWEnvnwRFom/

The following code is wrong:
(Extracted from imageCropper, lines 667 to 688)

if (cropAspect > sourceAspect) {
   var imageH = Math.min(w * sourceAspect, h);
    var cropW = imageH / cropAspect;
    tlPos = PointPool.instance.borrow(cX - cropW / 2, cY + imageH / 2);
    trPos = PointPool.instance.borrow(cX + cropW / 2, cY + imageH / 2);
    blPos = PointPool.instance.borrow(cX - cropW / 2, cY - imageH / 2);
    brPos = PointPool.instance.borrow(cX + cropW / 2, cY - imageH / 2);
} else if (cropAspect < sourceAspect) {
    var imageW = Math.min(h / sourceAspect, w);
    var cropH = imageW * cropAspect;
    tlPos = PointPool.instance.borrow(cX - imageW / 2, cY + cropH / 2);
    trPos = PointPool.instance.borrow(cX + imageW / 2, cY + cropH / 2);
    blPos = PointPool.instance.borrow(cX - imageW / 2, cY - cropH / 2);
    brPos = PointPool.instance.borrow(cX + imageW / 2, cY - cropH / 2);
} else {
    var imageW = Math.min(h, w);
    var cropH = imageW * cropAspect;
    tlPos = PointPool.instance.borrow(cX - imageW / 2, cY + cropH / 2);
    trPos = PointPool.instance.borrow(cX + imageW / 2, cY + cropH / 2);
    blPos = PointPool.instance.borrow(cX - imageW / 2, cY - cropH / 2);
    brPos = PointPool.instance.borrow(cX + imageW / 2, cY - cropH / 2);
}

I believe deleting the 'else' block and changing the 'else if' to just 'else' solves the problem. I'm going to submit a PR in a few hours.

I have this error when i select a file on my html page.

`zone.js:260 Uncaught EXCEPTION: Error in ./ImageCropperComponent class ImageCropperComponent - inline template:2:25
ORIGINAL EXCEPTION: RangeError: Maximum call stack size exceeded
ORIGINAL STACKTRACE:

browser_adapter.js:77 RangeError: Maximum call stack size exceeded
at get (zone.js:966)
at get (zone.js:966)
at get (zone.js:966)
at get (zone.js:966)
at get (zone.js:966)
at get (zone.js:966)
at get (zone.js:966)
at get (zone.js:966)
at get (zone.js:966)
at get (zone.js:966)
`
Don't understand where it comes from. I use ZoneJs but i don't see where the loop on get come from.

In the following code:

fileChangeListener($event) {
    var image:any = new Image();
    var file:File = $event.target.files[0];
    var myReader:FileReader = new FileReader();
    var that = this;
    myReader.onloadend = function (loadEvent:any) {
        image.src = loadEvent.target.result;
        that.cropper.setImage(image);
    };

    myReader.readAsDataURL(file);
}

After setting image source (imgage.src=...), you need to wait for image
to be loaded before calling setImage, otherwise there's a race condition.:

    image.onload = function () {
        that.cropper.setImage(image);
    };
    myReader.onloadend = function (loadEvent:any) {
        image.src = loadEvent.target.result;
    };

It would be nice to setup a minimum/maximum upload dimension and also define a maximum weight for the picture.

Any chance of adding Image Conversion and Compression support?

Been looking through the code and it seems it would be simple enough since the resulting image is already loaded into a canvas and exported from there. So it would basically just require an additional setting specifying the output format you want and the quality.

Then in the imageCropper, instead of using
this.croppedImage.src = this.cropCanvas.toDataURL("image/" + this.fileType);

you would end up with someting like
if (this.settings.OutputFormat){
//Since compression would only work on jpg and webp
if (this.settings.OutputFormat == "image/jpg" | this.settings.OutputFormat == "image/webp"){
this.croppedImage.src = this.cropCanvas.toDataURL(this.settings.OutputFormat,this.settings.OutputQuality);
}
else {
this.croppedImage.src = this.cropCanvas.toDataURL(this.settings.OutputFormat)
}
}
else {
this.croppedImage.src = this.cropCanvas.toDataURL("image/" + this.fileType);
}

Im assuming that this might break your circular image transparency?

This implies this kind of errors using the components:
Cannot find module 'ng2-img-cropper/src/imageCropper' from ...

While trying to crop an image if you accidentally move your mouse out of the canvas and release the mouse button, and then move your mouse back to the canvas, it doesn't deselect the cropper.

Hi!

Just using image cropper with webpack-starter-pack.

When i try to build:prod just crashes and throws:

File '/node_modules/ng2-img-cropper/node_modules/angular2/typings/browser.d.ts' not found.

Maybe is related with: https://github.com/AngularClass/angular2-webpack-starter#custom-type-definitions

I noticed that every time the cropper is moved or resized, the cropped picture is updated. This is not always desirable, especially when working with big pictures.
It would be nice to have the option to add a button so the user can choose when to crop the image.

Is there any interest in adding this feature?

Hi, I was using this directive to test something and I have found that in Mozilla and Safari (newest versions) I can't move the edges of the selected area, also, when I move the selected area I can move it outside the image which is a bit problematic. In chrome the directive works properly.

Hi. Cool component! I would like to be able to style the input button. Is there any way I can pass a css class to the button or even pass a customised button as ng-content?

There is some inconsistency in resulted image aspect ratio.
I have played the demo for a while with rectangular images, canvas and rectangular cropped area.
So, actually resulted image sizes have a wrong aspect ratio and it seems like it's value has the sum of the aspect ratio of the crop area and the canvas in general.

(i'll show you plunker later)

Finally, I mean, if I ignore default sizes with similar sizes on each width/height, i will be confused about getting right values on actual result, Settings should be more intuitive and simple.

BTW, i just finished with uploader cropped area via XHR.
It's very simple. we can include this function in future releases if u don't mind,

As of v0.4.5 the cropper made a huge step forward regarding customization. Thumbs up!

Nevertheless on more idea on customization. Do you have a suggestion of how to position the file input button freely? The template for the ImageCropperComponent has a fixed order of button and canvas. It would be great if there was a separate directive for the button, just like in Allan Bishop's ng1 cropper. That way you could put the button anywhere on the screen, and put similar buttons right next to it, like "remove image".

I am trying to use this library with angular 2 rc1 and angular-cli beta 5.

This is what I have done right now:
in angular-cli-build.js I have added'ng2-img-cropper/dist/*.+(d.ts|js|js.map)'

In system-config.ts:

const map: any = {
  'ng2-img-cropper': 'vendor/ng2-img-cropper'
};

and:

const packages: any = {
  'ng2-img-cropper/dist': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ng2-img-cropper.js'
  }

I import it in the file where I use it: import {ImageCropperComponent, CropperSettings} from 'ng2-img-cropper/dist/ng2-img-cropper';

but wen I want to build the file I get:

Typescript found the following errors:
  /home/mike/dev/myProj/tmp/broccoli_type_script_compiler-input_base_path-n1z8vOxo.tmp/0/src/app/components/project/cropp-project/cropp-project.component.ts (2, 54): File '/home/mike/devmyProj/node_modules/ng2-img-cropper/dist/ng2-img-cropper.d.ts' is not a module.
  /home/mike/dev/myProj/tmp/broccoli_type_script_compiler-input_base_path-n1z8vOxo.tmp/0/src/app/components/project/cropp-project/cropp-project.component.ts (2, 54): Exported external package typings file '/home/mike/dev/myProj/node_modules/ng2-img-cropper/dist/ng2-img-cropper.d.ts' is not a module. Please contact the package author to update the package definition.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (/home/mike/devmyProj/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:115:19)
    at BroccoliTypeScriptCompiler.build (/home/mike/dev/myProj/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
    at /home/mike/dev/myProjb/node_modules/broccoli-caching-writer/index.js:152:21
    at lib$rsvp$$internal$$tryCatch (/home/mike/dev/myProj/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/home/mike/dev/myProj/node_modules/rsvp/dist/rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (/home/mike/dev/myProj/node_modules/rsvp/dist/rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (/home/mike/dev/myProj/node_modules/rsvp/dist/rsvp.js:1198:9)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

Am I doing something wrong? Or this is a bug?

Hello, I'm having trouble with the importing of the ng2-img-cropper components. I already tried to solve this by changing the systemjs file but without results.

I did the commands "npm i ng2-img-cropper --save" and "npm install"

My systemjs.config.js is the following:

var map = {
'app': 'www/build', // 'dist',
....
'ng2-img-cropper': 'node_modules/ng2-img-cropper'
};

var packages = {
'app': {main: 'app.js', defaultExtension: 'js'},
...
'ng2-img-cropper': { main:'index.js', defaultExtension: 'js'}
};

My component is imported like this:

import {ImageCropperComponent } from 'ng2-img-cropper';`

I verified many times the path and I'm sure that is correct. When I import the component, the build is done inside a folder called "app" (wrong) and when I delete the importing, the build is done without the "app" folder (Right), so I'm sure that the problem is on the import.

My angular2 in the package have the version 2.0.0-rc.5. My ng2-img-cropper had the version 0.6.4 when I did the install but I also tried the version 0.6.1 without success.

I also can say that I did the clone of the example in this repository, build and run without any problem but for some reason I can't build it right in my project. I don't know if it is a configuration problem or bug but I hope you can help me on this one.

Thanks for any help.

Hi,

The rounded cropper is not displayed under IE.
https://plnkr.co/edit/V5FvvkkSYnkDYzyWQxJa?p=preview

Hello,

Have some way to bypass the crop size?

In this case, the user could select any area, without fixed proportions.

Thanks!

There is a lot breaking changes from Angular RC.4 with ngModules, so I beg u deploy 0.6+ version for those who using RC.4 and below.

When using angular2-img-cropper with a project baed on angular2-seed I get the following errors when trying to compile:

/node_modules/angular2-highcharts/typings/browser/ambient/es6-shim/index.d.ts(8,14): error TS2300: Duplicate identifier 'PropertyKey'.
/node_modules/angular2-highcharts/typings/browser/ambient/es6-shim/index.d.ts(11,5): error TS2300: Duplicate identifier 'done'.
/node_modules/angular2-highcharts/typings/browser/ambient/es6-shim/index.d.ts(12,5): error TS2300: Duplicate identifier 'value'.
/node_modules/angular2-highcharts/typings/browser/ambient/es6-shim/index.d.ts(250,5): error TS2300: Duplicate identifier 'EPSILON'.
/node_modules/angular2-highcharts/typings/browser/ambient/es6-shim/index.d.ts(285,5): error TS2300: Duplicate identifier 'MAX_SAFE_INTEGER'.
[...]

The type definitions for es6-shim are local in my project in the typings folder, but they are also located in \node_modules\ng2-img-cropper\typings

According to this article

Using is considered a bad practice.

I've deleted the <reference /> tag and it compiles fine. Are you able to remove it?

Note that this same issue occurred with Angular2-highcharts and they removed the to solve the issue.

Hi, thanks for your new exif image feature, I want to request the feature that return crop image information (x,y, width, height of the cropper) beside the current base64 image content. Because my need is upload the original image with crop information, its size will smaller than base64 data.

Thanks in advance.

Dear Cornel,

I recently updated to the latest version of 'angular2-img-cropper'. Unfortunately now I'm getting the following error message when trying to build the project with ng build (Angular CLI):

ng2-img-cropper/src/imageCropper"' has no exported mng 'CropperSettings'

This seems an issue with your component. Or am I missing something? Hope you can help.

Kind regards,
Rein

The Angular team suggest that library vendors should also ship .metadata.json files. These files are produced automatically by ngc.

Your might find below comments useful:

angular/angular#11262 (comment)

angular/angular#11262 (comment)

angular/angular#11262 (comment)

Complete conversation (angular/angular#11262)

On iOS, the image is sometimes rotated 90 degrees. This seems to be a general
problem that involves reading EXIF data. Example:

fengyuanchen/cropper#120

It would be great if the input file would be restricted to images, or even better if the component allowed to configure it.

Hi,

It seems that the image pixels on the canvas are one on one. Is there a way to load a hires image on a small canvas, but have the cropped image (the {{image.image}}) to have more pixels than the canvas?
I can do this with css, set the width of the canvas (much) smaller than cropperSettings.canvasWidth, and thats what I'm trying to achieve. But the canvas interface becomes too small and unresponsive if I do that.
Is there a valid way to do this?

When the cropper windowis below a certain size, it is no longer possible to move the cropper window. Instead I grab one of the 'size adjuster corners'.

It seems that the 'hit zone' for the 'size adjuster corners' are overlapping the hitzone for the drag/drop area.

Sorry for the cryptic terms. Hope you understand :)

At this size I can no longer drag/drop the cropper window:

Hello,

Since the commit #d01889cdf690be16a918fbf03364c139ca507c2a
the cropper var is now private in ImageCropperComponent without any getter function.

So we can't change the image on the fly during crop

Compiler says:

export * from "./src/imageCropperComponent";
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

Any quick fix/work around?

After update of Angular to RC6 I get following error:
myModule:24 Error: SyntaxError: Unexpected token <

-> After registration ImageCropperComponent in @NgModule.
-> See comment below this issue:

Is this module migrated-supported for NG2 RC6 yet?
THANKS.

i am on rc6 and when hit npm install ng2-img-cropper

then ndoemodules/ng2-img-cropper/package.json --> install with rc5

on npm start getting errors:

please..

Hi

I just tried to explore plugin and added some of the sample code from the plunker https://embed.plnkr.co/V91mKCNkBQZB5QO2MUP4/ to my app.

But when I try to compile my app in Visual Studio 2015, its giving below error:

Type FileReader is not assignable to type FileReader. Property onloadend is missing in type FileReader

Can you please guide?

I do not want to use the button chose file, etc ,etc to select my image that I want to cropp, instead I receive the image from the backend, and I would like to add it programatically to the cropper and diplay it to the user in order for him to cropp.

Is there any possible way of doing this?
Any help is much appreciated.

.

cropCanvas in ImageCropper.ts is not cleared before drawing the Cropped image in the getCroppedImage function. It currently redraws new cropped image onto previous Cropped images.

Quick fix that worked for me:

let tempcanvasContext = this.cropCanvas.getContext("2d");
tempcanvasContext.clearRect(0, 0, this.cropCanvas.width, this.cropCanvas.height)
this.drawImageIOSFix(tempcanvasContext, this.srcImage,
            Math.max(Math.round((bounds.left) / this.ratioW - offsetW), 0),
            Math.max(Math.round(bounds.top / this.ratioH - offsetH), 0),
            Math.max(Math.round(bounds.width / this.ratioW), 1), Math.max(Math.round(bounds.height / this.ratioH), 1),
            0, 0, this.cropCanvas.width, this.cropCanvas.height);

Hi! Sample plunker example not working now.
https://www.npmjs.com/package/ng2-img-cropper
https://embed.plnkr.co/V91mKCNkBQZB5QO2MUP4/

Hello,
I'm trying to setup ng2-img-cropper in Angular2/RC5 and i'm facing the following error:

"Template parse errors: Can't bind to 'image' since it isn't a known property of 'img-cropper'...
<img-cropper [ERROR ->][image]="data">"

I have tried any several config variations without success. These included:
- app.module.ts: including ImageCropperComponent in @NgModule imports and declarations
- importing ImageCropperComponent, CropperSettings, Bounds in controller where i use the module
- modified systemjs.config.js with:
- map... 'ng2-img-cropper': 'node_modules/ng2-img-cropper'
- packages... 'ng2-img-cropper': {main: 'index.js', defaultExtension: 'js'}
... but still the img-cropper module does not appear in the sources of the loaded app.

Anyone is facing similar issue or knows how to overcome this problem?

Best regards,
Pedro