разбираю чужой скрипт который обрезает изображение при выполнении этого кода должно открывается итоговое (обрезанное изображение) Но открывается пустая страница Код (Javascript): var crop_canvas, left = $('.overlay').offset().left - $container.offset().left, top = $('.overlay').offset().top - $container.offset().top, width = $('.overlay').width(), height = $('.overlay').height(); crop_canvas = document.createElement('canvas'); crop_canvas.width = width; crop_canvas.height = height; crop_canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height); window.open(crop_canvas.toDataURL("image/png")); мне нужно получить изображение и сохранить его в базу данных уже из PHP Подскажите как добраться до изображения ?
Положи в папку со страницей рисунок(car.jpg) И вставь две строчки перед crop_canvas.getContext() : Код (Text): var image_target=new Image(); image_target.src="car.jpg";
сделал ничего не изменилось а что должно произойти ? рисунок на сервере поменяться или что ? если что это скрипт из этой статьи https://habr.com/ru/post/229809
У тебя скрипт полностью выложен или только кусок? Есть там объявление image_target ? Вообще функцию нужно приводить полностью, иначе теряются ее важные части. Ведь она должна брать откуда то свои данные. Потом ее еще нужно вызвать. У тебя в исходных скриптах библиотека jQuery используется. Без нее функции могут и не работать.
1. отправить POST запрос на серверный скрипт PHP, передавая "нарезаный" canvas 2. на бэке обработать запрос, сохранив все нужные данные куда хотите в БД, еще куда.... в том числе и изображение предположительно как то так Код (Javascript): const formData = new FormData(); formData.append('image', crop_canvas.toDataURL("image/png")); .... $.ajax(target_url, { method: 'POST', data: formData, dataType: 'json', processData: false, contentType: false, success(data) {}
А как посмотреть что содержится в const formData написал так Код (Javascript): const formData = new FormData(); formData.append('image', crop_canvas.toDataURL("image/png")); alert(formData); alert пишет [object FormData] --- Добавлено --- вот полный код https://github.com/PlanCZero/HTML5Cropping-Image вот тут в самом начале объявление image_target Код (Javascript): (function ($) { $.resizeableImage = function (image_target) { // Some variable and settings var $container, orig_src = new Image(), image_target = $(image_target).get(0), $overlay = $('.overlay'), event_state = {}, constrain = false, min_width = 100, // Change as required min_height = 100, max_width = 800, // Change as required max_height = 900, resize_canvas = document.createElement('canvas'), zoomDelta = 0.01, currentScale = 1, angleInDegrees = 0; init = function () { // When resizing, we will always use this copy of the original as the base orig_src.src = image_target.src; // Wrap the image with the container and add resize handles $(image_target).wrap('<div class="resize-container"></div>'); $overlay.html('<div class="overlay-inner"></div>'); // Assign the container to a variable $container = $(image_target).parent('.resize-container'); // Add events $container.on('mousedown touchstart', 'img', startMoving); $('#freesplacement').on('change', freePlacement); $('#submitCrop').on('click', crop); $('#reset').on('click', function () { reset(); }); $('#fitWidth').on('click', fitwidth); $('#fitHeight').on('click', fitheight); $("#clockwise").click(function () { angleInDegrees += 90; drawRotated(); }); $("#counterclockwise").click(function () { angleInDegrees -= 90; drawRotated(); }); initSlide(); $container.offset({ 'left': 0, 'top': 0 }); // set size of canvas resize_canvas.width = orig_src.width; resize_canvas.height = orig_src.height; }; freePlacement = function () { if ($(this).is(":checked")) { $('.overlay-inner') // .before('<span class="resize-handle resize-handle-nw"></span>') // .before('<span class="resize-handle resize-handle-ne"></span>') .after('<span class="resize-handle resize-handle-se"></span>'); // .after('<span class="resize-handle resize-handle-sw"></span>'); $('.warning').html('UnCheck "Free Placement" to move picture.'); $overlay.addClass('free-place'); $overlay.removeClass('pointer-events-none'); $overlay.on('mousedown touchstart', '.resize-handle', freePlaceResize); $overlay.on('mousedown touchstart', startMovingCroppingBox); } else { $overlay.removeClass('free-place'); $overlay.html('<div class="overlay-inner"></div>'); $overlay.addClass('pointer-events-none'); $('.warning').html(''); } }; initSlide = function () { // Get croping box size. var box_width = $('.overlay').width(), box_height = $('.overlay').height(); // slide nubmer is in between 1-200 // Key is find min slide number var min_width = (box_width / orig_src.width) * 100; var min_height = (box_height / orig_src.height) * 100; $("#slider").slider({ orientation: "vertical", value: 100, min: 0, max: 200, step: 1, slide: function (event, ui) { if (ui.value >= Math.ceil(min_width) && ui.value >= Math.ceil(min_height)) { zoom(ui.value); // $("#slider_value").val(ui.value + '%'); } else { return false; } }, start: function (event, ui) { //console.log('start slide'); }, stop: function (event, ui) { if (angleInDegrees != 0) { reDrawRotate(); } else { resizeImage(resize_canvas.width, resize_canvas.height); } } }); //$("#slider_value").val($("#slider").slider("value") + '%'); };
Ну чтобы убедиться что там все ок вот попробовал через консоль console.log(formData); выводит что то не очень понятное, есть тут внутри изображение ? https://clip2net.com/s/4hC51Xf
а то вам сказал что это можно увидеть? отправляйте в php - там смотрите $_FILES ну и для разнообраpия/повышения уровня - почитайте что такое FormData
Судя по синтаксису $.resizeableImage это кастомный метод jQuery. Еще здесь используется компонент jQuery UI - Slider. Главное протестировать его правильно. Там же статья есть. Разбери как действует по ней. Чего спрашивать, ведь другие не будут повторять весь пример из habr
@ADSoft удалось через ajax получить данные FormData Код (Javascript): $.ajax({ type: "POST", url: "ajax.php", data: formData, processData: false, contentType: false, success: function (responce) { $('div[name="bebebe"]').html(responce); } }); но данные идут в массив $_POST массив $_FILES пустой по post массив получаю вот это Array ( [image] => data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAABSJJREFUeF7t1bERwDAMxLB4/6UzgV2wfaRXIci8nM9HgMBV4LAhQOAuIBCvg8BDQCCeBwGBeAMEmoA/SHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoR+AErVADJkrjltgAAAABJRU5ErkJggg== ) --- Добавлено --- Я пробовал разобраться, весь пример работает и в статье пишут про то что и так работает, у меня вопрос только по сохранению результата в файл, это в примере не работает
вроде бы получилось) для извлечения картинки нашел такую функцию PHP: function base64_to_jpeg($base64_string, $output_file) { // open the output file for writing $ifp = fopen( $output_file, 'wb' ); // split the string on commas // $data[ 0 ] == "data:image/png;base64" // $data[ 1 ] == <actual base64 string> $data = explode( ',', $base64_string ); print_r($data); // we could add validation here with ensuring count( $data ) > 1 fwrite( $ifp, base64_decode( $data[ 1 ] ) ); // clean up the file resource fclose( $ifp ); return $output_file; } ну и в скрипте не правильно был прописан тип png надо ставить jpg как картинка иначе черный квадрат сохраняло