So speichern Sie mit Javascript Bild cropper "Croppie"

Croppie verwendet einen DIV-Container und nicht ein CANVAS, um seinen Zuschnitt zu machen. Ich versuche herauszufinden, wie das resultierende beschnittene Bild von diesem DIV in ein Verzeichnis auf dem Server gespeichert wird, z. B. über eine SAVE-Schaltfläche.So speichern Sie mit Javascript Bild cropper "Croppie"

Hier ist mein HTML-Code ...

<!-- begin snippet: js hide: false --> 

<!-- language: lang-html --> 

    <!DOCTYPE html> 
    <html> 
    <head> 
     <title>Demo Croppie</title> 
     <link rel="Stylesheet" type="text/css" href="css/croppie.css" /> 
     <link rel="Stylesheet" type="text/css" href="css/sweetalert.css" /> 

    </head> 
    <body> 

     <div id="testCanvas"></div> 
     <div class="actions" style="margin-left: auto; margin-right: auto; width:250px;"> 
      <button class="vanilla-result">Result</button> 
      <button class="vanilla-rotate" data-deg="-90">Rotate Left</button> 
      <button class="vanilla-rotate" data-deg="90">Rotate Right</button> 
     </div> 

    <p><button onclick="function();">Save</button></p> 


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script src="js/croppie.js"></script> 
    <script src="js/demo.js"></script> 
    <script src="js/sweetalert.min.js"></script> 
     <script> 
      Demo.init(); 
     </script> 

    </body> 
    </html>

Hier meine JavaScript-Konfigurationen ist ...

function demoVanilla() { 
    var vanilla = new Croppie(document.getElementById('testCanvas'), { 
     viewport: { width: 300, height: 300, type: 'square' }, 
     boundary: { width: 350, height: 350 }, 
     enableOrientation: true 
    }); 
    vanilla.bind({ 
     url: 'imgs/demo-1.jpg', 
     orientation: 1 
    }); 

    document.querySelector('.vanilla-result').addEventListener('click', function (ev) { 
     vanilla.result('canvas').then(function (src) { 
      popupResult({ 
       src: src 
      }); 
     }); 
    }); 

    $('.vanilla-rotate').on('click', function(ev) { 
     vanilla.rotate(parseInt($(this).data('deg'))); 
    }); 
}

Der Rest kommt standardmäßig ohne Änderungen von Croppie bei https://github.com/Foliotek/Croppie wie demo.js usw.

Quelle

2016-04-20 James

Ich denke, dass diese Frage nicht mit Javascript selbst zusammenhängt, da alles, was Sie wollen, Ihre Erntedaten in Ihre Datenbank/Server aufzeichnen soll. Bitte, lesen Sie diese Frage: http://stackoverflow.com/questions/34237020/jquery-plugin-cropie-to-crop-image-error – Anna

Das war ein guter Link und hat mich nahe gebracht. Aber das Einzige ist, dass ich nicht genug von Javascript weiß, um die Upload-Funktion erfolgreich zu entfernen. Mein Croppie holt das Bild von einem Verzeichnis auf dem Server nicht vom Hochladen. Also versuche ich herauszufinden, wie man die Upload-Funktion aus dem Skript strip [link] http://Stackoverflow.com/a/34623950/1618085 und verwenden Sie nur die Funktion zum Speichern auf Server ... kann mir jemand dabei helfen? – James

Verstanden!

Danke an einen der Entwickler von Croppie "thedustinsmith" und "TWFPSP", die mich an die richtigen ewigen Ressourcen und ihre angebotenen Informationen verwiesen haben.

$(document).ready(function() { 
    vanillaRotate = document.querySelector('.vanilla-rotate'); 
    var $uploadCrop = $('#upload-demo'); 
     $uploadCrop.croppie({ 
      viewport: { 
       width: 250, 
       height: 250, 
       type: 'square' 
      }, 
      boundary: { 
       width: 300, 
       height: 300 
      } 
     }); 
     $uploadCrop.croppie('bind', 'imgs/cat.jpg'); 
     vanillaRotate.addEventListener('click', function() { 
     vanilla.rotate(parseInt($(this).data('deg'))); 
     }); 
    $('.upload-result').on('click', function (ev) { 
     $uploadCrop.croppie('result', { 
      type: 'canvas', 
      size: 'original' 
     }).then(function (resp) { 
      $('#imagebase64').val(resp); 
      $('#form').submit(); 
     }); 
    }); 
});

