HTML based on a screenshot of Canvas implementation

I remember seeing a sharing on everyone before, explaining JS -based screenshot solutions. I do n’t remember it in detail. I just remember that it seems that it seems to use Canvas? So this time I plan to write a idea of ​​sharing with everyone. This is just a very simple little demo. If you have bugs, please mention it. According to usual PO code address.

Renderings

Overall thinking

• Set the start/end shortcut key
• After the start, DOM is drawn to Canvas to cover the original DOM interface
• Add a Canvas simulation mouse screenshot area
• Add a canvas to draw the browser interface corresponding to the mouse screenshot area (intercepted from the first Canvas)
• Save the intercepted image

Because the shortcut keys may cause conflicts, the shortcut keys can not limit the number of shortcut keys, so the form of an array in the first parameter is passed.

 Function ScreenShot (QuickstartKey, EndKey) {// Compatibility Consider not to use ... Extended string var keylength = quickstartKey.length var wasKeytrigger = {} Var CantShot = FALSE ... Q UICKSTARTKEY. Foreach (function (item) {// Traversing parameter arrays isKeytrigger [item] = false // All keys in the default array are not triggered}) $ ('html'). On ('keyup', function (e) {var keyCode = e.which if (keyCode == = Endkey) {...} else if (! CantstartShot) {iskeytrigger [keyCode] = true var notTRigger = object.keys (iskeytrigger). Filter urn iskeytrigger [item] === false // View Is there any shortcut key to be triggered}) if (nottrigger.Length === 0) {// There is no shortcut key that needs to be triggered.

If you adopt a native method, you can refer to the introduction of DOM under the MDN. The most tricky thing is that you need to create an element involved in a SVG image containing XML. How to calculate the DOM displayed in the current browser and extract it is actually the most tedious. In fact, the author does not have a good idea to manually implement one =. =, So I chose this HTML2CANVAS library to complete this. The general call method is as follows:

 Function Beginshot (CANTSTARTSHOT) {if (CANTSTARTSHOT) {html2canvas (document.body, {OnRendered: Function (Canvas) {// Get the Canvas image with the same interface})}}}}

The realization of this place was originally intended to use the native Canvasapi, but it involved a problem in it. After pressing the mouse to start dragging, Canvas must be drawn in real time. The current screenshot box is drawn, but the previous screenshot box is deleted when it triggered mousemove. To simulate the real -time drawing process. The helpless author did not find the method of using the Canvas native API. If so, I will tell me how to mark the drawing. Here the author uses a jq -based Canvas library called JCANVAS. It gives the concept of the layer, that is, you can only draw a picture on a layer, and at the same time, you can mark the layer name. This meets the author's needs, and the realization is as follows:

 $ ('#' +canvasid) .mousedown (function (e) {$ (# +Canvasid) .RemoveLayer (layerName) // Delete the previous layer layername += 1 startx = that._calCulatingXy (e) .x // Calculate the mouse position starty = that._calculatingxy (e) .y isshot = true $ (#+canvasid) .addlayer ({type: 'rectangle', // rectangular ... name: layname, the layer name x: Startx , Y: Starty, Width: 1, Height: 1})}). MouseMove (Function (E) {if (isshot) {$ (#+Canvasid) .RemoveLayer (lay Movex = that._calCulatingX Y (e). x var movey = that._calculatingxy (e) .y var width = movex -startx var height = movey -starty $ (#+canvasid) .adDlayer ({Type: 'Rectangle', ... Name: Lay: Lay ERNAME, FROMCENTER: FALSE , X: StartX, Y: Starty, Width: Width, Height: Height}) $ (#+Canvasid) .drayers (); // Draw}})

 var canvasresult = document.GetelementByid ('CanvasResult') VAR CTX = CanvasResult.getContext (2D); CTX.DrawImage (CopyDomcanvas, Movex -STARTX> 0? TARTX: Movex, Movey -Starty> 0? Starty: Movey, Width, Height , 0, 0, width, height) var dataurl = canvasResult.todataurl (image/png);

Among them, the image was intercepted by DrawImage, and then the image was converted into Base64 encoding using the TODATAURL method

 Function Download (EL, FILENAME, HREF) {El.attr ({'Download': FILENAME, 'HREF': Href})} ... Downloadfile ($ ('. OK'), 'Screenshot' + MATH .random (.random ( ) .tring (). split ('.') [1] || math.random () + '.png', dataurl) // Pass the key object object, image preservation random name, base64 encoding image image

Among them, the DOWNLOAD attribute of the A tag can be downloaded directly when the user clicks.

 <script src = https: //cdn.bootcss.com/jquery/3.2.1/jqury.min.js> </script> <script src = https: //cdn.bootcss.com/jcanvas/16.7.3/ jcanvas.min.js> </script> <script src = https: //cdn.bootcss.com/html2canvas/0.5.0-html2canvas.min.js> </script>

 ScreenShot ([16, 65], 27) // Start the shortcut key set to shift+a; the exit key is ESC

The most disgusting place in the article (DOM writes with Canvas and Canvas setting layers) uses two libraries for implementation, respectively. The follow -up authors will also pay attention to how to use the native API to achieve these operations, although I personally think that it is still a bit. Essence

The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.