搜索没有jquery的js图像裁剪插件答案

【问题标题】：Searching js image cropping plugin without jquery搜索没有jquery的js图像裁剪插件
【发布时间】：2016-01-14 11:05:50
【问题描述】：

我希望能够在网站上选择图像并对其进行裁剪，在特殊单击后，图像的选定区域应以 bas64 格式上传到服务器。

上传应该没问题，但是找一个不用jquery或angular也能工作的好插件似乎很费时间。

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

我也找到了http://www.croppic.net/，但这确实需要 jquery，就像许多其他的一样。

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

谢谢

【问题讨论】：

标签： javascript html upload crop

【解决方案1】：

我找到了一个不需要 jquery 的完美插件，它的名字叫croppie。演示： http://foliotek.github.io/Croppie/ 资源： https://github.com/Foliotek/Croppie

希望这对将来的某人有所帮助。

【讨论】：

【解决方案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。

【讨论】：

谢谢，我自己找到了croppieJs，但对线程有迷惑。标记为下一个正在搜索的人的解决方案

【解决方案3】：

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

经过快速搜索，我找到了imago.js，查看它的example。希望对你有帮助。

【讨论】：