HTML Körper ...

<form action="test-image.php" id="form" method="post"> 
<div id="upload-demo"></div> 
<input type="hidden" id="imagebase64" name="imagebase64"> 
<a href="#" class="upload-result">Send</a> 
</form> 
<button class="vanilla-rotate" data-deg="-90">Rotate</button>

Test-image.php ...

<?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); 
    } 
?>

Nun ist die Drehfunktion nicht funktioniert, und ich versuche, es zu beheben. Scheint nicht zu wissen, wie man die Orientierungskonfigurationen in diese Einstellung einbindet, die sich von dem DemoUpload unterscheidet, wo es in der Demodatei dargestellt ist. Aber zumindest funktioniert das Speichern auf dem Server großartig.

Quelle

2016-04-21 19:13:34 James

Hier ist ein Beispiel, wie man eine Download-Schaltfläche erstellt. Wenn Sie herausfinden, wie das funktioniert, dann brauchen Sie nur mit dem <a> Link zu ersetzen, für ein <form> mit einem Submit-Button,

var vanillaResult = document.querySelector('.vanilla-result'), 
 
    vanillaSave = document.querySelector('.vanilla-save'), 
 
    vanillaRotate = document.querySelector('.vanilla-rotate'); 
 

 
function demoVanilla() { 
 
    var vanilla = new Croppie(document.getElementById('vanilla-demo'), { 
 
    viewport: { 
 
     width: 100, 
 
     height: 100 
 
    }, 
 
    boundary: { 
 
     width: 300, 
 
     height: 300 
 
    }, 
 
    enableOrientation: true 
 
    }); 
 
    vanilla.bind({ 
 
    url: 'http://foliotek.github.io/Croppie/demo/cat.jpg', 
 
    orientation: 1 
 
    }); 
 
    vanillaResult.addEventListener('click', function() { 
 
    vanilla.result('canvas').then(resultVanilla); 
 
    }); 
 
    vanillaSave.addEventListener('click', function() { 
 
    vanilla.result('canvas').then(saveVanilla); 
 
    }); 
 
    vanillaRotate.addEventListener('click', function() { 
 
    vanilla.rotate(parseInt($(this).data('deg'))); 
 
    }); 
 
} 
 

 
function resultVanilla(result) { 
 
    swal({ 
 
    title: '', 
 
    html: true, 
 
    text: '<img src="' + result + '" />', 
 
    allowOutsideClick: true 
 
    }); 
 
} 
 

 
function saveVanilla(result) { 
 
    swal({ 
 
    title: '', 
 
    html: true, 
 
    text: '<a id="save" href="' + result + '" download="result"><img src="' + result + '" /><br><button>Download</button></a>', 
 
    showConfirmButton: false, 
 
    showCancelButton: true, 
 
    allowOutsideClick: true, 
 

 
    }); 
 
} 
 

 
demoVanilla();

body { 
 
    min-width: 360px; 
 
} 
 
.actions { 
 
    width: 300px; 
 
    margin: 0 auto; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Demo Croppie</title> 
 
    <link rel="Stylesheet" type="text/css" href="http://foliotek.github.io/Croppie/croppie.css" /> 
 
    <link rel="Stylesheet" type="text/css" href="http://t4t5.github.io/sweetalert/dist/sweetalert.css" /> 
 

 
</head> 
 

 
<body> 
 

 
    <div id="vanilla-demo"></div> 
 

 
    <div class="actions"> 
 
    <button class="vanilla-result">Result</button> 
 
    <button class="vanilla-save">Save</button> 
 
    <button class="vanilla-rotate" data-deg="-90">Rotate Left</button> 
 
    <button class="vanilla-rotate" data-deg="90">Rotate Right</button> 
 
    </div> 
 

 

 
    <div id="result"></div> 
 

 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
    <script src="http://foliotek.github.io/Croppie/croppie.js"></script> 
 
    <script src="http://t4t5.github.io/sweetalert/dist/sweetalert-dev.js"></script> 
 
</body> 
 

 
</html>

Quelle

2016-04-20 22:36:45 rafaelcastrocouto

So speichern Sie mit Javascript Bild cropper "Croppie"

Antwort

Verwandte Themen