搜索没有 jquery 的 js 图片裁剪插件

Question

我希望能够 select 一张图片并在网站上对其进行裁剪，特别单击后，图片的 selected 区域应该作为 bas64 上传到服务器。

上传应该没问题，但是找一个没有jquery或angular的好插件似乎很费时间。

我刚刚看到多个插件可以做我想做的事情，但需要 angular https://github.com/alexk111/ngImgCrop

我也找到了 http://www.croppic.net/，但这确实需要 jquery，还有很多其他的。

有没有人知道对其他库没有要求的好裁剪插件？我不想通过自己编写插件来重新发明轮子。

谢谢

Answer 1

您听说过 microjs 吗？这是开始寻找它的好地方。

经过快速搜索，我找到了 imago.js, check out its example。希望对你有帮助。

Answer 2

我刚刚在一个项目中使用了 cropperjs (https://fengyuanchen.github.io/cropperjs/) 并且非常满意。它不使用 jquery.

这是我编写的几个函数，用于初始化裁剪器然后获取裁剪后的图像：

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');
}

这些函数来自 angular 指令，这就是为什么有对 $scope、$timeout 和 vm 的引用，但 angular 不是必需的。

Answer 3

我找到了没有 jquery 要求的完美插件，它的名字是 croppie。演示： http://foliotek.github.io/Croppie/ 资源： https://github.com/Foliotek/Croppie

希望这对以后的人有所帮助。

搜索没有 jquery 的 js 图片裁剪插件

Searching js image cropping plugin without jquery

html

javascript

upload

crop