预览地址：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. 环境调试bug【一】

    1.报错修改`np.bool`---bool H:\Anaconda3-2020.02\envs\parl\lib\site-packages\paddle\fluid\framework.py:54 ...

  2. CH59X/CH58X/CH57X sleep模式下串口唤醒收发数据

    整体程序逻辑: 下方的具体程序及使用是基于CH592进行的 SLEEP模式睡眠唤醒是由协议栈管理的,还在睡眠时,无法接收到数据. 已经通过使能HAL_SLEEP开启睡眠.如果需要在睡眠时实时接收串口传 ...

  3. 练习（Java）：将一个数转换为16进制；获得多位数的各个位上的数

    //将一个数转换为十六进制 int num = 60; int i1 = num % 16; int i2 = num % (16*16) / 16; int i3 = num % (16*16*16 ...

  4. 安装Electron时卡在install.js不动的解决方案

    问题来源,发现即使 源切换成淘宝的之后,安装 electron的时候还是慢死,郁闷,后来百度才发现,原来,还需要设置一个地方!!! 经过试验,果然快了 爽.... 之前在安装Electron的时候,经 ...

  5. Delphi TStringList 有趣的CommaText和DelimitedText

    CommaText 在没有指定StrictDelimiter=true的情况下,当列表中项中 包含 空格和逗号的时候就默认的 在这个字符串上面 增加 双引号 很智能吧 例子1: var MyList: ...

  6. Nginx实战-公网LB限流配置等

    前提: Nginx要实现根据ip地址进行限流与不限流的区分需要通过源码包安装GeoIP模块 找到与yum安装版本相同的源码包,通过configure进行安装 ./configure --prefix= ...

  7. NC50243 小木棍

    题目链接 题目 题目描述 乔治有一些同样长的小木棍,他把这些木棍随意砍成几段,直到每段的长都不超过50.现在,他想把小木棍拼接成原来的样子,但是却忘记了自己开始时有多少根木棍和它们的长度.给出每段小木 ...

  8. Java注解--一张图一案例掌握自定义注解

    1.概述 是什么:是对方法.类.参数.包.域以及变量等进行代码功能的增强或者修改程序的行为等操作. 应用 跟踪代码依赖性,实现替代配置文件功能 在反射中使用Annotation,字段格式化(如:数据字 ...

  9. Spring boot 2.0启动自动执行sql语句

    项目地址:https://gitee.com/indexman/spring_boot_in_action 1.准备sql文件 将department.sql放到resources路径下 /* Nav ...

  10. 【Android 抓包对抗】客户端证书和域名校验绕过

    1. 按照之前的方式(https://www.cnblogs.com/gradyblog/p/17197707.html)进行抓包发现证书校验失败 SSL handshake with client ...