预览地址：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. 7.2 C/C++ 实现动态链表

    动态链表是一种常用的动态数据结构,可以在运行时动态地申请内存空间来存储数据,相比于静态数组和静态链表,更加灵活和高效.在动态链表中,数据元素被组织成一条链表,每个元素包含了指向下一个元素的指针,这样就 ...

  2. C/C++ 反汇编：针对加减乘除的还原

    算术运算通常是指,加减乘除四则运算,而计算机中的四则运算与数学中的有所不同,同样是实现算术运算,高级语言与汇编语言的实现思路完全不同,往往一个简单的减法运算,都要几条指令的配合才能得出计算结果,而为了 ...

  3. Redis主从配置、数据持久化、集群

    发布订阅 ## subscribe 订阅一个或者多个频道 ## publish 给指定的频道发送消息 ## psubscribe 订阅指定模式的频道,*代表所有 ## pubsub channels ...

  4. VB6的Office颜色菜单 - 开源研究系列文章

    今天把VB6里面的源码开源了( VB6各类源码开源 - 开源研究系列文章 ),这次把原来VB6里面的一个菜单控件进行介绍,需要的网友请下载安装: 1.看使用截图: 运行时截图: 设计时截图: 2.Of ...

  5. (C语言)每日代码||2023.12.21||C语言预处理命令，#define、#line、__LINE__、__FILE__

    #include <stdio.h> #define AAA 111 void test() { printf("__LINE__ = % d\n", __LINE__ ...

  6. yapi的安装

    1.官方网站:https://hellosean1025.github.io 2.看官方的文档,部署方法: 3. 根据文档 安装环境先: 4. 开始安装yapi 5. 可见需要启动一下 6.重启一下 ...

  7. MySQL-生成随机数字、字符串、日期、验证码及 UUID的方法

    一.生成随机数字 1. 生成 0 到 1 之间的随机数 MySQL 中的 RAND 函数可以用于生成一个大于等于 0 小于 1 的随机数字.例如: SELECT rand(); 该函数返回的数据类型为 ...

  8. CF1535

    A:氵 B:排序对两个偶数没影响,对两个奇数没影响.唯一的影响是可能原本偶数在后面,调到前面贡献变多.所以把所有偶数弄到前面就行. C:\(dp[i]\) 表示前 \(i\) 个字符以第 \(i\) ...

  9. python 中异常类型总结

    异常类型: 异常名称 描述BaseException             所有异常的基类SystemExit                   解释器请求退出KeyboardInterrupt  ...

  10. MySQL专题2: 事务和锁

    合集目录 MySQL专题2: 事务和锁 说说数据库事务特性及存在的问题 这属于数据库事务的基础概念了, 就是ACID Atomicity, 原子性, 事务包含的所有操作要么全部成功, 要么全部失败回滚 ...