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