Wie ein Bild skalieren (in Daten URI-Format) in JavaScript (real Skalierung, nicht Styling verwenden)

Question

Wir sind ein sichtbares Register in einem Chrome-Browser der Erfassung (durch die Erweiterungen API chrome.tabs.captureVisibleTab verwenden) und einen Snapshot in den Daten URI-Schema Empfangen (Base64-String codierte).

Gibt es eine JavaScript-Bibliothek, die nach unten einem Bild zu einer bestimmten Größe zu Skala verwendet werden können?

Zur Zeit sind wir es über CSS Styling, sondern Pay Leistungseinbußen haben als Bilder sind meist 100-mal größer als erforderlich. Weitere Anliegen ist auch die Last auf die localstorage verwenden wir unsere Schnappschüsse zu speichern.

Kennt jemand eine Möglichkeit, diese Daten URI-Schema formatiert Bilder zu verarbeiten und ihre Größe zu reduzieren, indem sie Verkleinerung?

Referenzen:

• Daten URI-Schema auf http://en.wikipedia.org/wiki/Data_URI_scheme
• Chrome Extensions API auf http://code.google.com/chrome/extensions/ tabs.html
• Die "Kürzlich geschlossene Tabs" Chrome Extension auf http://code.google.com / p / kürzlich geschlossen Tabs

Answer 1

Hier ist eine Funktion, die tun sollten, was Sie brauchen. Sie geben ihm die URL eines Bildes (zum Beispiel das Ergebnis von chrome.tabs.captureVisibleTab, aber es könnte eine URL sein), um die gewünschte Größe und einen Rückruf. Es wird asynchron ausgeführt, weil es keine Garantie dafür gibt, dass das Bild sofort geladen wird, wenn Sie die src Eigenschaft festgelegt. Mit einer Daten URL wird es wahrscheinlich, da es braucht nicht zu Download nichts, aber ich habe es nicht versucht.

Der Rückruf wird das resultierende Bild als Daten URL übergeben werden. Beachten Sie, dass das resultierende Bild wird ein PNG, da Chrome-Implementierung von toDataURL nicht image / jpeg nicht unterstützt.

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

Wie für die Performance-Probleme, vielleicht die Leinwand-Tag könnte helfen? https://developer.mozilla.org/en/Canvas_tutorial/Using_images#drawImage_example_2

Wenn Sie das Bild laden, zeigen Sie es mit drawImage und dann versuchen, es zu verwerfen, können Sie Erfolg haben. Aber ich bin nicht sicher, wie eine Leinwand als Bild serialisiert die Größe geänderte Datei ...

speichern