plugin jQuery Croppie per errore ritaglio immagine

voglio usare Jquery Croppie plugin sul mio sito immagine raccolto per per il mio utente, ma ho questo problema il codice che io non scrivo mostrare come esempio in Croppie Site plugin jQuery Croppie per errore ritaglio immagine

Ecco il mio codice

codice HTML

<input type="file" id="upload" value="Choose a file"> 
<button class="upload-result">Result</button> 
<div class="upload-msg"> 
    Upload a file to start cropping 
</div> 
<div id="upload-demo"></div>

codice JS

$uploadCrop = $('#upload-demo').croppie({ 
    viewport: { 
     width: 200, 
     height: 200, 
     type: 'circle' 
    }, 
    boundary: { 
     width: 300, 
     height: 300 
    } 
});

NB: Ho collegato il mio sito a jquery, croppie.js e croppie.css

fonte

2015-12-12 Jonathan Tyar

Provalo, funziona per me. Ho usato PHP per salvare l'immagine.

<?php 
    if(isset($_POST['imagebase64'])){ 
     $data = $_POST['imagebase64']; 

     list($type, $data) = explode(';', $data); 
     list(, $data)  = explode(',', $data); 
     $data = base64_decode($data); 

     file_put_contents('image64.png', $data); 
    } 
?> 
<!DOCTYPE html> 
<html lang="pt-br"> 
<head> 
<meta charset="utf-8"> 
<title>Test</title> 
<link href="croppie.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="jquery-1.11.3.min.js"></script> 
<script type="text/javascript" src="croppie.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    var $uploadCrop; 

    function readFile(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader();   
      reader.onload = function (e) { 
       $uploadCrop.croppie('bind', { 
        url: e.target.result 
       }); 
       $('.upload-demo').addClass('ready'); 
      }   
      reader.readAsDataURL(input.files[0]); 
     } 
    } 

    $uploadCrop = $('#upload-demo').croppie({ 
     viewport: { 
      width: 200, 
      height: 200, 
      type: 'circle' 
     }, 
     boundary: { 
      width: 300, 
      height: 300 
     } 
    }); 

    $('#upload').on('change', function() { readFile(this); }); 
    $('.upload-result').on('click', function (ev) { 
     $uploadCrop.croppie('result', { 
      type: 'canvas', 
      size: 'original' 
     }).then(function (resp) { 
      $('#imagebase64').val(resp); 
      $('#form').submit(); 
     }); 
    }); 

}); 
</script> 
</head> 
<body> 
<form action="test-image.php" id="form" method="post"> 
<input type="file" id="upload" value="Choose a file"> 
<div id="upload-demo"></div> 
<input type="hidden" id="imagebase64" name="imagebase64"> 
<a href="#" class="upload-result">Send</a> 
</form> 
</body> 
</html>

fonte

2016-01-06 00:57:13

Questo è stato utile. –

Questo è un ottimo esempio. –

Questo ha funzionato perfettamente. –

plugin jQuery Croppie per errore ritaglio immagine

risposta

Problemi correlati