Creating a drag select screen capture for Google Chrome

Question

I have searched everywhere for this. I've even tried looking at other extensions to see how it's done. What is the simplest way to create an addition to my extension that enables me to drag;

Click Extension Icon -> Drag/select content area -> capture as screenshot/png for me to pass to an API

I've got my basic plugin down and it captures images and screenshots, but I want to create this feature, where I may drag and select a content area. I've never had to create something like this before and I've no idea how to do it in Javascript.

Edit: I don't want this done for me, I just need an idea of how it's done. I've never heard of Javascript doing this but I know the functionality exists because other extensions do this.

Edit 2: The only thing I've found that comes close to what I want is "html2canvas", but I'm not sure how I'd turn that into a drag/select element.

Cheers!

Answer 1

If you already have the part that captures the screenshot all you need is to crop it to the correct size right?

That size is just a set of start and end coordinates for dragging. We can make a simple script using jQuery and an element to keep track of this and give feedback to the user. The basic principles here are:

1. listen to the JS events (mousedown, mousemove, mouseup) so you know what your user is doing
2. Add an absolutely positioned <div> to the screen to be your selection.

Here is a proof of concept: http://jsfiddle.net/x2xmjrya/

And here is the important JS:

// Things we need to keep track of
var start = {};
var end = {};
var isSelecting = false;

$(window)
    // Listen for selection
    .on('mousedown', function($event) {
        // Update our state
        isSelecting = true;
        $('#selection').removeClass('complete');
        start.x = $event.pageX;
        start.y = $event.pageY;

        // Add selection to screen
        $('#selection').css({
            left: start.x,
            top: start.y
        });
    })
    // Listen for movement
    .on('mousemove', function($event) {
        // Ignore if we're not selecing
        if (!isSelecting) { return; }

        // Update our state
        end.x = $event.pageX;
        end.y = $event.pageY;

        // Move & resize selection to reflect mouse position
        $('#selection').css({
            left: start.x < end.x ? start.x : end.x,
            top: start.y < end.y ? start.y : end.y,
            width: Math.abs(start.x - end.x),
            height: Math.abs(start.y - end.y)
        });
    })
    // listen for end
    .on('mouseup', function($event) {
        // Update our state
        isSelecting = false;
        $('#selection').addClass('complete');
    });

You would use the mouseup callback to also kick off the screencap and crop