Como dimensionar uma imagem (no formato URI de dados) em JavaScript (escala real, não usando estilo)

Question

Estamos capturando uma guia visível em um navegador Chrome (usando a API de extensões Chrome.tabs.capturevisibletab) e recebendo um instantâneo no esquema de URI de dados (string base64 codificada).

Existe uma biblioteca JavaScript que pode ser usada para reduzir uma imagem para um determinado tamanho?

Atualmente, estamos denominando -o via CSS, mas precisamos pagar multas de desempenho, pois as imagens são 100 vezes maiores do que o necessário. Preocupação adicional também é a carga no localStorage que usamos para salvar nossos instantâneos.

Alguém conhece uma maneira de processar esses dados do esquema de URI formatados e reduzir seu tamanho, escalando -os?

Referências:

• Esquema de URI de dados em http://en.wikipedia.org/wiki/data_uri_scheme
• API de extensões de cromo em http://code.google.com/chrome/extensions/tabs.html
• A extensão do Chrome "recém -fechado" http://code.google.com/p/recently-losed-tabs

Answer 1

Aqui está uma função que deve fazer o que você precisa. Você dá o URL de uma imagem (por exemplo, o resultado de chrome.tabs.captureVisibleTab, mas pode ser qualquer URL), o tamanho desejado e um retorno de chamada. Ele executa de forma assíncrona porque não há garantia de que a imagem seja carregada imediatamente quando você definir o src propriedade. Com um URL de dados, provavelmente será, pois não precisa baixar nada, mas eu não tentei.

O retorno de chamada será passado a imagem resultante como URL de dados. Observe que a imagem resultante será um PNG, já que a implementação do Chrome de toDataURL Não suporta imagem/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

Quanto aos problemas de desempenho, talvez a tag de tela possa ajudar? https://developer.mozilla.org/en/canvas_tutorial/using_images#drawimage_example_2

Se você carregar a imagem, exibi -la com drawimage e tente descartá -la, poderá ter sucesso. Mas não tenho certeza de como serializar uma tela como uma imagem para salvar o arquivo redimensionado ...