使用HTML Canvas + Javascript优化和图像处理+减少文件大小

Question

I am making a Chrome extension which automatically takes a screenshot of the visible tab and download a JPG to your filesystem. That all works fine but the images are very large (~400kb for a 1280x720px image) and I want to optimize them (ideally around 40kb).

Here is the code I'm using:

var image = new Image();
    image.onload = function() {
        var canvas = screenshot.content;
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0);

        // save the image
        var link = document.createElement('a');
        link.download = shotname + ".jpg";
        link.href = screenshot.content.toDataURL();
        link.click();
        screenshot.data = '';
    };
    image.src = screenshot.data; 

How can I optimize the image to reduce quality and filesize? I'd like to play around with different quality options so I can see what an acceptable use-case is.

Answer 1

You can use JPEG and a quality setting like this:

link.href = screenshot.content.toDataURL("image/jpeg", 0.3);

The quality is in the range [0, 1]. If you don't specify any image type, the default will be PNG, which is relative large in many cases.

Just be aware of that you will loose the alpha-channel when using JPEG.

Additionally you can blur the image slightly (see f.ex. my realtime-blur or stack-box blur ). Blurring filters some of the high frequencies that are hard to compress.

Answer 2

You could encode the url in jpg format.

The second parameter specifies the quality of the resulting jpg.

link.href = screenshot.content.toDataURL('image/jpeg', 0.6);