За последние 24 часа нас посетили 72028 программистов и 1650 роботов. Сейчас ищут 912 программистов ...

Кадрирование изображений при загрузке

Тема в разделе "JavaScript и AJAX", создана пользователем TigerZaka, 21 ноя 2014.

  1. TigerZaka

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

    С нами с:
    16 сен 2011
    Сообщения:
    189
    Симпатии:
    1
    Всем привет!
    Есть задача по кадрированию загружаемых изображений:


    • 1. Пользователь выбирает изображения
      2. Не сохраняя на сервере, выводим миниатюры этих изображений
      3. Затем пользователю надо выбрать формат (например 10*15, 15*20 и т.д.)
      4. В зависимости от формата, выводим рамку для кадрирования
      5. Получаем координаты точек рамки x1,x2,y1,y2

    Когда лучше выполнять кадрирование, на сервере или клиенте?

    Объясните еще такой момент:
    - Загружаем фото, скажем 2000*3000 px;
    - Миниатюра выводится, например, 150*150px;
    - Выбираем формат, устанавливаем рамку кадрирования, получаем координаты;
    - При обрезке, по-умолчанию (если можно так выразиться), мы кадрируем миниатюру или исходное (большое) изображение с учетом пропорций?

    Спасибо!
     
  2. Ganzal

    Ganzal Суперстар
    Команда форума Модератор

    С нами с:
    15 мар 2007
    Сообщения:
    9.893
    Симпатии:
    965
    а на клиенте кадрирование как делается?
     
  3. Zuldek

    Zuldek Старожил

    С нами с:
    13 май 2014
    Сообщения:
    2.381
    Симпатии:
    344
    Адрес:
    Лондон, Тисовая улица, дом 4, чулан под лестницей
    На клиенте вы выполнить его нормально не сможете потому что у вас нет доступа к файловой системе клиента технологиями из заголовка вашей темы. Есть возможности манипуляций с клиентским хранилищем и некоторые костыли, но последние однозначно не будут поддерживаться всеми популярными браузерами.
    Исходное изображение.
     
  4. Ganzal

    Ganzal Суперстар
    Команда форума Модератор

    С нами с:
    15 мар 2007
    Сообщения:
    9.893
    Симпатии:
    965
    а зачем он нужен?
     
  5. Zuldek

    Zuldek Старожил

    С нами с:
    13 май 2014
    Сообщения:
    2.381
    Симпатии:
    344
    Адрес:
    Лондон, Тисовая улица, дом 4, чулан под лестницей
    Бывают задачки где не помешала бы свободная манипуляция разрешённым файловым хранилищем, что кое-где уже реализованно. К задаче тс это отношения не имеет тем не менее.
     
  6. TigerZaka

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

    С нами с:
    16 сен 2011
    Сообщения:
    189
    Симпатии:
    1
    imagecopyresized
    это не проблема
     
  7. Ganzal

    Ganzal Суперстар
    Команда форума Модератор

    С нами с:
    15 мар 2007
    Сообщения:
    9.893
    Симпатии:
    965
    это на стороне клиента??????????? как???????????? на стороне клиента я ожидал канваз какой-нибудь, но никак не имейджкомиресайзд...
     
  8. Zuldek

    Zuldek Старожил

    С нами с:
    13 май 2014
    Сообщения:
    2.381
    Симпатии:
    344
    Адрес:
    Лондон, Тисовая улица, дом 4, чулан под лестницей
    ну раз не проблема ресайзите на клиенте.
    Ну допустим, както взяли картинку с клиента сконвертировали в webgl, покрутили уменьшили, дальше что?
    Клиентская библиотека должна отдать валидный код в одном из форматов графических, не в json же передавать картинку на сервер? :)
    Соответственно, помимо доступа к чтению файла клиента из js, либа должна помимо конвертации картинки в js-формат для манипуляций с ней, уметь ещё выполнить обратную конвертацию в png-формт и выплюнуть его серверу. Столько вот бесполезных действий.
     
  9. Ganzal

    Ganzal Суперстар
    Команда форума Модератор

    С нами с:
    15 мар 2007
    Сообщения:
    9.893
    Симпатии:
    965
    стандарт в целях безопасности допускает только клиентское взаимодействие со своей файловой системой. выбор файла пользователем - допустимое действие.

    или канвас

    любой графический формат допустимый в вэбе. канвас это умеет.

    так. и? загрузили в страницу, обработали, отправили на сервер. не понимаю вообще сути проблемы. тс стоит перед выбором резать на клиенте или резать на сервере. я чисто для проверки знаний решил уточнить понимаете ли он как резать на клиенте. оказалось он планирует на клиенте выполнить пхп-функцию. и я просто указал на то что ожидал канвас какой-нибудь увидеть. честно не понимаю в какую сторону вы-то клоните.
     
  10. Zuldek

    Zuldek Старожил

    С нами с:
    13 май 2014
    Сообщения:
    2.381
    Симпатии:
    344
    Адрес:
    Лондон, Тисовая улица, дом 4, чулан под лестницей
    какой в з_цу выбор файла?
    Вам читать файл нужно! Разъясняю, что это не тоже самое, что выбрать его для загрузки через input type=file.

    А допустимым это действие становится при наличии и поддержки соответствущего интерфейса из html5 fileapi который зовётся FileReader. Если это действие наряду с поддержкой канвасов возможно, то ресайз и отправка аякс-запросом в bas64 отресайзенной картинки на сервер никаких технических сложностей не составит. И клоню я к тому что всё упирается опять в браузер, поэтому в том числе никакие подобные велосипеды с резайзом на клиенте социальные сети и другие сайты не используют и все действия над пользовательскими изображениями производятся на сервере.
     
  11. MiksIr

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

    С нами с:
    29 ноя 2006
    Сообщения:
    2.339
    Симпатии:
    44
    Эти "велосипеды" с ресайзом поддерживаются всеми кроме ИЕ9-
    Для доболомов с ИЕ8-9 можно сделать отдельно через сервер.
     
  12. Ganzal

    Ganzal Суперстар
    Команда форума Модератор

    С нами с:
    15 мар 2007
    Сообщения:
    9.893
    Симпатии:
    965
    во-первых что еще за з_цу? никогда такого не видел. во-вторых а как браузер узнает какой файл? а? а? то-то. сначала пользователь на него укажет. а потом браузер получит право файл считать. разъясняю, это сделано в целях безопасности чтоб браузер не прочитал весь жесткий диск по желанию чьего-то скриптика. но я думаю мы этими тонкостями ушли от темы.
     
  13. dapperkop

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

    С нами с:
    26 сен 2013
    Сообщения:
    890
    Симпатии:
    0
    Сначала загрузить на сервер, потом кропать. Можно и на канве, можно и без нее. Если хочется совместимости со старыми браузерами, то без канвы, но надо ли?

    imagecopyresampled, как показывает практика - лучше.
     
  14. Zuldek

    Zuldek Старожил

    С нами с:
    13 май 2014
    Сообщения:
    2.381
    Симпатии:
    344
    Адрес:
    Лондон, Тисовая улица, дом 4, чулан под лестницей
    Мы не ушли от темы, а у вас в голове перемешались две совершенно разные но связанные функции api браузера. Разумеется что перед чтением файла нужно иметь возможность его выбрать. И только после этого читать его из JS при поддержке уже других методов API на которые вам указал.
    Если вы в итоге поняли в чём ошиблись или что не учли, то хорошо.