Skip to content

Instantly share code, notes, and snippets.

@erkie
Created May 19, 2012 09:43
Show Gist options
  • Save erkie/2730276 to your computer and use it in GitHub Desktop.
Save erkie/2730276 to your computer and use it in GitHub Desktop.
Save parts of screen using Chrome extension
<script>
var Constants = {
saveURL: 'http://random/birthday/saveimage.php',
w: 500,
h: 500,
x: 200,
y: 200
};
function cropData(str, coords, callback) {
var img = new Image();
img.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = coords.w;
canvas.height = coords.h;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, coords.x, coords.y, coords.w, coords.h, 0, 0, coords.w, coords.h);
var fd = new FormData();
fd.append('image', dataURItoBlob(canvas.toDataURL()));
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
callback();
}
}
xhr.open('POST', Constants.saveURL);
xhr.send(fd);
};
img.src = str;
}
function capture(coords) {
chrome.tabs.captureVisibleTab(null, {format: "png"}, function(data) {
cropData(data, coords, function() {
console.log("Done");
});
});
}
chrome.browserAction.onClicked.addListener(function() {
sendMessage({type: 'start-screenshots'});
});
chrome.extension.onRequest.addListener(gotMessage);
function gotMessage(request, sender, sendResponse) {
if (request.type == "coords")
capture(request.coords);
sendResponse({}); // snub them.
}
function sendMessage(msg) {
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, msg, function(response) {});
});
};
// --
// Library things
// --
function dataURItoBlob(dataURI) {
// convert base64 to raw binary data held in a string
// doesn't handle URLEncoded DataURIs
var byteString = atob(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
// write the ArrayBuffer to a blob, and you're done
var bb;
if ( typeof BlobBuilder != 'undefined' )
bb = new BlobBuilder();
else
bb = new WebKitBlobBuilder();
bb.append(ab);
return bb.getBlob(mimeString);
}
</script>
//
// messages
//
chrome.extension.onRequest.addListener(gotMessage);
function gotMessage(request, sender, sendResponse) {
if (request.type == "start-screenshots")
startScreenshot();
sendResponse({});
}
function startScreenshot() {
document.addEventListener('mousedown', mouseDown, false);
document.addEventListener('keydown', keyDown, false);
}
function endScreenshot(coords) {
document.removeEventListener('mousedown', mouseDown, false);
sendMessage({type: 'coords', coords: coords});
}
function sendMessage(msg) {
chrome.extension.sendRequest(msg, function(response) {});
};
//
// end messages
//
var ghostElement, startPos, gCoords;
function keyDown(e) {
var keyCode = e.keyCode;
// Hit: n
if ( keyCode == '78' && gCoords ) {
e.preventDefault();
e.stopPropagation();
endScreenshot(gCoords);
return false;
}
}
function mouseDown(e) {
e.preventDefault();
startPos = {x: e.pageX, y: e.pageY};
ghostElement = document.createElement('div');
ghostElement.style.background = 'blue';
ghostElement.style.opacity = '0.1';
ghostElement.style.position = 'absolute';
ghostElement.style.left = e.pageX + 'px';
ghostElement.style.top = e.pageY + 'px';
ghostElement.style.width = "0px";
ghostElement.style.height = "0px";
ghostElement.style.zIndex = "1000000";
document.body.appendChild(ghostElement);
document.addEventListener('mousemove', mouseMove, false);
document.addEventListener('mouseup', mouseUp, false);
return false;
}
function mouseMove(e) {
e.preventDefault();
var nowPos = {x: e.pageX, y: e.pageY};
var diff = {x: nowPos.x - startPos.x, y: nowPos.y - startPos.y};
ghostElement.style.width = diff.x + 'px';
ghostElement.style.height = diff.y + 'px';
return false;
}
function mouseUp(e) {
e.preventDefault();
var nowPos = {x: e.pageX, y: e.pageY};
var diff = {x: nowPos.x - startPos.x, y: nowPos.y - startPos.y};
document.removeEventListener('mousemove', mouseMove, false);
document.removeEventListener('mouseup', mouseUp, false);
ghostElement.parentNode.removeChild(ghostElement);
setTimeout(function() {
var coords = {
w: diff.x,
h: diff.y,
x: startPos.x,
y: startPos.y
};
gCoords = coords;
endScreenshot(coords);
}, 50);
return false;
}
{
"name": "Super Happy Fun Tests",
"version": "1.0.0",
"description": "Have a super happy fun time.",
"icons": {
"128": "Icon.png"
},
"browser_action": {
"default_title": "",
"default_icon": "Icon.png"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content.js"]
}
],
"background_page": "background.html",
"options_page": "options.html",
"permissions": [
"tabs",
"http://*/*",
"https://*/*",
"chrome://*",
"chrome://favicon/",
"contextMenus"
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment