So skalieren Sie ein Bild (im Daten-URI-Format) in JavaScript (echte Skalierung, ohne Verwendung von Stilen)

Question

Wir erfassen eine sichtbare Registerkarte in einem Chrome-Browser (mithilfe der Erweiterungs-API chrome.tabs.captureVisibleTab) und erhalten einen Snapshot im Daten-URI-Schema (Base64-codierte Zeichenfolge).

Gibt es eine JavaScript-Bibliothek, mit der ein Bild auf eine bestimmte Größe verkleinert werden kann?

Momentan gestalten wir es per CSS, müssen aber Leistungseinbußen zahlen, da die Bilder meist 100 mal größer sind als erforderlich. Zusätzliches Problem ist auch die Belastung der localStorage, die wir verwenden, um unsere Snapshots zu speichern.

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

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/recently-closed-tabs

Answer 1

Hier ist eine Funktion, die tun sollte, was Sie brauchen. Sie geben ihm die URL eines Bildes (z. B. das Ergebnis von , aber es könnte eine beliebige URL sein), die gewünschte Größe und einen Rückruf. Es wird asynchron ausgeführt, da keine Garantie dafür besteht, dass das Image sofort geladen wird, wenn Sie die Eigenschaft src festlegen. Mit einer Daten-URL wird es wahrscheinlich, da es nichts herunterladen muss, aber ich habe es nicht versucht.

Der Callback wird das resultierende Bild als Daten-URL übergeben. Beachten Sie, dass das resultierende Bild ein PNG ist, da die Implementierung von toDataURL von Chrome 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

Was die Performance-Probleme, Vielleicht könnte das Canvas-Tag helfen? https://developer.mozilla.org/en/Canvas_tutorial/Using_images#drawImage_example_2

Wenn Sie das Bild laden, es mit drawImage anzeigen und dann versuchen, es zu verwerfen, können Sie erfolgreich sein. Aber ich bin mir nicht sicher, wie man eine Leinwand als Bild serialisiert, um die geänderte Datei zu speichern ...