Question

134

How to scale an image (in data URI format) in JavaScript (real scaling, not using styling)

rated 0 times [ 139] [ 5] / answers: 1 / hits: 17618 / 15 Years ago, thu, march 25, 2010, 12:00:00

We are capturing a visible tab in a Chrome browser (by using the extensions API chrome.tabs.captureVisibleTab) and receiving a snapshot in the data URI scheme (Base64 encoded string).

Is there a JavaScript library that can be used to scale down an image to a certain size?

Currently we are styling it via CSS, but have to pay performance penalties as pictures are mostly 100 times bigger than required. Additional concern is also the load on the localStorage we use to save our snapshots.

Does anyone know of a way to process this data URI scheme formatted pictures and reduce their size by scaling them down?

References:

Data URI scheme on http://en.wikipedia.org/wiki/Data_URI_scheme

Chrome Extensions API on http://code.google.com/chrome/extensions/tabs.html

The Recently Closed Tabs Chrome Extension on http://code.google.com/p/recently-closed-tabs

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kinsleyashlynnh

Add To Favorites

Follow

Total Points: 64

Total Questions: 119

Total Answers: 98

Location: Burundi

Member since Sat, Aug 21, 2021

3 Years ago

answered 15 Years ago tristab · Accepted Answer

Here's a function that should do what you need. You give it the URL of an image (e.g. the result from chrome.tabs.captureVisibleTab, but it could be any URL), the desired size, and a callback. It executes asynchronously because there is no guarantee that the image will be loaded immediately when you set the src property. With a data URL it probably will since it doesn't need to download anything, but I haven't tried it.

The callback will be passed the resulting image as a data URL. Note that the resulting image will be a PNG, since Chrome's implementation of toDataURL doesn't support 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;

}