Autor | Zpráva | ||
---|---|---|---|
ludvalb Profil |
Ahoj, nedokázl by jste mi někdo prosím poradit jak upravit následující kód aby oříznutý obrázek také uložil na server a dal mu nový název, např. img01.jpg (koncovka dle nahraného typu).
Našel jsem tento kod pro ořez obrázku, ale nedaří se mi ho uložit. Předem děkuji za jakoukoliv pomoc. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Cropper.js</title> <link rel="stylesheet" href="./css/bootstrap.min.css" crossorigin="anonymous"> <link rel="stylesheet" href="./css/cropper.css"> <style> .label { cursor: pointer; } .progress { display: none; margin-bottom: 1rem; } .alert { display: none; } .img-container img { max-width: 100%; } </style> </head> <body> <div class="container"> <h1>Upload cropped image to server</h1> <form method="post" enctype="multipart/form-data"> <label class="label" data-toggle="tooltip" title="Change your avatar"> <img class="rounded" id="avatar" src="https://avatars0.githubusercontent.com/u/3456749?s=160" alt="avatar"> <input type="file" class="sr-only" id="input" name="image" accept="image/*"> </label> </form> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div> </div> <div class="alert" role="alert"></div> <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modalLabel">Crop the image</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"> <img id="image" src="https://avatars0.githubusercontent.com/u/3456749"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary" id="crop">Crop</button> </div> </div> </div> </div> </div> <script src="./js/jquery-3.4.1.min.js" crossorigin="anonymous"></script> <script src="./js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <script src="./js/cropper.js"></script> <script> window.addEventListener('DOMContentLoaded', function () { var avatar = document.getElementById('avatar'); var image = document.getElementById('image'); var input = document.getElementById('input'); var $progress = $('.progress'); var $progressBar = $('.progress-bar'); var $alert = $('.alert'); var $modal = $('#modal'); var cropper; $('[data-toggle="tooltip"]').tooltip(); input.addEventListener('change', function (e) { var files = e.target.files; var done = function (url) { input.value = ''; image.src = url; $alert.hide(); $modal.modal('show'); }; var reader; var file; var url; 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); } } }); $modal.on('shown.bs.modal', function () { cropper = new Cropper(image, { aspectRatio: 1, viewMode: 3, }); }).on('hidden.bs.modal', function () { cropper.destroy(); cropper = null; }); document.getElementById('crop').addEventListener('click', function () { var initialAvatarURL; var canvas; $modal.modal('hide'); if (cropper) { canvas = cropper.getCroppedCanvas({ width: 160, height: 160, }); initialAvatarURL = avatar.src; avatar.src = canvas.toDataURL(); $progress.show(); $alert.removeClass('alert-success alert-warning'); canvas.toBlob(function (blob) { var formData = new FormData(); formData.append('avatar', blob, 'avatar.jpg'); $.ajax('https://jsonplaceholder.typicode.com/posts', { method: 'POST', data: formData, processData: false, contentType: false, xhr: function () { var xhr = new XMLHttpRequest(); xhr.upload.onprogress = function (e) { var percent = '0'; var percentage = '0%'; if (e.lengthComputable) { percent = Math.round((e.loaded / e.total) * 100); percentage = percent + '%'; $progressBar.width(percentage).attr('aria-valuenow', percent).text(percentage); } }; return xhr; }, success: function () { $alert.show().addClass('alert-success').text('Upload success'); }, error: function () { avatar.src = initialAvatarURL; $alert.show().addClass('alert-warning').text('Upload error'); }, complete: function () { $progress.hide(); }, }); }); } }); }); </script> </body> </html> Zde je ještě odkaz na testovací stráknu: testovací stránka |
||
anonym_ Profil * |
#2 · Zasláno: 25. 10. 2020, 15:37:23
ludvalb:
“Nedaří se mi ho uložit.“ A kód, kde se o to uložení pokousis, je kde? |
||
ludvalb Profil |
anonym:
Netusim prave jak na to. V javascriptu se moc nevyznam. A nevim kde hledat Případně bych měl pro zajemce placenou praci s pomoci vylepseni online aplikace na sestaveni fotokalendaru. Velmi specha. Pripadne zajemce prosim o kontakt na info@absolutnoweb.eu |
||
Keeehi Profil |
#4 · Zasláno: 25. 10. 2020, 17:49:25
ludvalb:
Vždyť tam to odesílání na server máš. Odesílá se to na jsonplaceholder.typicode.com/posts Jediné co je potřeba je změnit tu url na nějakou svojí a na ní mít připravené něco, co ta data uloží. |
||
anonym_ Profil * |
#5 · Zasláno: 25. 10. 2020, 18:48:13
ludvalb:
„Netusim prave jak na to. V javascriptu se moc nevyznam. A nevim kde hledat“ Zeptal bych se někoho u vás, kdo to má na starosti... třeba pomůže :-) |
||
ludvalb Profil |
#6 · Zasláno: 25. 10. 2020, 22:08:53
Keeehi:
Dekuji |
||
Časová prodleva: 3 roky
|
0