Sharing Top Content from the Angular-sphere.

ng-cropperjs – AngularJS module for . #npm #javascript #nodejs

  • Change the canvas (image wrapper) position and size with new data.
  • This event fires when the canvas (image wrapper) or the crop box starts to change.
  • This event fires when the canvas (image wrapper) or the crop box is changing.
  • This event fires when the canvas (image wrapper) or the crop box stops to change.
  • This event fires when the canvas (image wrapper) or the crop box changed.

cropperjs – JavaScript image cropper.

@npmdaily: ng-cropperjs – AngularJS module for . #npm #javascript #nodejs

Four quick start options are available:

Include files:

The cdnjs provides CDN support for Cropper.js’s CSS and JavaScript. You can find the links here.

constructor:

var image = document.getElementById(‘image’); var cropper = new Cropper(image, { aspectRatio: 16 / 9, crop : function(e) { console.log(e.detail.x); console.log(e.detail.y); console.log(e.detail.width); console.log(e.detail.height); console.log(e.detail.rotate); console.log(e.detail.scaleX); console.log(e.detail.scaleY); } });

Just double click your mouse to enter crop mode.

Just double click your mouse to enter move mode.

key when you resize the crop box.

key when you crop on the image.

method, the size of the exported image may be greater than the original image’s. This is because the type of the exported image is not the same as the original image’s. So just pass the type the original image’s as the first parameter to

to fix this. For example, if the original type is JPEG, then use

: the crop box should be within the canvas

Define the view mode of the cropper.

: create a new crop box

: move the canvas

: do nothing

Define the dragging mode of the cropper.

Set the aspect ratio of the crop box. By default, the crop box is free ratio.

method automatically when built.

Add extra elements (containers) for previewing.

Re-render the cropper when resize the window.

Restore the cropped area after resize the window.

Check if the current image is a cross-origin image.

attribute to reload the source image to avoid browser cache error.

attribute to image will stop adding timestamp to image url, and stop reload of image.

Check the current image’s Exif Orientation information.

(the default value) to avoid some issues (1, 2) on iOS devices.

at the same time.

Note: Don’t trust this all the time as some JPG images have incorrect (not standard) Orientation values.

Show the black modal above the image and under the crop box.

Show the dashed lines above the crop box.

Show the center indicator above the crop box.

Show the white modal above the crop box (highlight the crop box).

Show the grid background of the container.

Enable to move the image.

Enable to rotate the image.

Enable to scale the image.

Enable to zoom the image.

Enable to zoom the image by dragging touch.

Enable to zoom the image by wheeling mouse.

Define zoom ratio when zoom the image by wheeling mouse.

Enable to move the crop box by dragging.

Enable to resize the crop box by dragging.

Enable to toggle drag mode between “crop” and “move” when click twice on the cropper.

The minimum width of the container.

The minimum height of the container.

The minimum width of the canvas (image wrapper).

The minimum height of the canvas (image wrapper).

The minimum width of the crop box.

Note: This size is relative to the page, not the image.

The minimum height of the crop box.

Note: This size is relative to the page, not the image.

A shortcut of the “ready” event.

A shortcut of the “cropstart” event.

A shortcut of the “cropmove” event.

A shortcut of the “cropend” event.

A shortcut of the “crop” event.

A shortcut of the “zoom” event.

As there is an asynchronous process when load the image, you should call most of the methods after ready, except “setAspectRatio”, “replace” and “destroy”.

new Cropper(image, { ready : function () { // this.cropper[method](argument1, , argument2, …, argumentN); this.cropper.move(1, – 1); // Allows chain composition this.cropper.move(1, – 1).rotate(45).scale(1, – 1); } });

Show the crop box manually.

new Cropper(image, { autoCrop: false, ready : function () { // Do something here // … // And then this.cropper.crop(); } });

Reset the image and crop box to their initial states.

Clear the crop box.

A new image url.

If only change the color, not the size, then the cropper only need to change the srcs of all related images, not need to rebuild the cropper. This can be used for applying filters.

Replace the image’s src and rebuild the cropper.

Disable (freeze) the cropper.

Destroy the cropper and remove the instance from the image.

Move the canvas (image wrapper) with relative offsets.

cropper.move(1); cropper.move(1, 0); cropper.move(0, – 1);

x:

Move the canvas (image wrapper) to an absolute point.

Zoom the canvas (image wrapper) with a relative ratio.

cropper.zoom(0.1); cropper.zoom(- 0.1);

Zoom the canvas (image wrapper) to an absolute ratio.

Rotate the image with a relative degree.

cropper.rotate(90); cropper.rotate(- 90);

Rotate the image to an absolute degree.

Scale the image.

cropper.scale(- 1); // Flip both horizontal and vertical cropper.scale(- 1, 1); // Flip horizontal cropper.scale(1, – 1); // Flip vertical

Scale the abscissa of the image.

Scale the ordinate of the image.

Output the final cropped area position and size data (base on the natural size of the original image).

Change the cropped area position and size with new data (base on the original image).

Output the container size data.

Output the image position, size and other related data.

Output the canvas (image wrapper) position and size data.

Change the canvas (image wrapper) position and size with new data.

Output the crop box position and size data.

Change the crop box position and size with new data.

Get a canvas drawn the cropped image. If it is not cropped, then returns the whole canvas.

Change the aspect ratio of the crop box.

Change the drag mode.

Tips: You can toggle the “crop” and “move” mode by double click on the cropper.

This event fires when the target image has been loaded and the cropper instance is ready for cropping.

This event fires when the canvas (image wrapper) or the crop box starts to change.

This event fires when the canvas (image wrapper) or the crop box is changing.

This event fires when the canvas (image wrapper) or the crop box stops to change.

This event fires when the canvas (image wrapper) or the crop box changed.

This event fires when a cropper instance starts to zoom in or zoom out its canvas (image wrapper).

static method to revert to it.

GitHub

Comments are closed, but trackbacks and pingbacks are open.