jquery - 在上传和裁剪之前将图像传递给croppic loadPicture

Question

我正在使用 Bootstrap 模式创建上传图像的分步指南。

步骤包括:

1. 上传图片按钮
2. 打开上传图片模式
3. 从本地资源中选择图像文件。
4. 在单独的裁剪模式中加载图像

我的问题是。如何将步骤 2 输入中的图像文件传递到步骤 4 中的 loadPicture 参数。

这是我当前的代码:

$(document).on('change', '.btn-file :file', function() {

    var input       =   $(this);
    var numFiles    =   input.get(0).files ? input.get(0).files.length : 1;
    var label       =   input.val().replace(/\\/g, '/').replace(/.*\//, '');
                        loadImageFromInput(this,'image-uploaded');
                        input.trigger('fileselect', [numFiles, label]);

    var log = numFiles > 1 ? numFiles + ' files selected' : label;

    if(log){
        var picture = $('#image-uploaded').attr('src');

        if(picture == ''){
            picture = 'tests/images/croppic/assets/img/night.jpg';
        }

        var croppicHeaderOptions2 = {
            uploadUrl:'tests/images/croppic/img_save_to_file.php',
            cropData:{
                "dummyData":1,
                "dummyData2":"asdas"
            },
            cropUrl:'tests/images/croppic/img_crop_to_file.php',
            loadPicture:picture,
            modal:false,
            processInline:true,
            loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
            onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
            onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
            onImgDrag: function(){ console.log('onImgDrag') },
            onImgZoom: function(){ console.log('onImgZoom') },
            onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
            onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
            onError:function(errormessage){ console.log('onError:'+errormessage) }
        }   

        var croppic = new Croppic('croppic2', croppicHeaderOptions2);

        $('.upload-picture-modal').modal('hide');
        $('.croppic-modal').modal('show');
    }

});

Answer 1

我可能是错的，但在 onAfterImgUpload 中我使用了类似的东西:这基本上是我使用的:

var imageUrl;    
var croppicHeaderOptions2 = {
                uploadUrl:'tests/images/croppic/img_save_to_file.php',
                cropData:{
                    "dummyData":1,
                    "dummyData2":"asdas"
                },
                cropUrl:'tests/images/croppic/img_crop_to_file.php',
                loadPicture:picture,
                modal:false,
                processInline:true,
                loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
     onBeforeImgUpload: function(){ 
     $('.cropImgWrapper').css('height','100%');
         //hide buttons or any elements to do with upload
     },
 onAfterImgUpload: function(){ 
     //this step here to get your image
     imageUrl = $(this)[0].imgUrl;

 },
 onBeforeImgCrop: function(){ 
     console.log('onBeforeImgCrop') ;
  },
  onAfterImgCrop:function(){
     //image has been cropped do something in here

  });

使用它可以将图像传递到您需要的任何地方

imageUrl = $(this)[0].imgUrl;