Jak skalować obraz (w formacie danych URI) w JavaScript (prawdziwe skalowanie, nie używając do stylizacji)

Question

Jesteśmy przechwytywanie kartę widoczną w przeglądarce Chrome (używając rozszerzenia API chrome.tabs.captureVisibleTab) i odbierania migawkę w schemacie URI danych (ciąg znaków zakodowany w Base64).

Czy istnieje biblioteka JavaScript, której można użyć do skalowania obrazu do określonego rozmiaru?

Obecnie stylizujemy ją za pomocą CSS, ale musimy płacić kary za wydajność, ponieważ zdjęcia są przeważnie 100 razy większe niż wymagane. Dodatkowym problemem jest również obciążenie lokalnego magazynu, którego używamy do zapisywania naszych migawek.

Czy ktoś wie o sposobie przetwarzania tego schematu URI danych sformatowanych obrazów i zmniejszenia ich rozmiaru poprzez zmniejszenie ich skali?

Referencje:

• danych schematu URI na http://en.wikipedia.org/wiki/Data_URI_scheme
• Chrome Extensions API na http://code.google.com/chrome/extensions/tabs.html
• The "Ostatnio zamknięte karty" Chrome Extension na http://code.google.com/p/recently-closed-tabs

Answer 1

Oto funkcja, która powinna zrobić to, czego potrzebujesz. Podajesz adres URL obrazu (np. Wynik z , ale może to być dowolny adres URL), żądany rozmiar i wywołanie zwrotne. Wykonuje się asynchronicznie, ponieważ nie ma gwarancji, że obraz zostanie załadowany natychmiast po ustawieniu właściwości src. Z URL-em danych prawdopodobnie będzie, ponieważ nie musi niczego pobierać, ale go nie wypróbowałem.

Połączenie zwrotne przekazuje wynikowy obraz jako URL danych. Zauważ, że wynikowy obraz będzie plikiem PNG, ponieważ implementacja przeglądarki Chrome toDataURL nie obsługuje obrazu/jpeg.

function resizeImage(url, width, height, callback) { 
    var sourceImage = new Image(); 

    sourceImage.onload = function() { 
     // Create a canvas with the desired dimensions 
     var canvas = document.createElement("canvas"); 
     canvas.width = width; 
     canvas.height = height; 

     // Scale and draw the source image to the canvas 
     canvas.getContext("2d").drawImage(sourceImage, 0, 0, width, height); 

     // Convert the canvas to a data URL in PNG format 
     callback(canvas.toDataURL()); 
    } 

    sourceImage.src = url; 
} 

Answer 2

chodzi o problemy z wydajnością, może tag płótna może pomóc? https://developer.mozilla.org/en/Canvas_tutorial/Using_images#drawImage_example_2

Jeśli załadujesz obraz, wyświetlisz go za pomocą funkcji drawImage, a następnie spróbuj go odrzucić, możesz odnieść sukces. Ale nie jestem pewien, jak serializacji płótno jako obraz, aby zapisać plik o zmienionym rozmiarze ...