Algorytm skalowania obrazu lub duplikowania DOM w JavaScript?

Oryginalne pytanie:
Jak skalować obraz w JavaScript bez obsługi CSS?Algorytm skalowania obrazu lub duplikowania DOM w JavaScript?

Mój zespół ma środowisko STB, coś w stylu EPG, które obsługuje JavaScript i DOM rzucony na niego. Obsługa CSS istnieje, ale nie możemy tam wprowadzać własnego CSS. Jednostka miary jest zawsze stała i nie może być skalowana przez CSS.

Pokazujemy obrazy w następujący sposób:

Każdy obraz jest wyświetlany jako kawałek małych obrazów generowanych przez urządzenie
Dla 40 x 30 obrazu, daje nam 1200 kawałki 1px x 1px , reprezentowane jako elementy DOM.
Są one umieszczane w kolumnach i wierszach width x height wewnątrz nadrzędnego elementu DOM. Wyglądają na większym ekranie o dużym fizycznym rozmiarze piksela.

Spójrz na obrazek poniżej - coś próbowałem w przeglądarce dla jasności:

Pixel representation

Załóżmy, że każdy blok powyżej jest obraz w sobie 1 x 1 pikseli, stąd DOM element. Łącznie zawsze jest 40 x 30 = 1200 elementów DOM jednocześnie.

Chcemy przeskalować to w wywołanie funkcji, aby podwoić jego rozmiar. Lub przynajmniej dodaj 10 jednostek zarówno do szerokości, jak i wysokości.

Jaką logikę mogę napisać w JavaScript? Czy duplikuję każdy element DOM i umieszczam duplikat obok oryginału? To tylko podwaja szerokość. Czy pomnożę 4 razy również wysokość? Pomoc doceniona.

UPDATE:
Od jedynej odpowiedzi, wydaje się, co potrzebne jest do realizacji algorytmu skalowania lub powielania w JavaScript.

Kiedy powiększamy obrazy w dowolnym systemie operacyjnym, jaki algorytm stosuje się do każdego piksela, aby podwoić jego rozmiar i wyświetlić 1 piksel na 4 piksele sprzętowe?

Potrzebuję zrobić to samo z elementami DOM, gdzie każdy element span lub img działa jak piksel.

Źródło

2013-06-14 Om Shankar

Tak, myślę, że podwojenie tych elementów zarówno w poziomie, jak iw pionie jest jedyną drogą. Mogę się jednak mylić ... –

O ile widzę jesteś ograniczony do dwóch opcji:

Albo podwójna wielkość indywidualnego DOM-pikseli
Lub jeśli nie jest to możliwe, skala swój pixelmap ponad dwukrotnie liczba pikseli-pikseli (więc dodaj każdy piksel dwukrotnie i skopiuj każdy wiersz na końcu)

Oczywiście pierwsza opcja jest zdecydowanie najbardziej wydajna, ale wydaje się, że środowisko, w którym pracujesz, jest dość restrykcyjne, więc zakładam, że nie jest to możliwe.

Źródło

2013-06-17 17:47:54

Zakładając, że podwoję liczbę nie. elementów DOM, jak je umieścić i kolejny element? Muszę skopiować pierwsze 'img' i umieścić je na miejscu drugiego' img'. Następnie oryginalny drugi "img" w miejsce trzeciego i czwartego. Następnie czwarty "img" i tak dalej ... Jest to bardzo intensywna operacja. Jaki jest skuteczny sposób? –

Jeśli masz już pełną mapę, myślę, że najbardziej efektywnym sposobem jest powiedzenie 'l = wiersz [x] .lenght' i zapętlenie z' l do 0' przenoszenie 'wiersz [x] [l * 2] = wiersz [x ] [l]; wiersz [x] [l * 2-1] = wiersz [x] [l] 'w każdej pętli. Następnie, gdy skończysz, po prostu wykonaj to samo dla wierszy, a nie komórek. Przynajmniej zakłada to, że jest to normalna struktura tablicowa, a nie jakiś dziwny przedmiot lub bytearrays. –

Muszę zrobić to samo w 2 wymiarach, osobno dla elementu kolumny w rzędzie. Złożoność będzie większa niż 'n^2'. Wszystko poniżej –

Jeśli masz zamiar używać tylko zdjęć, a nie pikseli, funkcja jest readyly dostępne

użycie tego link

ten zapewnia najlepszą interpolacji obrazu bez problemu,

Jeśli chcesz zrób to ręcznie, następnie podwaj go w rzędzie, a następnie w kolumnie, najpierw w poziomie, a następnie w pionie dwukrotnie,

Przykład (3x3)

XCV 
DFG 
ERT

stanie się to w pierwszym rzędzie-pix mnożący

XXCCVV 
DDFFGG 
EERRTT

czym kolumna pix mnożący

XXCCVV 
XXCCVV 
DDFFGG 
XXCCVV 
EERRTT 
XXCCVV

tutaj po prostu włożyć duplikat rzędu poniżej każdy wiersz, to samo, co można zastosować w pierwszym kroku, jeśli tworzysz matrycę, to pomoże ci to pomnożyć każdy ..

Mam nadzieję, że to pomoże ..

Źródło

2013-06-24 05:09:20 MarmiK

+1. Dzięki. Sprawdziłem wszystkie linki, które były dostępne w twoim poście, z których tylko użyteczne były algorytmy. Reszta korzystała z natywnej funkcjonalności oprogramowania, np. Podwajając rozmiar płótna i wykorzystując płótno. Akceptuję pierwotną pierwszą odpowiedź. –

FYI, Być może druga opcja z wybraną odpowiedzą nie będzie działać poprawnie, ponieważ pokaże obraz podobny do rozciągniętego obrazu, a drugi sam pod tym samym .. Mam nadzieję, że to pomoże .. – MarmiK

Jednostka jest jednym pikselem (lub blokiem) które nie mogą być dalej analizowane. Jeśli więc podwoimy wszystkie jednostki w poziomie, a następnie powiemy ten poziomy rząd, teoretycznie powinno to zadziałać. Wydało mi się to logiczne! –

Algorytm skalowania obrazu lub duplikowania DOM w JavaScript?

Odpowiedz

Powiązane problemy