Skrypt kadrowania zdjęć Opcje

[adbacz]

Chciałbym, żebyście ocenili skrypt kadrowania zdjęć. Jego zasada działania jest troszkę inna niż większości, dlatego liczę na oceny i ewentualną krytykę. Kod może zawierać masę błędów - starałem się przetestować go jak najlepiej, ale zdaję sobie sprawę, że może się jakieś znajdą.

http://requtize.github.io/cropimg/

[adbacz]

@by_ikar - Plugin nie definiuje czym jest wypełniany pozostały obszar - to czy to będzie przeźroczyste tło, czy wypełniony kolorek obszar o wykadrowaniu pozostawiam programiście już na poziomie kadrowania w PHP. Fakt, z tymi buttonami masz rację, zamienię elementy. Jeśli chodzi o obramowanie, to chciałem dać użytkownikowi informację, gdzie się kończy obszar kadrowania. Jedyne na co wpadłem to to obramowanie - może masz jakiś inny pomysł?

@PrinceOfPersia - Niestety na stronach GitHub nie można umieszczać skryptów PHP więc nie ma tam przycisku "Wykadruj". Plugin działa na takiej zasadzie, że oblicza pozycję zdjęcia względem kadrowanego obszaru i wrzuca do inputów o danych ID wartości pozycji X, Y, wysokości oraz szerokości kadrowanego obszaru. W tedy można te wartości wysłąć formularzem lub AJAX i z poziomu skryptu PHP wykadrować obrazek.

Ten post edytował adbacz 26.05.2014, 08:31:33

[PrinceOfPersia]

@PrinceOfPersia - Niestety na stronach GitHub nie można umieszczać skryptów PHP więc nie ma tam przycisku "Wykadruj". Plugin działa na takiej zasadzie, że oblicza pozycję zdjęcia względem kadrowanego obszaru i wrzuca do inputów o danych ID wartości pozycji X, Y, wysokości oraz szerokości kadrowanego obszaru. W tedy można te wartości wysłąć formularzem lub AJAX i z poziomu skryptu PHP wykadrować obrazek.

właściwie da się to zrobić już na poziomie przeglądarki w JS:
- tworzysz Canvas (może być niewidoczny)
- jak użytkownik kliknie "wykadruj" rysujesz na Canvasie wykadrowany obrazek
- potem pobierasz z Canvasa dane przez toDataURL, i wrzucasz do obiektu image: image.src = canvas.toDataURL()
- użytkownik potem klika "zapisz jako"

przy większych obrazkach z tego co pamiętam, mogą występować jakieś problemy (ograniczenia przeglądarek co do długości dataURLów), ale przy mniejszych jest okej.

http://www.html5canvastutorials.com/tutori...vas-image-crop/

EDIT: aha, tylko, że mogą sie pojawić problemy, jeśli obrazek będzie w innej domenie niż strona. Przy uploadzie na serwer, nie byłoby to problemem, ale URLe z internetu mogą być problemem (same domain policy).
Ale można zrobić ładowanie obrazka poprzez <input type="file"> + FileReader, czyli taki pseudo-upload (pseudo, bo upload do przeglądarki, a nie na serwer) : https://developer.mozilla.org/en-US/docs/Us...eb_applications
To powinno działać, bo kiedyś na podobnej zasadzie zrobiłem puzzle na canvasie (można było właśny obrazek "wgrać", z tym, że wszystko było bez użycia kodu serwerowego)

Ten post edytował PrinceOfPersia 26.05.2014, 15:28:14