直播软件源码使用canvas实现一个小小的截图功能

转载

mb5fe55a455f6b0 2021-09-10 14:21:00

直播软件源码使用canvas实现一个小小的截图功能
考虑了一下这个功能，肯定得用 hook，因为是一个有状态的东西，hook 需要返回截图，取消截图的功能函数以及截取图片
在图片所在的同一父元素节点下添加两个 canvas，【canvas A】用于展示截图动效（比如，未被截取区域背景置灰，截取区域显示边框）；【canvas B】用于展示完整图片，便于截取动作进行以及生成截图数据（记住 canvas A 和 canvas B，后面讲解还会用到）
通过在【canvas A】上通过监听mouseup，mousemove，mousedown三个事件计算截取的区域，生成截取动效，生成截取图片等
截图动作完毕的时候即时生成截取图片数据返回

难点
1. 计算截取区域
在截图开始后，在【canvas A】的mousedown事件记录起点坐标 A, 通过mousemove事件实时监听具体的坐标，document 级的mouseup事件记录结束坐标 B（鼠标有可能会跑出截图区域外，所以是在 document 上监听 mouseup），以 A 为起点，B 为终点，AB 两点就能够计算出截取区域

// 获取截图开始的点
【canvas A】.onmousedown = function (e) {
记录起点坐标A
}

// 获取鼠标坐标
【canvas A】.onmousemove = function (坐标数据) {
1. 记录鼠标坐标
2. 生成截图区域动效
}

// 获取截图结束的点
document.addEventListener('mouseup', function (e) {
1.记录终点坐标
2. 生成截图()
}

2 截图动画效果（未被选取部分置灰，截取部分添加边框等）
在mousedown事件上把【canvas A】给置灰

// 设置截图时灰色背景
【canvas A】.fillStyle = 'rgba(0,0,0,0.6)'
【canvas A】.strokeStyle = 'rgba(0,143,255,1)'

在mouseup事件上绘制被截取效果

第一步：遮罩层：globalCompositeOperation = 'source-over' 表示在目标图像上显示源图像，那么此时进行fillRect(0, 0, 【canvas A】.width, 【canvas A】.height)那就是把我们之前设置好置灰样式在目标图片上层进行绘制，实现了第一步置灰效果
第二步：画框：globalCompositeOperation = 'destination-out' 在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示，源图像是透明的。【canvas A】.fillRect(x, y, w, h)使得截取内部透明
第三步：描边：懂的都懂，不细讲了

//第一步：遮罩层
【canvas A】.globalCompositeOperation = 'source-over'
【canvas A】.fillRect(0, 0, 【canvas A】.width, 【canvas A】.height)
//第二步：画框
【canvas A】.globalCompositeOperation = 'destination-out'
【canvas A】.fillRect(x, y, w, h)
//第三步：描边
【canvas A】.globalCompositeOperation = 'source-over'
【canvas A】.moveTo(x, y)
【canvas A】.lineTo(x + w, y)
【canvas A】.lineTo(x + w, y + h)
【canvas A】.lineTo(x, y + h)
【canvas A】.lineTo(x, y)
【canvas A】.stroke()
【canvas A】.closePath()

3. 生成&获得截取区域图片
鼠标动作停止后就是截图结束，所以需要在moveup事件生成截取图片数据，在这里可以通过 canvas 自带的 canvas.toDataURL 把截图转化为 base64，因为通过mousedown和mousemove我们已经获取用户的截取区域了，并且我们在截图开始的时候，会把原图片绘制到【canvas B】中，所以我们可以直接在【canvas B】上对该区域进行截取然后生成图片～

const canvas = document.createElement('canvas')
const context = canvas.getContext('2d')
const data = 【canvas B】.getImageData(area.x, area.y, area.w, area.h)
canvas.width = area.w
canvas.height = area.h
context.putImageData(data, 0, 0)
return canvas.toDataURL('image/png', 1)