Come per ridimensionare l'immagine (nei dati formato URI) in JavaScript (reale ridimensionamento, non usando styling)

Question

Stiamo catturando una scheda visibile in un browser Chrome (tramite le estensioni API chrome.tabs.captureVisibleTab) e di percepire una fotografia nello schema URI di dati (stringa codifica Base64).

C'è una libreria JavaScript che può essere utilizzato per ridimensionare un'immagine a una certa dimensione?

Al momento stiamo styling tramite CSS, ma devono pagare penalità di prestazioni come le immagini sono per lo più di 100 volte più grande di quanto richiesto. Ulteriori preoccupazione è anche il carico sul localStorage che usiamo per salvare le nostre istantanee.

Qualcuno sa di un modo per elaborare le immagini questi dati schema URI formattato e ridurre le relative dimensioni di loro ridimensionamento?

References:

• I dati URI schema su http://en.wikipedia.org/wiki/Data_URI_scheme
• Estensioni Chrome API su http://code.google.com/chrome/extensions/ tabs.html
• Il "Schede chiuse di recente" Estensione Chrome su http://code.google.com / p / recentemente chiusi-tabs

Answer 1

Ecco una funzione che dovrebbe fare quello che ti serve. Si dà l'URL di un'immagine (ad esempio, il risultato da chrome.tabs.captureVisibleTab, ma potrebbe essere qualsiasi URL), la dimensione desiderata, e un callback. Esegue in modo asincrono perché non v'è alcuna garanzia che l'immagine verrà caricata immediatamente quando si imposta la proprietà src. Con un URL di dati probabilmente sarà dal momento che non ha bisogno di scaricare nulla, ma non l'ho provato.

Il callback verrà passato l'immagine risultante come un URL di dati. Si noti che l'immagine risultante sarà un PNG, poiché l'attuazione di Chrome di toDataURL non supporta image / 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

Per quanto riguarda i problemi di prestazioni, forse il tag canvas potrebbe aiutare? https://developer.mozilla.org/en/Canvas_tutorial/Using_images#drawImage_example_2

Se si carica l'immagine, visualizzarla con drawImage e quindi provare a disfarsene, si può avere successo. Ma io non sono sicuro di come serializzare una tela come immagine per salvare il file ridimensionato ...