Question

我正在尝试将Chen Fengyuan's 'cropperjs'集成到我正在设计的网站中，并且我的界面正常工作，裁剪框可以正常运行。但是，我对Javascript和jQuery的了解有限，这使我陷入停滞状态。

我想要做的是点击画布下的按钮（类似于Get Cropped Canvas按钮），并使用简单的jQuery AJAX调用将裁剪的图像发布到服务器。

由于图像已在界面上预览，因此我无需预览裁剪后的图像。但是，我似乎无法成功地做到这一点，因为每次我尝试使用'cropperjs'文档中提供的方法时，我都会遇到如下浏览器错误：

ReferenceError：未定义cropper

我尝试了各种方法，并在网上看到了很多解决方案，但我似乎无法做到正确。我知道我做错了但是因为我不太了解Javascript和jQuery。我真的很挣扎。文档提到了使用Cropper构造函数初始化但我不知道如何做到这一点，我猜这是我的问题所在？有人可以帮忙吗？

Answer 1

我已经设法自己解决这个问题，所以对于任何有兴趣的人，这是我使用的代码： -

var $image = $("#image");
        var cropper = $image.cropper();
        var baseURL = window.location.protocol+'//'+window.location.host;
        var pho_id = $("input[name=pho_id]").val();
        var mem_id = $("input[name=mem_id]").val();
        var photopath = $("input[name=photopath]").val();
        $image.cropper('getCroppedCanvas').toBlob(function (blob) {
                var formData = new FormData();
                formData.append('croppedImage', blob);
                formData.append('pho_id', pho_id);
                formData.append('mem_id', mem_id);
                formData.append('photopath', photopath);
                $.ajax(baseURL+'/path/', {
                    method: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function () {
                      console.log('Upload success');
                    },
                    error: function () {
                      console.log('Upload error');
                    }
                });
        }, 'image/jpeg', 0.8);

让cropperjs将裁剪后的图像发布到服务器

1 个答案: