Chrome Web page truncated full screen algorithm and implementation

Make a simple bulk download plugin called "Dig", just like the name of the plugin, collect all the pictures in the webpage, filter the unwanted images according to the filter, and finally download the selected pictures.

Simply the Web page also to cut together, screenshots divided into two kinds:

1. Visible Content screenshot

2. Full page screenshot (both visible and invisible)

Viewable content screenshot:

Implementation principle: Directly through Chrome's own screenshot method (Chrome.tabs.captureVisibleTab), callback function return picture type and data information

function (screenshoturl) {  //  save Screenshoturl, image information, using PNG format        by default });

Full Page screenshot

Implementation principle: Because Chrome itself does not provide a similar cut-screen interface, or do not know, so find a lot of methods, the end use of the method is to automatically scroll the Web page, Then a screen-by-screen truncation (or Chrome.tabs.captureVisibleTab), and save these small screenshot data to the cache, through the canvas to merge. The steps are as follows:

(1) According to the current page scrollwidth and ScrollHeight, as well as the visual area of the ClientWidth and clientheight to calculate the final need to screen a few times, the entire Web page is split into a number of screen block data. The screenshot code is as follows:

varScrollWidth =Document.body.scrollWidth;varScrollHeight =Document.body.scrollHeight;varVisiblewidth =Document.documentElement.clientWidth;varVisibleheight =Document.documentElement.clientHeight;//calculates how many rows can be split across a page based on the viewable areavarcolumns = Math.ceil (scrollwidth*1.0/visiblewidth); varrows = Math.ceil (scrollheight*1.0/visibleheight); varCanvas_data ={size: {full_width:scrollwidth, Full_height:scrollheight, Page_width:visiblewidth, page_height:visibleheight}, Table:{rows:rows, Colums:columns}, Screenshots: []};//the last row of the Loop scrolling page screenshot for(varr=0; r<rows; r++) {Document.body.scrollHeight= r*Visibleheight;  for(varc=0; c<columns; C++) {Document.body.scrollLeft= c*Visiblewidth; //screenshot and saveChrome.tabs.captureVisibleTab ({format: ' PNG '},function(Screenshoturl) {Canvas_data.screenshots.push ({row:r, column:c, data_url:screenshoturl});  }); } }

(2) Merge images with canvas.

After the screenshot is given a screenshot array, each element of the array has a line number and a column number, which represents the image is small in the first few rows of the page.

The ScrollWidth and scrollheight of the current Web page create a canvas that draws a picture to the canvas, based on the element information as well as the clientwidth and clientheight of the viewable area.

functionmerge_images (Canvas_data, image_element) {//Initialize Canvas  varCanvas = document.createelement ("Canvas"); Canvas.width=Canvas.size.full_width; Canvas.height=Canvas.size.full_height; Draw_image (Canvas, Canvas_data,0, image_element);}functiondraw_image (canvas, Canvas_data, N, image_element) {varScreenshots =canvas_data.screenshots; if(N >=screenshots.length) {//Draw completedIMAGE_ELEMENT.SRC = Canvas.todataurl (' image/png ')); } Else{Console.log (' Draw ' +n+ ' image '); varDraw_context = Canvas.getcontext ("2d"); vars =Screenshots[n]; varrow =S.row; varColumn =S.column; varX=0, y=0; if(Row < Canvas_data.table.rows-1) {y= row*Canvas_data.size.page_height; } Else{//Last Rowy = canvas.height-Canvas_data.size.page_height; }    if(Column < Canvas_data.table.columns-1) {x= column*Canvas_data.size.page_width; } Else{//Last columnx = Canvas.width-Canvas_data.size.page_width; } console.log (' x: ' + x + ', y= ' +y); varMemory_image =NewImage (); Memory_image.onload=  (function(CTX, M, L, t) {return function() {Console.log (' Image load OK ');         Ctx.drawimage (m,l,t); Draw_image (Canvas, Canvas_data,++N, image_element);    }}) (Draw_context, Memory_image, x, y); MEMORY_IMAGE.SRC=S.data_url; }}

When canvas finishes drawing, the image is displayed with an IMG element, with the following code:

IMAGE_ELEMENT.SRC = Canvas.todataurl (' image/png ');

It's OK, it's been a few days,

Plugin Source Address: http://git.oschina.net/iknown/wayixia-chrome-extension

Chrome Web page truncated full screen algorithm and implementation