预览地址：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>

canvas-screenshot 视频截屏功能，选择视频的一个区域，进行截图的更多相关文章

  1. 【玩转cocos2d-x之三十九】Cocos2d-x 3.0截屏功能集成

    3.0的截屏和2.x的截屏基本上同样.都是利用RenderTexture来处理,在渲染之前调用call函数,然后调用Cocos的场景visit函数对其进行渲染,渲染结束后调用end函数就可以.仅仅是3 ...

  2. PhantomJS linux系统下安装步骤及使用方法(网页截屏功能)

    PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, ...

  3. android4.3 截屏功能的尝试与失败分析

    1.背景 上一篇讲了在源码中捕获到了android手机的截屏函数(同时按下电源键与音量减,详情http://blog.csdn.net/buptgshengod/article/details/199 ...

  4. iOS截屏功能

    代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. // ...

  5. Android自己定义截屏功能，相似QQ截屏

    由于公司业务需求 须要对一个屏幕进行截屏.但自带的截屏功能是远远不够项目的功能需求 ,我们是做一个画板软件 .须要的像QQ那样截屏之后 ,能够看到我们自己定义的工具.有画笔,button等等 .and ...

  6. Atitit截屏功能的设计解决方案

    Atitit截屏功能的设计解决方案 自己实现.... 使用快捷键.. 弹出自己的win,,背景是屏幕快照 点击鼠标光标变成十字状态 出现截屏窗口调整截屏窗口位置与大小 释放鼠标,三个btn,,  复制 ...

  7. Mac下的截屏功能

    全屏截图 对全屏的截图我们可以通过按 苹果键(花键)+Shift键+3来执行,之后伴随着清脆的一声提示音后,在桌面上就会生成一个图片文件,这就是刚刚截屏的图片了,默认文件类型是PNG的. 自定义截图 ...

  8. 使用laravel框架与phantomjs实现截屏功能

    在网上看到的关于phantomjs实现截屏功能很多都是与node结合在一起使用,并需要输入命令才能执行.因此我想要实现输入网址即可截屏并输出图片的功能.示例:http://120.77.171.182 ...

  9. [置顶] Android 应用内禁止截屏功能的实现

    截图介绍   Android的调试工具DDMS提供有截屏功能,很多软件也会有截屏功能,在做支付等安全类应用的时候,为了保证用户的资产和系统安全,往往会禁止应用内截屏,禁止之后,在此应用处于前台的情况下 ...

  10. 小胖说事22-----iOS开发技巧之取消键盘响应和截屏功能

    1.UILable内容模糊 在非Retina的iPad mini 的屏幕上,一个UILable的frame的origin值假设是有小数位(如0.5),就会造成显示模糊,所以不妨用整数值的origin. ...

随机推荐

  1. SpringCloud-Config配置中心搭建保姆级教程

    一.分布式配置中⼼ 在使⽤微服务架构开发的项⽬中,每个服务都有⾃⼰的配置⽂件(application.yml),如果将每个服务的配置⽂件直接写在对应的服务中,存在以下问题: 1. 服务开发完成之后,需 ...

  2. 【算法】【回溯】N皇后问题【力扣-51】超详细的注释和解释手撕N皇后

    [算法][回溯]N皇后问题[力扣-51]超详细的注释和解释手撕N皇后 先赞后看好习惯 打字不容易,这都是很用心做的,希望得到支持你 大家的点赞和支持对于我来说是一种非常重要的动力 看完之后别忘记关注我 ...

  3. workman在线五子棋

    一.下载安装workman,地址:https://github.com/walkor/workerman composer require workerman/workerman 二.cd到worke ...

  4. TP5图片处理常见问题

    一.Class 'think\Image' not found composer require topthink/think-image 装上了扩展控制器头部加了 use think\Image然后 ...

  5. CF1045G AI robots题解

    题目链接:洛谷 或者 CF 本题考虑转化为 cdq 分治模型 对于 cdq 分治来说,只需要考虑左边对右边的影响,那我们要考虑该怎样设置第一维度的左右对象.很显而易见的是抛开 \(q\) 限制而言,我 ...

  6. Mygin之错误恢复Recover中间件

    本篇是mygin这个系列的最后一篇.如果想自己动手实现一个类似Gin的Web框架,建议从 mgin第一篇开始, 总代码行数有效行数只有600多行 github源码 mygin 目的 实现错误处理机制 ...

  7. 定制你的清爽Mac版Edge浏览器

    浏览器每次打开都有个烦人的提示要获取将来的 microsoft edge 更新,需要 macos 10.15 或更高版本,找了很久也没有解决办法,有 windows 端的解决方案,有禁止更新的解决方案 ...

  8. CF1425F Flamingoes of Mystery 题解

    题目传送门 前置知识 前缀和 & 差分 解法 令 \(sum_k=\sum\limits_{i=1}^{k} a_k\).考虑分别输入 \(sum_2 \sim sum_n\),故可以由于差分 ...

  9. Centos8 安装 Redis6.0.16

    下载,解压,编译,安装 安装至 /opt/redis/redis-6.0.16 目录 tar xvf redis-6.0.16.tar.gz gcc --version cd redis-6.0.16 ...

  10. Oracle 12c中增强的PL/SQL功能

    英文链接:http://www.oracle.com/technetwork/issue-archive/2013/13-sep/o53plsql-1999801.html Oracle 12c增强了 ...