Comment redimensionner l'image (dans le format des données URI) en JavaScript (mise à l'échelle réelle, ne pas utiliser le style)

Question

Nous saisissons un onglet visible dans un navigateur Chrome (en utilisant l'API des extensions chrome.tabs.captureVisibleTab) et la réception d'un instantané dans le schéma d'URI de données (chaîne codée base64).

Y at-il une bibliothèque JavaScript qui peut être utilisé pour réduire une image à une certaine taille?

Actuellement, nous style via CSS, mais doivent payer des pénalités de performance images sont pour la plupart 100 fois plus grande que nécessaire. préoccupation supplémentaire est également la charge sur le localStorage que nous utilisons pour sauver nos clichés.

Quelqu'un sait-il d'un moyen de traiter ce schéma URI de données images formatées et de réduire leur taille en les bas d'échelle?

Références:

• schéma d'URI de données sur http://en.wikipedia.org/wiki/Data_URI_scheme
• API des extensions Chrome sur http://code.google.com/chrome/extensions/ tabs.html
• Les "onglets récemment fermés" Extension Chrome sur http://code.google.com / p / récemment fermé onglets

Answer 1

Voici une fonction qui devrait faire ce que vous avez besoin. Vous donnez l'URL d'une image (par exemple le résultat de chrome.tabs.captureVisibleTab, mais il pourrait être une URL), la taille désirée, et un rappel. Il exécute de façon asynchrone parce qu'il n'y a aucune garantie que l'image sera chargée immédiatement lorsque vous définissez la propriété src. Avec une URL de données, il sera probablement car il n'a pas besoin de télécharger quoi que ce soit, mais je l'ai pas essayé.

Le rappel sera transmis l'image résultante comme une URL de données. Notez que l'image résultante sera un PNG, depuis la mise en œuvre de Chrome de toDataURL ne supporte pas l'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

En ce qui concerne les problèmes de performance, peut-être l'étiquette de toile pourrait aider? https://developer.mozilla.org/en/Canvas_tutorial/Using_images#drawImage_example_2

Si vous chargez l'image, afficher avec drawImage et puis essayer de le jeter, vous pouvez réussir. Mais je ne suis pas sûr comment sérialiser une toile comme une image pour enregistrer le fichier redimensionné ...