CODEWITHSUNDEEP
javascriptjquerygoogle-chromegoogle-chrome-extensionscreenshot
llams48
llams48

Reputation: 407

Partial screenshot with chrome

I'm trying to build my first ever Chrome extension, and want it to take screenshots. I know Chrome has a captureVisibleTab API to get the visible area of the screen. I have gotten that to work. But, I want to be able to take partial screenshots (eg. user clicks and drags the mouse on the screen to select a certain rectangular area of content). How would this work on Chrome? I don't see an API for this, but I know Awesome Screenshot and some other screenshot extensions do this.

I am using .mouseup and .mousedown to detect mouse clicks and event.pageX and event.pageY to get coordinates on the page. But, how do I get a rectangle to show up on the page? I have to convert the webpage to a canvas, but I'm not quite sure how to do that. Also, once I get the selected area, how do I convert that to an image and get the dataURI like the return value that the chrome API gives?

Should I be doing this some other way instead? Thanks for your help!

Upvotes: 3

Views: 3579

Answers (1)

andrewgu
andrewgu

Reputation: 1642

I would suggest first generating the overall screenshot (example for others), then cropping it later based off of the user data you collected. You can crop the image using JavaScript and the HTML5 <canvas> element. (example code)

As for converting the webpage to a <canvas> element, take an initial screenshot, display it on the canvas using the drawImage() function.

Then, you could use either the method shown in the "example code", or a library such as cropper to draw the rectangle on screen for the UI.

The example code can also show you how to turn the selected area into a dataURI.

Upvotes: 1

Related Questions