CODEWITHSUNDEEP
javascripthtmluploadcrop
simon
simon

Reputation: 3506

Searching js image cropping plugin without jquery

I want to be able to select an image and to crop it on the website, after a special click the selected area of the image should be uploaded as bas64 to the server.

The upload should be no problem, but finding a nice plugin that works without jquery or angular seems to be very time consuming.

I just have seen mutliple plugins that can do the things i want, but requires angular https://github.com/alexk111/ngImgCrop

Also I have found http://www.croppic.net/, but this does require jquery, as many other.

Does anyone know good cropping plugin that have no requirements to other libraries? I don't want to reinvent the wheel by writing the plugin by myself.

Thanks

Upvotes: 3

Views: 1834

Answers (3)

simon
simon

Reputation: 3506

I've found the perfect plugin with no jquery requirement, it's name croppie. demo: http://foliotek.github.io/Croppie/ source: https://github.com/Foliotek/Croppie

hopefully this helps someone in the future.

Upvotes: 4

Jason Watmore
Jason Watmore

Reputation: 4701

I've just used cropperjs (https://fengyuanchen.github.io/cropperjs/) on a project and was really happy with it. It doesn't use jquery.

Here's a couple of functions I wrote to initialise the cropper and then get the cropped image:

function initCropper() {
    // create blob url from file object
    vm.selectedImage.dataUrl = URL.createObjectURL(vm.selectedImage);

    $timeout(function () {
        // initialise cropper
        var image = document.getElementById(vm.modalId + '-image');
        vm.cropper = new Cropper(image, {
            aspectRatio: $scope.width / $scope.height,
            minContainerHeight: Number($scope.height) + 200,
            guides: false,
            cropBoxResizable: false,
            cropBoxMovable: false,
            zoomable: true,
            dragMode: 'move',
            toggleDragModeOnDblclick: false,
            checkOrientation: false,
            responsive: false,
            built: function () {
                // revoke blob url after cropper is built
                URL.revokeObjectURL(vm.selectedImage.dataUrl);
            }
        });
    });
}

function cropImage() {
    // get cropped image and pass to output file
    vm.cropper
        .getCroppedCanvas({ width: $scope.width, height: $scope.height })
        .toBlob(function (croppedImage) {
            $timeout(function () {
                croppedImage.name = vm.selectedImage.name;
                vm.croppedImage = croppedImage;
                vm.croppedImage.dataUrl = URL.createObjectURL(croppedImage);
                $scope.outputFile = vm.croppedImage;

                // destroy cropper
                vm.cropper.destroy();
                vm.cropper = null;
                vm.selectedImage = null;
            });
        }, 'image/jpeg');
}

The functions are from an angular directive which is why there are references to $scope, $timeout and vm, but angular isn't required.

Upvotes: 3

Rafael Rocha
Rafael Rocha

Reputation: 776

Have you heard about microjs? That is a good place to start looking for it.

After a quick search I found out imago.js, check out its example. I hope it helps you.

Upvotes: 0

Related Questions