一款实用的web截图工具（二）

2019独角兽企业重金招聘Python工程师标准>>>

码云地址：码云

github地址：github

kscreenshot

介绍

web截图工具的功能实现基于Canvas技术。其功能主要包括截图，下载，复制以及在截图过程中通过工具栏对截图进行绘制。

使用

具体使用方法请戳 码云 github

实现方式

接上篇

this.startDrawDown = (e) => {
    const that = this
    document.addEventListener('mouseup', that.cancelDrawingStatus)
    document.addEventListener('contextmenu', that.preventContextMenu)
    //当不是鼠标左键时立即返回
    if (e.button !== 0) {
        return
    }

    if (that.drawingStatus !== null) {
        return
    }
    that.drawingStatus = 1

    that.startX = e.clientX
    that.startY = e.clientY
    //移除并添加
    remove(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(kssScreenShotWrapper)
    
    document.addEventListener('mousemove', that.drawing)
    document.addEventListener('mouseup', that.endDraw)
}

startDrawDown函数是上篇start中在document上添加的鼠标按下事件。该函数首先添加了两个事件，第一个事件的作用是按下鼠标右键时取消截图状态；第二个事件是阻止鼠标右键的默认事件。下面that.startX = e.clientX，that.startY = e.clientY 这两行代码记录了当前的鼠标位置，这是两个十分重要的属性。

然后创建一个dom，该dom就是截图框的包裹层，并且给这个dom添加了一个'box-shadow': '0 0 0 9999px rgba(0, 0, 0, 0.3)'样式，使用阴影巧妙的模拟一个蒙层。接下来又创建了一个dom，这个dom就是截图框，在该范围的内容是我们截图后的内容。最后我们给document添加了两个事件。

this.drawing = (e) => {
    const that = this
    that.drawingStatus = 2

    let client = backRightClient(e)
    let clientX = client[0]
    let clientY = client[1]
    
    css(that.kssScreenShotWrapper, {
        height: Math.abs(clientY - that.startY) + 'px',
        width: Math.abs(clientX - that.startX) + 'px',
        top: Math.min(that.startY, clientY) + 'px',
        left: Math.min(that.startX, clientX) + 'px'
    })
}

drawing函数实时比对当前鼠标位置与最开始的鼠标位置，给截图框包裹层添加样式。并通过backRightClient函数防止截图框包裹层到可视区域外面。

this.endDraw = (e) => {
    if (e.button !== 0) {
        return
    }
    const that = this
    that.drawingStatus = 3
    
  ...
}

endDraw函数分成3部分述说

//endDraw第一部分
if (that.startX === e.clientX && that.startY === e.clientY) {
    let clientHeight = document.documentElement.clientHeight
    let clientWidth = document.documentElement.clientWidth
    that.startX = 2
    that.startY = 2
    that.height = clientHeight - 4
    that.width = clientWidth - 4
    css(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)
}

这是endDraw函数的第一部分。该部分的作用用于判断用户是否进行了鼠标移动，若没有移动则将截图框包裹层的宽高设置为可视区域的宽高，否则与drawing函数一样。

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和left
        let top
        let left
        function canvasMoveEvent (e) {
            let clientHeight = document.documentElement.clientHeight
            let clientWidth = document.documentElement.clientWidth
        
            top = that.startY + e.clientY - startY

            if (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 - startX

            if (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)
        }

        function canvasUpEvent (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)
        }
    })

这是endDraw函数的第二部分。这一部分的整体是创建了一个canvas，并给canvas添加了事件，使用户可以点击canvas进行移动截图框操作。

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)

这是endDraw函数的第三部分。该部分首先生成一个可拖拽的边框，即createDragDom函数，然后生成一个图片，用于后续的下载，快照，最后生成一个工具栏，用于图片的绘制。

剩余部分下篇继续

一款实用的web截图工具（一）

转载于:https://my.oschina.net/kejiacheng/blog/1837880