Jaka jest najlepsza praktyka eksportowania obszaru roboczego z obrazami wysokiej jakości?

Question

Potrzebuję twojej pomocy. Wyjaśniam moją sytuację: używam biblioteki fabric.js do umieszczania kształtów, tekstów itp. W mojej aplikacji. Rozmiar mojego płótna ma wymiary 1000 x 1000 pikseli (około 26,45 x 26,45 centymetra). Mam skrypt do przesyłania obrazu tylko w celu przesłania obrazów w wysokiej jakości, takich jak 300 dpi.

Zasadniczo to, co robię, to: - narysuj płótno (wgrywanie zdjęć, umieszczanie tekstu, itp.); - zmiana rozmiaru płótna pomnożenie przez współczynnik skali, aby na końcu mieć obraz o rozdzielczości 300dpi; - zapisz płótno w formacie PNG; - używając php/ajax i Imagick, umieść płótno o jakości 300 dpi, zapisując w formacie JPG.

Problem polega na tym, że gdy zapiszę płótno, jakość przesłanych zdjęć zostanie anulowana, ponieważ zmieniam rozmiar płótna na 72 dpi (w momencie, w którym zapisuję w PNG).

Myślę, że możliwe rozwiązanie: podczas przesyłania obrazów, zapisz pozycję w tablicy z pozycją x i y na końcu całego procesu, zastąp obraz w JPG. Jeśli jest to najlepszy sposób, można to zrobić za pomocą biblioteki Imagick lub w PHP?

Chciałbym poznać Twoją opinię na ten temat.

Dziękuję.

Answer 1

DPI nie ma żadnego znaczenia w przypadku zdjęć. Obrazy są mierzone w pikselach, więc to jest to, co musisz dostosować. Możesz bezpiecznie lekceważyć DPI, ponieważ nie ma sensu w tym kontekście.

Skalowanie ci tu nie pomoże - pamiętaj, że pracujesz z urządzeniem pikselowym, a nie wektorami, więc płótno musi być już w rozmiarze, którego chcesz użyć do drukowania itp. Lub będziesz mieć obniżoną jakość ze względu na interpolacja podczas skalowania.

Oto jak:

Musisz wstępnie calulate swój rozmiar płótna w pikselach w stosunku do tego, co chcesz Rozmiar w końcowej fazie.

Powiedzmy, że chcesz wydrukować obraz o wymiarach 15 x 10 cm (lub około 6 x 4 cale) przy 300 dpi. Następnie obliczyć pikseli (! 4 w = 10 cm więc trochę inny wynik, numery wybierane do prostoty)

Width : 10 cm * 300/2.54 = 1181 pixels 
Height: 15 cm * 300/2.54 = 1772 pixels 

Dla cali wystarczy pomnożyć z DPI:

Width : 4 in * 300 = 1200 pixels 
Height: 6 in * 300 = 1800 pixels 

Na swoje obraz na 26,45 cm @ 300 DPI płótno musiałby być:

26.45 cm * 300 DPI/2.54 inches = 3124 pixels. 

aby wyświetlić tego płótna w mniejszym obszarze na ekranie użyć CSS, aby wyświetlić t on elementem, na przykład -

<canvas width="3124" height="3124" style="width:600px;height:600px;"></canvas> 

Teraz można wyciągnąć na płótnie w swojej aktualnej pozycji piksela i pokaże się skalowane w dół na ekranie (ale zachowują wszelkie informacje na temat samego płótna). Jeśli używasz współrzędnych myszy, przeskalujesz proporcjonalnie pozycję myszy (canvas pos = mouse coordin * 3124px/600px).

Aby powiększyć itp., Staje się odrobinę bardziej skomplikowane, ale zasada pozostaje: ostateczny rozmiar obrazu musi być końcowym wynikiem.

Informacje o DPI: jeżeli ten obraz miał 72 DPI lub 300 DPI, liczba pikseli byłaby taka sama. Powodem, jak już wspomniano, jest to, że obrazy są mierzone w pikselach.

DPI jest wartością arbitralną, jeśli chodzi o urządzenia pikselowe (mapy bitowe, monitory, aparaty fotograficzne itp.) I jest używany tylko w oprogramowaniu DTP, aby uzyskać wskazówkę dotyczącą wymiaru ostatecznego wydruku, który będzie wykorzystywał te informacje tylko do wstępnego wydruku. przeskaluj obraz w stosunku do strony, której używasz do ustawienia drukowania.