2017-08-02 3 views
0

Hallo ich Schwierigkeiten das beschnittene Bild in CakePHP konfrontiert bin mit auf Speicher Croppie Plugin Bild abgeschnitten wird, aber beim Speichern des Bildes speichert es das ganze Bild nicht das beschnittene Bild, nachdem die src Zuschneiden von Crop-Bild ist es korrekt, aber wenn ich versuche, es zu speichern, speichert es das gesamte Standardbild.jquery Ernte Bild vor dem Hochladen Croppie Plugin

$uploadCrop = $('#upload-demo').croppie({ 
 
    enableExif: true, 
 
    viewport: { 
 
    width: 180, 
 
    height: 180, 
 
    type: 'circle' 
 
    }, 
 
    boundary: { 
 
    width: 190, 
 
    height: 190 
 
    }, 
 
    showZoomer: false 
 
}); 
 

 
$('#my_file').on('change', function() { 
 
    $('#tttssss').show(); 
 
    $('#user-select-image').hide(); 
 

 
    var reader = new FileReader(); 
 
    reader.onload = function(e) { 
 
    $uploadCrop.croppie('bind', { 
 
     url: e.target.result 
 
    }).then(function() { 
 
     console.log('jQuery bind complete'); 
 
    }); 
 

 
    } 
 
    reader.readAsDataURL(this.files[0]); 
 
}); 
 

 
$('.upload-result').on('click', function(ev) { 
 
    $uploadCrop.croppie('result', { 
 
     type: 'canvas', 
 
     size: 'viewport' 
 
    }) 
 

 

 
    .then(function(resp) { 
 

 
     $('#user-select-image').attr('src', resp); 
 
     $('#user-select-image').show(); 
 
     $("#tttssss").hide(); 
 
    }); 
 
}); 
 
$(document).ready(function() { 
 
    $("#user-select-image").click(function() { 
 
    $("input[id='my_file']").click(); 
 
    }); 
 
});
<div id="tttssss" style="display:none;"> 
 
    <div id="upload-demo"> 
 
    </div> 
 
    <div style="width:70%;margin: 0 auto;"> 
 
    <a class="btn btn-success upload-result" rel="<?php //echo $imge['User']['id'] ?>">Upload Image</a> 
 
    </div> 
 
</div> 
 

 

 
<?php echo $this->Html->image($fileuser, array('class' => 'img-circl', 'id' => 'user-select-image', 'style' => 'margin-top:30px!important;')); ?> 
 
<?php echo $this->Form->file('User.profile_img', array('id' => 'my_file', 'style' => 'display:none;')); ?>

das Bild hochladen es das ganze Bild hochladen

Dies ist mein Code

Antwort

0

In Funktion: $uploadCrop.croppie('result', { type: 'canvas', size: 'viewport' })

.then(function(resp) { 

    $('#user-select-image').attr('src', resp.target.result); 
    $('#user-select-image').show(); 
    $("#tttssss").hide(); 
});}); 

Sie verwenden müssen: resp.toDataURL() statt resp.target.result

Verwandte Themen