Javascript 不使用jquery搜索js图像裁剪插件

我想能够选择一个图像，并在网站上裁剪它，在一个特殊的点击后，图像的选定区域应作为bas64上传到服务器

上传应该没有问题，但是找到一个没有jquery或angular的好插件似乎非常耗时

我只是看到了多个插件，可以做我想做的事情，但需要有角度

我也发现了，但这确实需要jquery，就像许多其他查询一样

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

谢谢你听说了吗？这是一个开始寻找它的好地方

经过快速搜索，我发现了，看看它。我希望它能对您有所帮助。

我刚刚在一个项目中使用了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不是必需的。

我找到了一个完美的插件，它没有jquery要求，名为croppie。 演示： 资料来源：

---

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

谢谢，我自己找到了croppieJs，但对这条线却一无所知。标记为下一个正在搜索的用户的解决方案