预览地址：http://pengchenggang.gitee.io/canvas-screenshot/
参考资料：https://www.canvasapi.cn/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CanvasScreenshot</title>
</head>
<body>
<div style="height: 50px;">
gitee 上面 不能播放视频，所以换成图片 原理一样，用鼠标框取图片内容
</div>
<div style="position: relative; height: 477px;">
<img id="imgId" style="position: absolute;" src="Picture.jpg" width="848" height="477" />
<!-- <video id="videoId" src="1920.mp4" autoplay style="position: absolute;848px; height: 477px;"></video> -->
<canvas id="canvasId" style="position: absolute;" width="848" height="477"></canvas>
</div>
<div style="clear: both;"></div>
<canvas id="canvasShot" style="display: none;" width="1920" height="1080"></canvas>
<img id="showPic" />
<script>
var img, cid, ctx
var _x1, _y1, _x2, _y2
var drawing = false
var offset = 0
var picSizeW
var picSizeH
function main() {
/** @type {HTMLCanvasElement} */
img = document.getElementById("imgId")
cid = document.getElementById("canvasId")
ctx = cid.getContext("2d")
ctx.lineWidth = 2;
ctx.strokeStyle = "#c72e1e";
cid.addEventListener('click', function (e) {
console.info('cid is click', e)
var x = e.layerX
var y = e.layerY
// console.info("x is %s, y is %s", x, y)
})
cid.addEventListener("mousedown", function (e) {
// console.info('cid is mousedown', e)
if (drawing) {
drawing = false
return
}
_x1 = e.layerX - offset
_y1 = e.layerY - offset
drawing = true
// render()
})
cid.addEventListener("mouseup", function (e) {
// console.info('cid is mouseup', e)
drawing = false
if (_x2 < _x1) {
var t = _x2
_x2 = _x1
_x1 = t
}
if (_y2 < _y1) {
var t = _y2
_y2 = _y1
_y1 = t
}
picSizeW = _x2 - _x1
picSizeH = _y2 - _y1
if (picSizeW > 2 && picSizeH > 2) {
console.info('图片宽高均大于2px，认为可以执行截屏操作')
getShot()
} else {
ctx.clearRect(0, 0, 848, 477);
}
})
cid.addEventListener("mousemove", function (e) {
_x2 = e.layerX - offset
_y2 = e.layerY - offset
render()
})
cid.oncontextmenu = function (ev) {
ev.preventDefault();
}
}
function render() {
if (!drawing) return
ctx.clearRect(0, 0, 848, 477);
// ctx.drawImage(img, 0, 0, 800, 300)
ctx.fillStyle = 'rgba(225,225,225,0.5)';
ctx.fillRect(0, 0, 848, 477);
var w = _x2 - _x1
var h = _y2 - _y1
ctx.clearRect(_x1, _y1, w, h);
ctx.strokeRect(_x1, _y1, w, h);
}
function getShot() {
var canvasShotId = document.getElementById("canvasShot")
var csId_ctx = canvasShotId.getContext('2d')
var vId = document.getElementById("imgId")
canvasShotId.width = 1920;
canvasShotId.height = 1080;
csId_ctx.drawImage(vId, 0, 0, 1920, 1080)
var n = getRealParams(_x1, _y1, _x2, _y2)
var imageData = csId_ctx.getImageData(n._x1, n._y1, n.picSizeW, n.picSizeH)
canvasShotId.width = n.picSizeW;
canvasShotId.height = n.picSizeH;
csId_ctx.putImageData(imageData, 0, 0) // , 0, 0, n.picSizeW, n.picSizeW)
var image = canvasShotId.toDataURL('image/jpeg', 0.8)
var showPicRef = document.getElementById("showPic")
showPicRef.src = image
}
function getRealParams(x, y, x2, y2) {
console.info('x, y, x2, y2', x, y, x2, y2)
var _x = x / 848 * 1920
var _y = y / 477 * 1080
var _x2 = x2 / 848 * 1920
var _y2 = y2 / 477 * 1080
var ret = {
_x1: _x,
_y1: _y,
picSizeW: _x2 - _x,
picSizeH: _y2 - _y
}
console.info('ret', ret)
return ret
}
main()
</script>
</body>
</html>