За последние 24 часа нас посетили 20092 программиста и 1084 робота. Сейчас ищут 745 программистов ...

Нужно получить изображение после обрезки

Тема в разделе "JavaScript и AJAX", создана пользователем sound, 18 янв 2023.

Метки:
  1. sound

    sound Активный пользователь

    С нами с:
    6 янв 2017
    Сообщения:
    26
    Симпатии:
    1
    разбираю чужой скрипт который обрезает изображение
    при выполнении этого кода должно открывается итоговое (обрезанное изображение)
    Но открывается пустая страница


    Код (Javascript):
    1.  var crop_canvas,
    2.                   left = $('.overlay').offset().left - $container.offset().left,
    3.                   top = $('.overlay').offset().top - $container.offset().top,
    4.                   width = $('.overlay').width(),
    5.                   height = $('.overlay').height();
    6.                 crop_canvas = document.createElement('canvas');
    7.                 crop_canvas.width = width;
    8.                 crop_canvas.height = height;
    9.                 crop_canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height);                      
    10. window.open(crop_canvas.toDataURL("image/png"));
    мне нужно получить изображение и сохранить его в базу данных уже из PHP
    Подскажите как добраться до изображения ?
     
  2. antoniii

    antoniii Новичок

    С нами с:
    16 мар 2022
    Сообщения:
    417
    Симпатии:
    71
    Положи в папку со страницей рисунок(car.jpg)
    И вставь две строчки перед
    crop_canvas.getContext() :
    Код (Text):
    1. var image_target=new Image();
    2. image_target.src="car.jpg";
     
  3. sound

    sound Активный пользователь

    С нами с:
    6 янв 2017
    Сообщения:
    26
    Симпатии:
    1
    сделал ничего не изменилось
    а что должно произойти ? рисунок на сервере поменяться или что ?

    если что это скрипт из этой статьи https://habr.com/ru/post/229809
     
  4. antoniii

    antoniii Новичок

    С нами с:
    16 мар 2022
    Сообщения:
    417
    Симпатии:
    71
    У тебя скрипт полностью выложен или только кусок? Есть там объявление image_target ?
    Вообще функцию нужно приводить полностью, иначе теряются ее важные части. Ведь она должна брать откуда то свои данные. Потом ее еще нужно вызвать. У тебя в исходных скриптах библиотека jQuery используется. Без нее функции могут и не работать.
     
    #4 antoniii, 18 янв 2023
    Последнее редактирование: 18 янв 2023
  5. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    3.817
    Симпатии:
    735
    Адрес:
    Татарстан
    1. отправить POST запрос на серверный скрипт PHP, передавая "нарезаный" canvas
    2. на бэке обработать запрос, сохранив все нужные данные куда хотите в БД, еще куда.... в том числе и изображение

    предположительно как то так
    Код (Javascript):
    1. const formData = new FormData();
    2.             formData.append('image', crop_canvas.toDataURL("image/png"));
    3.             ....
    4.  
    5.          $.ajax(target_url, {
    6.                 method: 'POST',
    7.                data: formData,
    8.                dataType: 'json',
    9.                processData: false,
    10.                contentType: false,
    11.                success(data) {}
     
  6. sound

    sound Активный пользователь

    С нами с:
    6 янв 2017
    Сообщения:
    26
    Симпатии:
    1
    А как посмотреть что содержится в const formData
    написал так
    Код (Javascript):
    1. const formData = new FormData();
    2.                 formData.append('image', crop_canvas.toDataURL("image/png"));
    3.                 alert(formData);
    alert пишет [object FormData]
    --- Добавлено ---
    вот полный код
    https://github.com/PlanCZero/HTML5Cropping-Image

    вот тут в самом начале объявление image_target
    Код (Javascript):
    1. (function ($) {
    2.     $.resizeableImage = function (image_target) {
    3.         // Some variable and settings
    4.         var $container,
    5.           orig_src = new Image(),
    6.           image_target = $(image_target).get(0),
    7.           $overlay = $('.overlay'),
    8.           event_state = {},
    9.           constrain = false,
    10.           min_width = 100, // Change as required
    11.           min_height = 100,
    12.           max_width = 800, // Change as required
    13.           max_height = 900,
    14.           resize_canvas = document.createElement('canvas'),
    15.           zoomDelta = 0.01,
    16.           currentScale = 1,
    17.           angleInDegrees = 0;
    18.  
    19.         init = function () {
    20.             // When resizing, we will always use this copy of the original as the base
    21.             orig_src.src = image_target.src;
    22.             // Wrap the image with the container and add resize handles
    23.             $(image_target).wrap('<div class="resize-container"></div>');
    24.             $overlay.html('<div class="overlay-inner"></div>');
    25.             // Assign the container to a variable
    26.             $container = $(image_target).parent('.resize-container');
    27.  
    28.             // Add events
    29.             $container.on('mousedown touchstart', 'img', startMoving);
    30.             $('#freesplacement').on('change', freePlacement);
    31.  
    32.             $('#submitCrop').on('click', crop);
    33.             $('#reset').on('click', function () {
    34.                 reset();
    35.             });
    36.  
    37.             $('#fitWidth').on('click', fitwidth);
    38.             $('#fitHeight').on('click', fitheight);
    39.  
    40.             $("#clockwise").click(function () {
    41.                 angleInDegrees += 90;
    42.                 drawRotated();
    43.             });
    44.  
    45.             $("#counterclockwise").click(function () {
    46.                 angleInDegrees -= 90;
    47.                 drawRotated();
    48.             });
    49.             initSlide();
    50.             $container.offset({
    51.                 'left': 0,
    52.                 'top': 0
    53.             });
    54.             // set size of canvas
    55.             resize_canvas.width = orig_src.width;
    56.             resize_canvas.height = orig_src.height;
    57.  
    58.         };
    59.         freePlacement = function () {
    60.             if ($(this).is(":checked")) {
    61.                 $('.overlay-inner')
    62.                   //  .before('<span class="resize-handle resize-handle-nw"></span>')
    63.                   //  .before('<span class="resize-handle resize-handle-ne"></span>')
    64.                   .after('<span class="resize-handle resize-handle-se"></span>');
    65.                 //  .after('<span class="resize-handle resize-handle-sw"></span>');
    66.                 $('.warning').html('UnCheck "Free Placement" to move picture.');
    67.                 $overlay.addClass('free-place');
    68.                 $overlay.removeClass('pointer-events-none');
    69.                 $overlay.on('mousedown touchstart', '.resize-handle', freePlaceResize);
    70.                 $overlay.on('mousedown touchstart', startMovingCroppingBox);
    71.             } else {
    72.                 $overlay.removeClass('free-place');
    73.                 $overlay.html('<div class="overlay-inner"></div>');
    74.                 $overlay.addClass('pointer-events-none');
    75.                 $('.warning').html('');
    76.             }
    77.         };
    78.         initSlide = function () {
    79.             // Get croping box size.
    80.             var box_width = $('.overlay').width(),
    81.               box_height = $('.overlay').height();
    82.             //  slide nubmer is in between 1-200
    83.             //  Key is find min slide number
    84.             var min_width = (box_width / orig_src.width) * 100;
    85.             var min_height = (box_height / orig_src.height) * 100;
    86.             $("#slider").slider({
    87.                 orientation: "vertical",
    88.                 value: 100,
    89.                 min: 0,
    90.                 max: 200,
    91.                 step: 1,
    92.                 slide: function (event, ui) {
    93.                     if (ui.value >= Math.ceil(min_width) && ui.value >= Math.ceil(min_height)) {
    94.                         zoom(ui.value);
    95.                         //  $("#slider_value").val(ui.value + '%');
    96.                     } else {
    97.                         return false;
    98.                     }
    99.                 },
    100.                 start: function (event, ui) {
    101.                     //console.log('start slide');
    102.                 },
    103.                 stop: function (event, ui) {
    104.                     if (angleInDegrees != 0) {
    105.                         reDrawRotate();
    106.                     } else {
    107.                         resizeImage(resize_canvas.width, resize_canvas.height);
    108.                     }
    109.                 }
    110.             });
    111.             //$("#slider_value").val($("#slider").slider("value") + '%');
    112.         };
     
  7. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    3.817
    Симпатии:
    735
    Адрес:
    Татарстан
    А зачем тебе это смотреть, тем более через alert? Хотя бы console.log
     
  8. sound

    sound Активный пользователь

    С нами с:
    6 янв 2017
    Сообщения:
    26
    Симпатии:
    1
    Ну чтобы убедиться что там все ок
    вот попробовал через консоль
    console.log(formData);

    выводит что то не очень понятное, есть тут внутри изображение ?
    https://clip2net.com/s/4hC51Xf
     
  9. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    3.817
    Симпатии:
    735
    Адрес:
    Татарстан
    а то вам сказал что это можно увидеть?
    отправляйте в php - там смотрите $_FILES

    ну и для разнообраpия/повышения уровня - почитайте что такое FormData
     
    sound нравится это.
  10. antoniii

    antoniii Новичок

    С нами с:
    16 мар 2022
    Сообщения:
    417
    Симпатии:
    71
    Судя по синтаксису $.resizeableImage это кастомный метод jQuery. Еще здесь используется компонент jQuery UI - Slider. Главное протестировать его правильно. Там же статья есть. Разбери как действует по ней. Чего спрашивать, ведь другие не будут повторять весь пример из habr
     
  11. sound

    sound Активный пользователь

    С нами с:
    6 янв 2017
    Сообщения:
    26
    Симпатии:
    1
    @ADSoft
    удалось через ajax получить данные FormData

    Код (Javascript):
    1. $.ajax({
    2.                     type: "POST",
    3.                     url: "ajax.php",
    4.                     data: formData,
    5.                     processData: false,
    6.                     contentType: false,
    7.                     success: function (responce) {
    8.                         $('div[name="bebebe"]').html(responce);
    9.                     }
    10.                 });
    но данные идут в массив $_POST массив $_FILES пустой

    по post массив получаю вот это

    Array ( [image] => data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAABSJJREFUeF7t1bERwDAMxLB4/6UzgV2wfaRXIci8nM9HgMBV4LAhQOAuIBCvg8BDQCCeBwGBeAMEmoA/SHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoREMjIoa3ZBATS3EyNCAhk5NDWbAICaW6mRgQEMnJoazYBgTQ3UyMCAhk5tDWbgECam6kRAYGMHNqaTUAgzc3UiIBARg5tzSYgkOZmakRAICOHtmYTEEhzMzUiIJCRQ1uzCQikuZkaERDIyKGt2QQE0txMjQgIZOTQ1mwCAmlupkYEBDJyaGs2AYE0N1MjAgIZObQ1m4BAmpupEQGBjBzamk1AIM3N1IiAQEYObc0mIJDmZmpEQCAjh7ZmExBIczM1IiCQkUNbswkIpLmZGhEQyMihrdkEBNLcTI0ICGTk0NZsAgJpbqZGBAQycmhrNgGBNDdTIwICGTm0NZuAQJqbqREBgYwc2ppNQCDNzdSIgEBGDm3NJiCQ5mZqREAgI4e2ZhMQSHMzNSIgkJFDW7MJCKS5mRoR+AErVADJkrjltgAAAABJRU5ErkJggg== )
    --- Добавлено ---
    Я пробовал разобраться, весь пример работает и в статье пишут про то что и так работает, у меня вопрос только по сохранению результата в файл, это в примере не работает
     
  12. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    3.817
    Симпатии:
    735
    Адрес:
    Татарстан
    ну... изображение в base64 ...
    извлекаете - записываете
     
    sound нравится это.
  13. sound

    sound Активный пользователь

    С нами с:
    6 янв 2017
    Сообщения:
    26
    Симпатии:
    1
    вроде бы получилось)
    для извлечения картинки нашел такую функцию
    PHP:
    1. function base64_to_jpeg($base64_string, $output_file) {
    2.     // open the output file for writing
    3.     $ifp = fopen( $output_file, 'wb' );
    4.  
    5.     // split the string on commas
    6.     // $data[ 0 ] == "data:image/png;base64"
    7.     // $data[ 1 ] == <actual base64 string>
    8.     $data = explode( ',', $base64_string );
    9.     print_r($data);
    10.     // we could add validation here with ensuring count( $data ) > 1
    11.     fwrite( $ifp, base64_decode( $data[ 1 ] ) );
    12.  
    13.     // clean up the file resource
    14.     fclose( $ifp );
    15.  
    16.     return $output_file;
    17. }
    ну и в скрипте не правильно был прописан тип png надо ставить jpg как картинка иначе черный квадрат сохраняло
     
  14. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    3.817
    Симпатии:
    735
    Адрес:
    Татарстан
    Print_r уж убери... Не нужнотгно