裁剪图像并使用 jQuery fileupload 上传

Question

我正在使用 JQuery File Upload con UploadHandler，这个： https://github.com/blueimp/jQuery-File-Upload/blob/master/server/php/UploadHandler.php 我用fileupload很好地上传了图像，但现在我需要在上传之前修改它们。我正在使用croppie.js： http://foliotek.github.io/Croppie/ 我正在以这种方式修改“fileuploadadd”方法：

.bind('fileuploadadd', function (e, data) {
    $(e.target).fileupload('option', 'url', uploads_base_url + '?f=' + $(e.target).attr('folder'));
                var acceptFileTypes = /(\.|\/)(gif|jpe?g|png)$/i;
                if ($(e.target).attr('data-accept_file_types') != '' && '' + $(e.target).attr('data-accept_file_types') != 'undefined')
                    acceptFileTypes = new RegExp($(e.target).attr('data-accept_file_types'), 'i');
                if (data.originalFiles[0]['name']) {
                    var fileExt = '.' + data.originalFiles[0]['name'].split('.').pop();
                    if (!acceptFileTypes.test(fileExt)) {
                        alert('Formato non ammesso');
                        return false;
                    } else {
                        data.context = $("<div id='cropper'></div>").croppie({
                            viewport: {
                                width: 300,
                                height: 300,
                                type: 'circle'
                            }
                        })
                                .insertAfter("#dragArea");
                        var reader = new FileReader();
                        reader.readAsDataURL(data.files[0]);
                        reader.onload = function (e) {
                            data.context.croppie('bind', {
                                url: e.target.result
                            });
                        };
                        $("<div><button>Taglia</button></div>").insertAfter("#cropper")
                                .click(function () {
                                    $("#cropper").croppie('result', {format: 'jpeg'}).then(function (resp) {
                                        var blob = new Blob([window.atob(resp.split(",")[1])],{type:"image/jpeg"});
                                        data.files[0] = new File([blob], data.originalFiles[0]['name'].split(".")[0]+".jpeg");
                                        data.originalFiles[0] = data.files[0];
                                        data.submit();
                                        $("#cropper").remove();
                                        $(this).remove();
                                    });
                                });
                    }
                }
                //fixFileuploadValue(e.target, data.files[0].name);
            });

点击剪切按钮，文件被上传，但它的编码方式与fileupload文件不同。如何以与裁剪图像相同的方式下载？

Answer 1

您不需要创建新的 blob 文件。只需添加类型选项：blob。像这样：

$("#cropper").croppie('result', {format: 'jpeg', type: 'blob'}).then(function (resp) {                                        
                                    data.files[0] = new File([resp], data.originalFiles[0]['name'].split(".")[0]+".jpeg");
                                    data.originalFiles[0] = data.files[0];
                                    data.submit();
                                    $("#cropper").remove();
                                    $(this).remove();
                                });

Answer 2

@Estevex

在这种情况下，我们最终使用了没有 jQuery 文件上传的cropper.js。代码如下：

/* SCRIPTS TO HANDLE THE CROPPER BOX */
var $image = $("#image");
var cropBoxData;
var canvasData;
$("#modalCrop").on("shown.bs.modal", function () {
  $image.cropper({
    viewMode: 1,
    aspectRatio: 1/1,
    minCropBoxWidth: 200,
    minCropBoxHeight: 200,
    ready: function () {
      $image.cropper("setCanvasData", canvasData);
      $image.cropper("setCropBoxData", cropBoxData);
    }
  });
}).on("hidden.bs.modal", function () {
  cropBoxData = $image.cropper("getCropBoxData");
  canvasData = $image.cropper("getCanvasData");
  $image.cropper("destroy");
});

// Enable zoom in button
$(".js-zoom-in").click(function () {
  $image.cropper("zoom", 0.1);
});

// Enable zoom out button
$(".js-zoom-out").click(function () {
  $image.cropper("zoom", -0.1);
});

/* SCRIPT TO COLLECT THE DATA AND POST TO THE SERVER */
$(".js-crop-and-upload").click(function () {
  var cropData = $image.cropper("getData");
  $("#id_avatar-form-x").val(cropData["x"]);
  $("#id_avatar-form-y").val(cropData["y"]);
  $("#id_avatar-form-height").val(cropData["height"]);
  $("#id_avatar-form-width").val(cropData["width"]);
  $("#formUploadAvatar").submit();
});

</script>

祝你好运，如果你在 jQuery 文件上传方面取得了成功，别忘了回馈社区:)