Jak zmienić rozmiar obrazu za pomocą JavaScript/jQuery bez pixelacji tak jak przeglądarka?

Question

Tworzę program javascript/jquery dla strony internetowej, aby umożliwić użytkownikowi otwieranie pliku obrazu lokalnie z ich komputera, a następnie program zmienia rozmiar na rozmiar ikony 16 x 16 i zapisuje go jako adres URL danych.

Wszystko działa dobrze, z tym, że obraz o zmienionej wielkości jest bardzo podzielony na piksele. Aktualnie przechodzę z lokalnego pliku obrazu i robię z niego URL danych. Następnie tworzy element canvas 16 x 16, a następnie rysuje obraz na płótnie i tworzy z niego nowy URL danych.

Chciałbym w inny sposób to zrobić, ponieważ nowo powiększony obraz jest bardzo podzielony na piksele i nie jest gładki, i nie wydaje się wygładzany. Gdy przeglądarka wyświetla oryginalny obraz z atrybutami szerokości i wysokości ustawionymi na 16, wygląda bardzo ładnie i gładko. To jest to, co chciałbym. Nie rozumiem, jak uzyskać taki sam wynik, jak to, co jest wyświetlane, gdy przeglądarka to robi. Korzystam z Google Chrome.

zrobiłem mały przykład tutaj: http://jsfiddle.net/5Pj8m/

W przykładzie użyłem logo jsFiddle, chociaż można przetestować go z dowolnego pliku lokalnego i zobaczyć wyniki. Może ten kod może pomóc komuś innemu nauczyć się, jak to zrobić, ale nadal myślę, że wynikowy obraz zmiany rozmiaru może lub powinien wyglądać znacznie lepiej!

Mam nadzieję, że wyjaśniłem, co próbuję zrobić i że jest to jakoś możliwe. Czy ktoś może mi pomóc lub wymyślić to?

Oto kod.

HTML:

<input type='file' id='inputFile'> 
<table border=1><tr><td> 
<span id='spanDisplayOrigFull'>OrigFull: 
<img src=http://doc.jsfiddle.net/_images/jsfiddle-logo-thumb.png> 
</span> 
</td><td> 
<span id='spanDisplayOrigIcon'>OrigIcon: 
<img src=http://doc.jsfiddle.net/_images/jsfiddle-logo-thumb.png width='16' height='16'> 
</span> 
</td></tr><tr><td> 
<span id='spanDisplayNewFull'>NewFull: </span> 
</td><td> 
<span id='spanDisplayNewIcon'>NewIcon: </span> 
</td></tr></table> 

javascript:

$('#inputFile').bind('change', function() 
{ 

var file = inputFile.files[0]; 

var reader = new FileReader(); 
reader.readAsDataURL(file); 

reader.onload = function() 
{ 

var imageUrlFull = reader.result; 

var imageLocalFull = new Image(); 
imageLocalFull.src = imageUrlFull; 
imageLocalFull.id = 'imageLocalFull'; 

imageLocalFull.onload = function() 
{ 

var canvas = document.createElement('canvas'); 
canvas.width = 16; canvas.height = 16; 

var context = canvas.getContext('2d'); 
context.drawImage(imageLocalFull, 0, 0, 16, 16); 

var imageUrlIcon = canvas.toDataURL(file.type); 

var imageLocalIcon = new Image(); 
imageLocalIcon.src = imageUrlIcon; 
imageLocalIcon.id = 'imageLocalIcon'; 

imageLocalIcon.onload = function() 
{ 

spanDisplayNewFull.appendChild(imageLocalFull); 
spanDisplayNewIcon.appendChild(imageLocalIcon); 

}; 

}; 

}; 

}); 

Answer 1

Cóż, z kodu wygląda skalowanie obrazu praca jest rzeczywiście lewej do wdrażania przeglądarki, więc myślę, że masz zamiar mają różne wyniki w różnych przeglądarkach. Niektórzy mogą go wygładzić, niektórzy mogą nie.

Widzę dwa sposoby radzenia sobie z tym problemem. Jednym ze sposobów jest użycie aktywnej zawartości, takiej jak aplet Java/Flash lub użycie rzeczywistego back-endu do skalowania. To znaczy. otrzymasz plik, wyślesz go na serwer, a serwer zwróci skalowany obraz, tak jak robi to większość witryn skalujących obraz.

Drugi sposób to wypróbowanie HTML5 i samodzielne wdrożenie algorytmu zmniejszania skali. Najlepsze, co mogę zrobić, aby uzyskać wskazówki, to wskazać jako this i this jako punkt wyjścia.

Przepraszam, jeśli to nie pomoże.

Answer 2

Do skalowania można użyć podstawy php, takiej jak timthumb. Tak więc podstawową ideą jest użycie js, gdy przeglądarka, div lub jakakolwiek zmiana lub zmiana rozmiaru. Następnie uruchom skrypt php, aby zmienić rozmiar obrazu. script.setAttribute ('src', 'remote.php? Value = my message'); remote.php masz swój kod php.