canvas-screenshot 视频截屏功能，选择视频的一个区域，进行截图

预览地址：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;width: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>
posted @ 2021-03-11 08:52  彭成刚  阅读(326)  评论(0)  编辑  收藏  举报