A useful web Snipping Tool (ii)

GitHub address: Https://github.com/kejiacheng/kscreenshot "GitHub"

Code Cloud Address: Https://gitee.com/kejiacheng/kscreenshot

! [] (Https://oscimg.oschina.net/oscnet/b245ca8d8497f28731f3cdb0b4b08890e86.jpg)

Kscreenshot
==============

Introduced
The functionality of Web tools is implemented based on canvas technology. Its functions include, download, copy, and draw through the toolbar pair during the process.

Use
Specific use of the method, please poke [code Cloud] (https://gitee.com/kejiacheng/kscreenshot/blob/master/README.md "Code Cloud") [GitHub] (https://github.com/ Kejiacheng/kscreenshot "GitHub")

Implementation method
Pick up the article

     This. Startdrawdown = (e) = ={Const that= ThisDocument.addeventlistener (' MouseUp ', That.canceldrawingstatus) Document.addeventlistener (' ContextMenu ', That.preventcontextmenu)//returns immediately when not the left mouse button            if(E.button!== 0) {                return            }                if(That.drawingstatus!==NULL) {                return} that.drawingstatus= 1That.startx=E.clientx That.starty=E.clienty//Remove and addRemove (document.getElementById (' Kssscreenshotwrapper ')) Let Kssscreenshotwrapper= document.createelement (' div ') Kssscreenshotwrapper.id= ' Kssscreenshotwrapper 'css (kssscreenshotwrapper, {position:' Fixed ', background:' Transparent ',                ' Box-shadow ': ' 0 0 0 9999px rgba (0, 0, 0, 0.3) ',                ' Z-index ': 10001}) That.kssscreenshotwrapper=Kssscreenshotwrapper let Kssrectangle= document.createelement (' div ') CSS (Kssrectangle, {position:' Absolute ', Top:0, left:0, Width:' 100% ', Height:' 100% '}) Kssscreenshotwrapper.appendchild (Kssrectangle) document.body.appendChild (kssscree Nshotwrapper) Document.addeventlistener (' MouseMove ', that.drawing) Document.addeventlistener (' MouseUp ', That.enddraw)}

The Startdrawdown function is the mouse down event that was added to the document in the previous start. The function first adds two events, and the first event cancels the state when the right mouse button is pressed, and the second event is the default event that blocks the right mouse button. The following that.startx = E.clientx,that.starty = E.clienty These two lines of code record the current mouse position, which is two very important properties.

The

then creates a DOM, which is the wrapping layer of the box, and adds a ' Box-shadow ' to the DOM: ' 0 0 0 9999px rgba (0, 0, 0, 0.3) ' styles, using shadows to cleverly simulate a mask. Next we create a DOM, which is the box in which the content of the scope is our post. Finally, we added two events to the document.

 this . Drawing = (e) => {const that  = this   that.drawingstatus  = 2 Let client  = Backrightclient (e) Let ClientX  = Client[0 = Client[1" CSS (That.kssscreenshotwrapper, {height:Math.abs (ClientY -That.sta Rty) + ' px ' -that.startx) + ' px ' , Left:Math.min (That.startx, ClientX)  + ' px ' })}  

The drawing function adds style to the box wrapping layer in real time compared to the current mouse position and the position of the mouse at the beginning. The Backrightclient function prevents the box from wrapping the layer outside the visible area.

this. EndDraw = (e) + =    {if (e.button!== 0)        {return    }      This = 3 ...    }     

The Enddraw function is divided into 3 sections.

    if(That.startx = = = E.clientx && That.starty = = =e.clienty) {Let clientheight=document.documentElement.clientHeight let ClientWidth=document.documentElement.clientWidth That.startx= 2That.starty= 2That.height= ClientHeight-4That.width= ClientWidth-4css (that.kssscreenshotwrapper, {height:that.height+ ' px ', Width:that.width+ ' px ', Top:that.startY+ ' px ', Left:that.startX+ ' px '                })            } Else{Let client=backrightclient (E) Let ClientX= Client[0] Let ClientY= Client[1] That.width= Math.Abs (ClientX-that.startx) That.height= Math.Abs (ClientY-that.starty) That.startx=math.min (That.startx, ClientX) That.starty=math.min (That.starty, ClientY)}

This is the first part of the Enddraw function. This part is used to determine whether the user has moved the mouse, if not moved, the width of the box wrap layer is set to the width of the viewable area, or the same as the drawing function.

Let canvas = document.createelement (' Canvas ') CSS (canvas, {height:' 100% ', Width:' 100% ', Top:0, left:0, cursor:' Move ', Position:' Absolute '}) Canvas.id= ' Rectanglecanvas 'that.kssScreenShotWrapper.appendChild (canvas) That.rectanglecanvas=Canvas Canvas.addeventlistener (' MouseDown ',function(event) {if(That.isedit | | event.button = = 2) {                    return} clearmiddleimage (that) let StartX=Event.clientx Let Starty=Event.clienty Document.addeventlistener (' MouseMove ', Canvasmoveevent) Document.addeventlistener (' MouseUp ', Canvasupevent)//top and left in the lastLet top let leftfunctionCanvasmoveevent (e) {Let clientheight=document.documentElement.clientHeight let ClientWidth=document.documentElement.clientWidth Top= That.starty + E.clienty-Startyif(That.starty + e.clienty-starty + that.height >clientheight) {Top= ClientHeight-That.height}if(That.starty + E.clienty-starty < 0) {Top= 0} Left= That.startx + E.clientx-StartXif(That.startx + e.clientx-startx + that.width >clientwidth) { Left= ClientWidth-That.width}if(That.startx + e.clientx-startx < 0) { left= 0} css (That.kssscreenshotwrapper, {top:top+ ' px ', Left:left+ ' px '}) Toolbarposition (that, That.width, That.height, top, left, That.toolbar)}functionCanvasupevent (e) {if(top = = =undefined) {Top=That.starty}if(left = = =undefined) { Left=That.startx} that.starty=Top That.startx=Left Document.removeeventlistener (' MouseMove ', Canvasmoveevent) Document.removeeventlistener (' MouseUp ', Canvasupevent) Drawmiddleimage (That)})

This is the second part of the Enddraw function. The whole of this part creates a canvas and adds events to the canvas, allowing the user to click on the canvas to move the box.

createdragdom (That.kssscreenshotwrapper, That.dotsize, that.linesize ,                ' #488ff9 ', that) let IMG= Document.createelement (' img ') CSS (img, {width:' 100% ', Height:' 100% ', Position:' Absolute ', Top:0, left:0, display:' None '}) That.kssScreenShotWrapper.appendChild (img) that.currentimgdom=img Drawmiddleimage (that) That.toolbar= Createtoolbar (That.toolbarwidth, That.toolbarheight, That.toolbarmargintop, that)

This is the third part of the Enddraw function. This section first generates a draggable border, the Createdragdom function, and then generates a picture for subsequent downloads, snapshots, and finally a toolbar for drawing the picture.

Remainder of the next chapter continues

[A Practical Web tool (i)] (https://my.oschina.net/kejiacheng/blog/1837225 "A practical web tool (i)")

A practical Web tool (ii)