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

最新推荐文章于 2024-08-08 08:08:01 发布

三柯油

最新推荐文章于 2024-08-08 08:08:01 发布

阅读量3.4k

点赞数

分类专栏： javascript 前端截图 js

本文链接：https://blog.csdn.net/u011439556/article/details/80885527

版权

本文介绍了基于Canvas技术的web截图工具的实现，包括截图、下载、复制和截图绘制等功能。详细阐述了startDrawDown、drawing和endDraw等关键函数的作用，以及如何利用事件监听和DOM操作实现截图框的移动和大小调整。

摘要由CSDN通过智能技术生成

码云地址：码云

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