预览地址：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. 8.9 RDTSC时钟检测反调试

    RDTSC时钟检测同样可实现反调试检测,使用时钟检测方法是利用rdtsc汇编指令,它返回至系统重新启动以来的时钟数,并且将其作为一个64位的值存入EDX:EAX寄存器中,通过运行两次rdstc指令,然 ...

  2. 由反射引出的Java动态代理与静态代理

    写在开头 在<深入剖析Java中的反射,由浅入深,层层剥离!>这篇文章中我们讲反射时,曾提到过Java的动态代理中使用了反射技术,那么好,今天我们要就着反射的索引,来学习一下Java中的代 ...

  3. Cpu是如何选择线程的?

    Cpu是如何选择线程的? linux中线程存放格式 linux中线程与进程对应的结构体都是task_struct 唯一不同的点在于线程存放的东西少了点(由于一个进程中的线程们是共享一定数据的那些东西就 ...

  4. ABC306 A - F

    ABC306 A - F 代码不提供 A 题意:吧字符串的每个字符连续输出两遍,记得不要快读,不要忘记输入 $ n $ 纪念 Qinzh A 题 WA 掉 B 题意:给定长度为 $ 64 $ 的数组 ...

  5. 小知识：统计Oracle的日归档量

    首先这对于Oracle DBA来说是个初级问题,即使不熟悉的初级DBA也可以快速在网上搜索到现成的SQL语句. 网上搜到的查询SQL基本类似这样的逻辑: select trunc(completion ...

  6. C++——数据类型笔记

    在C++编程中,了解各类数据类型也是至关重要的.下面我会总结一下C++中的数据类型,包括基本类型,符合类型和自定义类型.方便自己整理和理解. 1,基本类型 C++中的基本类型是构建其他数据类型的基础, ...

  7. JS 这一次彻底理解插入排序

    壹 ❀ 引 在前两篇排序文章中,我们分别介绍了冒泡排序与选择排序,趁热打铁,我们接着聊插入排序.老实说,在分析排序过程中头脑很清楚,过后再尝试写出排序代码还有点坎坷...可能是我脑瓜子不太机灵的问题, ...

  8. 如何在Windows上使用Git创建一个可执行脚本？

    长话短说,今天介绍如何在windows上使用Git上创建一个可执行的shell脚本. 首先我们要知道windows上Git新添加的文件权限是:-rw-r--r--(对应权限值是644),而通常创建的s ...

  9. win32 - 内存映射(CreateFileMapping)

    目标:创建一个app,使用CreateToolhelp32Snapshot扫描所有的进程,并将进程的pid和exe名字映射到内存中,再在另一个app中使用OpenFileMapping打开该映射读取相 ...

  10. win32 - 使用VerQueryValue获得应用程序的名称

    比如: Google Chrome: 类似于任务管理器中显示名字,见下图 那么我们就需要使用VerQueryValue, 从指定的版本信息资源中检索指定的版本信息.若要检索适当的资源,在调用VerQu ...