How to use Guillotine (crop image)

[felipesantanadev]

I have already asked it in StackOverflow, but nobody has aswerd me yet and I really need help with it.

I'm trying to use the Guillotine, a plugin for crop images. I have a modal component which loads the image that I want to crop. In the modal class, I import the JQuery and I'm trying to import the Guillotine, but I'm receiving the message "the function guillotine does not exist."

Someone could help me?

The guillotine.js is at the root of components, together with JQuery. I have also used the npm to install.

That's my class:

import {bindable, bindingMode} from 'aurelia-framework';
import $ from 'jquery';
import 'guillotine';

export class ModalCrop{
    @bindable({ defaultBindingMode: bindingMode.twoWay }) display = 'none';

    created() {
        $('#thepicture').guillotine({ width: 400, height: 300 });
    }
}

[EisenbergEffect]

I don't know much about guillotine. This probably doesn't have anything to do with Aurelia but with the Guillotine library and how it should be used in module contexts. Try following up with the Guillotine plugin authors to see how they recommend using it in a module context.

[saravanaams]

Is there any plug-in for image upload and cropping in Aurelia??

[jonathaneckman]

@saravanaams there are cropping plugins, but they didnt work well for me. I wrote a very simple croppie wrapper and POST the base 64 result to my API for storage. Below is my wrapper. Simply bind the URL or a base 64 string of the image you'd like to crop to source. Bind a variable you'd like to store the cropped output as base 64 to cropped. If you're interested in a more detailed example let me know and I'll throw together a blog post.

Croppie Custom Element

import { autoinject, bindingMode} from "aurelia-framework";
import { bindable, noView } from 'aurelia-templating';
import Croppie, { CroppieOptions } from "croppie";

@noView()
@autoinject()
export class CroppieWrapper {

    @bindable
    source: string;

    @bindable({ defaultBindingMode: bindingMode.twoWay })
    cropped: string;

    croppie: Croppie;

    constructor(private element: Element) {}

    bind() {
        var croppieOptions: CroppieOptions = {
            boundary: {
                width: 200,
                height: 200
            },
            viewport: {
                width: 200,
                height: 200,
                type: 'square'
            }
        }
        this.croppie = new Croppie(this.element as HTMLElement, croppieOptions);
        this.croppie.bind({
            url: this.source,
            
        });
    }

    async apply() {
        this.cropped = await this.croppie.result({
            type: "base64"
        });
    }
}

[m-athijs]

I'm trying to use this croppie wrapper, but I don't understand how I would call the apply function. Am I missing something?

[Alexander-Taran]

@m-athijs now that's a mind bender.. (-:
If it had a view and a button, you'd click.delegate="apply()" and be done with it..
I bet you don't use it as is..
So apply is just a function on your component.. It should have some UI there? No?
If there is UI - there could be a button and a click handler

[m-athijs]

okay, perhaps a few beers too many last night. I added a view with a button and I'm good to go. Doesn't really make much sense though to have this wrapper without a view, so why the noview()?