预览地址：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. C/C++ 通过Socket 传输结构体

    本质上socket无法传输结构体,我们只有将结构体装换为字节数组,或者是字符串格式来传输,到了服务端在强制类型转换一下即可,下面的代码分别提供原生写法与通过boost的实现两种,直接改改,可用于收集目 ...

  2. linux笔记-工作

    根据进程id或进程名查看端口号 netstat -antup|grep 2073 netstat -antup|grep processName 查看某个端口号是否被占用 netstat -tln | ...

  3. CF1764H Doremy's Paint 2 题解

    题目链接:CF 或者 洛谷 高分题,感觉挺有意思的题,值得一提的是这个题的 \(1\) 和 \(3\) 版本却是两个基础题. 一开始以为跟这道差不多:P8512 [Ynoi Easy Round 20 ...

  4. JAVA入门学习之GUI编程思想——day01

    GUI编程 什么是GUI???图形化编程 组件 窗口 弹窗 按钮 文本框 图片 事件 ..... GUI的核心:AWT Swing GUI编程的缺陷: ​ 1.界面不美观 ​ 2.需要jre环境 虽然 ...

  5. UVA12655 Trucks 题解

    题目传送门 前言 中文题目可以看 link . 前置知识 Kruskal 重构树 | 最近公共祖先 简化题意 给定一个 \(N\) 个点 \(M\) 条边的有向图,共有 \(S\) 次询问,每次询问从 ...

  6. ES6学习 第一章 let 和 const 命令

    前言: 最近开始看阮一峰老师的<ECMAScript 6 入门>(以下简称原文)学习ECMAScript 6(下文简称ES6)的知识,整理出一些知识点加上我的理解来做成文章笔记.按照章节为 ...

  7. Linux上安装和部署git

    本机环境: [git@rhel-server .ssh]$ cat /proc/version Linux version 2.6.32-358.el6.x86_64 1.安装 yum install ...

  8. golang指针和结构体

    指针 指针操作 指针包括指针地址.指针类型和指针取值 &: &符号放在变量前面进行取地址操作 **:*放在变量前面根据地址进行取值 指针地址: func main() { var a ...

  9. Unity学习笔记--数据持久化Json

    JSON相关 json是国际通用语言,可以跨平台(游戏,软件,网页,不同OS)使用, json语法较为简单,使用更广泛.json使用键值对来存储. 认识json文件 //注意字典类型存储时,键是以st ...

  10. python各版本新特性

    # py3.7 https://docs.python.org/zh-cn/3/whatsnew/3.7.html # py3.8 https://docs.python.org/zh-cn/3/wh ...