Jquery-Plug-In Croppie zum Zuschneiden des Bildes Fehler

Lesezeit: 2 Minuten

Benutzer-Avatar
Jonathan Tyar

Ich möchte das Jquery Croppie Plugin auf meiner Website verwenden, um Bilder für meinen Benutzer zuzuschneiden, aber ich habe dieses Problem, dass der Code, den ich schreibe, nicht als Beispiel angezeigt wird Croppie-Site

Hier ist mein Code

HTML Quelltext

<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>

JS-Code

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

NB: Ich habe meine Seite mit jquery, croppie.js und croppie.css verlinkt

Benutzer-Avatar
Leandro Parice

Probieren Sie es aus, bei mir funktioniert es. Ich habe PHP verwendet, um das Bild zu speichern.

<?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="https://stackoverflow.com/questions/34237020/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>

a JSFiddle-Link

  • Dies ist ein großartiges Beispiel.

    – Gjermund Dahl

    8. März 2016 um 14:58 Uhr

  • Ich habe das kopiert und ausgeführt. Ich bekomme immer eine Undefined Offset: 1 auf Linien 8 und 9 die lesen list($type, $data) = explode(';', $data); und list(, $data) = explode(',', $data);. Es erstellt eine Datei, die jedoch nicht lesbar ist. Irgendwelche Hinweise wären toll!

    – xxSithRagexx

    3. Dezember 2017 um 8:21 Uhr

  • Dies sollte das einzige und einzige Beispiel auf der Croppie-Dokumentationsseite sein. Alle Beispiele dort sind nur für den Entwickler verständlich, es gibt kein einziges Beispiel, das tatsächlich funktioniert.

    – andreszs

    12. August 2019 um 0:08 Uhr

  • Es funktioniert für mich, Bilder mit dem CI-Framework zuzuschneiden und hochzuladen

    – Nikhil Borikar

    17. Februar 2021 um 7:27 Uhr

1056010cookie-checkJquery-Plug-In Croppie zum Zuschneiden des Bildes Fehler

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy