Come ridimensionare un'immagine (nel formato URI di dati) in JavaScript (ridimensionamento reale, non utilizzare lo stile)

Question

Stiamo acquisendo una scheda visibile in un browser Chrome (utilizzando l'API delle estensioni chrome.tabs.captureVisibleTab) e ricevendo un'istantanea nello schema URI di dati (stringa codificata Base64).

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

Attualmente lo stiamo progettando tramite CSS, ma dobbiamo pagare delle penalità per le prestazioni poiché le immagini sono per lo più 100 volte più grandi del necessario. Ulteriore preoccupazione è anche il carico sul localStorage che usiamo per salvare le nostre istantanee.

Qualcuno sa di un modo per elaborare questo file URI di dati formattato e ridurne le dimensioni ridimensionandole?

Riferimenti:

• dati schema URI sul http://en.wikipedia.org/wiki/Data_URI_scheme
• Chrome Extensions API su http://code.google.com/chrome/extensions/tabs.html
• "chiuso Recentemente Tabs" Chrome Extension su http://code.google.com/p/recently-closed-tabs

Answer 1

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

La richiamata verrà passata all'immagine risultante come URL di dati. Si noti che l'immagine risultante sarà un PNG, poiché l'implementazione 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, la si visualizza con drawImage e quindi si tenta di scartarla, è possibile riuscire. Ma non sono sicuro di come serializzare una tela come immagine per salvare il file ridimensionato ...