jeudi 26 mars 2015

Screenshot chrome.tabs.captureVisibleTab() reducing filesize

I'm making a browser extension that takes a screenshot of certain pages and saves them as JPEG.


Here is my code to take the screenshot:



var screenshot = {
content : document.createElement("canvas"),
data : '',

init : function() {
this.initEvents();
},

saveScreenshot : function() {
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;
},

initEvents : function() {
// send an alert message to webpage

chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
console.log("Got a message!", message);

if(message.action === "screenshot"){

shotname = message.name;

chrome.tabs.captureVisibleTab(null, {
format : "jpeg",
quality : 10
}, function(data) {
screenshot.data = data;
screenshot.saveScreenshot();
});
}
});
}
};


This works, although my issue is that regardless of what quality I set the JPEG to save at, it results in a ~400kb image. (the image will always be of dimensions 1280px x 720px). Changing quality from 100 to 60 to 40 to 10 made very little difference in filesize.


Compare this to "Save for Web" in Photoshop on the same size image, I get a 30kb JPEG and it has no noticeable lack in quality.


Is there something I'm missing here, besides the fact that Photoshop likely has a better compression algorithm?


How can I get nice quality images at a small filesize using Chrome's captureVisibleTab?


If it's not possible are there any workarounds I can use to automate this within a Chrome extension?


Aucun commentaire:

Enregistrer un commentaire