-1

我正在尝试将Chen Fengyuan 的 'cropperjs'集成到我正在设计的网站中，并且我的界面与裁剪框一样可以正常工作。然而，我对 Javascript 和 jQuery 的有限知识让我陷入了停顿。

我想做的是单击画布下的一个按钮（类似于获取裁剪画布按钮），然后使用简单的 jQuery AJAX 调用将裁剪后的图像发布到服务器。

我不需要裁剪图像的预览，因为图像已经在界面上预览。但是，我似乎无法成功执行此操作，因为每次我尝试使用“cropperjs”文档中提供的方法时，都会出现如下浏览器错误：

ReferenceError：裁剪器未定义

我尝试了各种方法，并在网上看到了很多解决方案，但我似乎无法做到正确。我知道我做错了什么，但因为我对 Javascript 和 jQuery 的理解不够好。我真的很挣扎。文档提到了使用 Cropper 构造函数进行初始化，但我不知道该怎么做，我猜这就是我的问题所在？任何人都可以帮忙吗？

4

1 回答 1

0

我自己设法痛苦地解决了这个问题，所以对于任何有兴趣的人来说，这是我使用的代码：-

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);
于 2017-11-22T20:12:31.457 回答