Cropper.js nem működik a szerveren

Cropper.js nem működik a szerveren
2021-04-03T07:50:14+02:00
2021-04-06T07:28:58+02:00
2022-10-15T21:16:10+02:00
tivisu
Sziasztok,
a cropper.js-t használnám képkivágásra. Localban kiválóan működik, viszont, amikor a szerverre feltöltöm, ott nem működik. A kivágási ablak megnyílik, viszont nem hozza létre a png filet. Az ablak egy bootstrap modal és az Elküld gombot, amikor megnyomom, nem történik semmi, marad a modal ablak nyitva és nem is jön létre a fájl.
A modal és a javasript:

<form method="post" enctype="multipart/form-data"> <label for="image" class="form-label">Fotografija:</label> <input type="file" name="image" class="image"> </form> <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog modal-xl" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modalLabel">"Crop" slike (na odnos 16:9)</h5> <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>--> </div> <div class="modal-body"> <div class="img-container"> <div class="row"> <div class="col-md-8"> <!-- default image where we will set the src via jquery--> <img id="image" class="img-fluid"> </div> <div class="col-md-4"> <div class="preview"></div> </div> </div> </div> </div> <div class="modal-footer"> <?php $rand_id = $korisnik . $korisnik_medija;?> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Otkaži</button> <button type="button" class="btn btn-primary" name="crop" id="crop">Pošalji</button> <input type="hidden" id="ids" name="ids" value="1" data-postid="<?php echo $rand_id; ?>"> </div> </div> </div> </div> <script> var bs_modal = $('#modal'); var image = document.getElementById('image'); var cropper,reader,file; $("body").on("change", ".image", function(e) { var files = e.target.files; var done = function(url) { image.src = url; bs_modal.modal('show'); }; if (files && files.length > 0) { file = files[0]; if (URL) { done(URL.createObjectURL(file)); } else if (FileReader) { reader = new FileReader(); reader.onload = function(e) { done(reader.result); }; reader.readAsDataURL(file); } } }); bs_modal.on('shown.bs.modal', function() { cropper = new Cropper(image, { aspectRatio: 1.78, viewMode: 3, dragMode: 'move', preview: '.preview' }); }).on('hidden.bs.modal', function() { cropper.destroy(); cropper = null; }); $("#crop").click(function() { canvas = cropper.getCroppedCanvas({ width: 1280, height: 720, }); canvas.toBlob(function(blob) { url = URL.createObjectURL(blob); var reader = new FileReader(); reader.readAsDataURL(blob); reader.onloadend = function() { var base64data = reader.result; var ids = $('[name="ids"]').attr('data-postid'); $.ajax({ type: "POST", dataType: "json", url: "upload_image_temp.php", data: { image: base64data, ids: ids }, success: function(data) { bs_modal.modal('hide'); alert("success upload image"); $('#uploaded_image').attr('src', base64data); } }); }; }); }); </script> <!-- /. Fotografija -->
az
upload_image_temp.php <?php $folderPath = '../temp_slike/'; $image_parts = explode(";base64,", $_POST['image']); $image_type_aux = explode("../temp_slike/", $image_parts[0]); $image_type = $image_type_aux[1]; $image_base64 = base64_decode($image_parts[1]); $file = $folderPath . uniqid() . '.png'; //file_put_contents($file, $image_base64); //imagedestroy($image); echo json_encode(["image uploaded successfully."]); $data = $_POST['image']; $ids = $_POST['ids']; list($type, $data) = explode(';', $data); list(, $data) = explode(',', $data); $data = base64_decode($data); file_put_contents($folderPath . '/' . $ids . '.png', $data); $image = imagecreatefrompng($folderPath . '/' . $ids . '.png'); imagejpeg($image, $folderPath . '/' . $ids . '.jpg', 50); unlink($folderPath . '/' . $ids . '.png'); imagedestroy($image); ?>
Nem értem, hogy localban miért működik, a szerveren pedig nem :(

Előre is köszönöm.
T
Mutasd a teljes hozzászólást!
Normális szolgáltató nem is enged csak úgy ilyen  paramétereket runtime módosítani, hiszem az egész szerverre kihatással lehet egy rosszul tervezett szkript. Nézd meg a szolgáltató adminisztrációs felületét, ha ott tudod módosítani a post_max_size és sima feltöltéshez az upload_max_filesize értékét, akkor tedd meg. Ha nem, akkor a szolgáltatód keresd. Ez üzemeltetési kérdés, nem fejlesztés. Javaslom bővítsd az ismereteid ilyen téren is.
Mutasd a teljes hozzászólást!

  • Debuggolj, sorról sorra. Pl: a mappába tudsz, írni? A POST adatok átmennek (nem túl nagy)? Stb. Sehol nincs hibakezelés a kódban, ne csodálkozz, ez eddig egy elkapkodott félkész valami.
    Mutasd a teljes hozzászólást!
  • Ha nincs, akkor a szerver oldalon be kellene kapcsolni a hibajelentéseket: error_reporting(E_ALL)
    Majd ideiglenesen ezek megjelenítését: ini_set("display_errors", 1)
    Lehet, hogy már ennyi elég is, hogy js-ben megkapd a hiba okát, amikor visszajön a response feltöltési kísérletkor.
    Ha nem, akkor nézegesd a szerveren a hibanaplót!

    Talán a szerveren:
    - nincs temp_slike könyvtár
    - nem ott van a temp_slike könyvtár, ahol kellene
    - a php-nak nincs joga írni a temp_slike könyvtárba
    Mutasd a teljes hozzászólást!
  • Idáig jutottam:
    [HTTP/1.1 413 Request Entity Too Large 25141ms]

    próbáltam a .htaccess-ben beírni értéket (LimitRequestBody 0), ami localon működik, de csak a nullával. A szerveren még nullával sem :(
    Mutasd a teljes hozzászólást!
  • Normális szolgáltató nem is enged csak úgy ilyen  paramétereket runtime módosítani, hiszem az egész szerverre kihatással lehet egy rosszul tervezett szkript. Nézd meg a szolgáltató adminisztrációs felületét, ha ott tudod módosítani a post_max_size és sima feltöltéshez az upload_max_filesize értékét, akkor tedd meg. Ha nem, akkor a szolgáltatód keresd. Ez üzemeltetési kérdés, nem fejlesztés. Javaslom bővítsd az ismereteid ilyen téren is.
    Mutasd a teljes hozzászólást!
  • Igy van, a szerver beállított paramétereit nem szeretném piszkálni.
    Közben még arra is rájöttem, hogy 10k alatti képeket feltölt, de ahhoz is 5-6 másodperc kell, nagyobbakat nem tud feltölteni.
    Mutasd a teljes hozzászólást!
  • Nos, a szolgáltatóval való egyeztetés után, és kétnapos interneten való keresés után, a következőkkel működik elfogadhatóan:

    A httpd.conf-ban kikommenteltem (#) a kövekező sort:
    LoadModule reqtimeout_module modules/mod_reqtimeout.so

    A php.ini-t visszaállítottam alapbeállításokra (ha esetleg kell, akkor majd növelek értékeket).

    A domainhoz hozzáadtam a php-fpm-et.

    Az én 1Mb-es uploadomnál kb 15 másodpercet kell várni, hogy feltöltődjön egy 3Megás kép (ezt próbáltam), azzal, hogy a kép mérete 1024x572px méretű lesz. Nagyobb kivágásnál lassabban megy a feltöltés, és egyértelmű, hogy kisebb méretnél gyorsabban.

    Köszönöm segítségeteket.
    T
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd