javascript - JS-动态选择视频坐标

Question

假设我有以下视频:

<video id ="vid" controls>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

<script>
var vid = document.getElementById("vid");
var width = vid.videoWidth; //320
var height = vid.videoHeight; //176
</script>

现在，它的宽度和高度是 320:176 - 但它可以是任何东西。

现在，我想做的是说用户在视频上选择某个点，当他向左/右/上/下移动时，动态形成一个正方形，覆盖用户选择的整个区域(通常，当用户单击视频本身时，它会停止，在我们的例子中 - 不)。我希望看到这个广场。

它的工作原理就像您在 Windows Paint 中选择矩形一样。当他松开鼠标 LM 按钮时(意味着正方形已完成)，一个新的 js 对象由以下内容组成:宽度:x，高度:y，顶部:z，左侧:s

所以，这个正方形应该指向特定的坐标， 它们本质上是一个正方形。

我只是想选择视频中的一个精确片段。首先，我只需要那个正方形。

那么，我该怎么做呢？我需要操作 Canvas 吗？有没有js库？非常感谢您抽出宝贵的时间。

Answer 1

以下是使用 html5 canvas 抓取视频帧的子矩形的快速入门。

视频元素可以是 Canvas 元素的图像源。要在 Canvas 上“播放”视频，您可以创建一个动画循环并连续将当前视频帧绘制到 Canvas 上。有很多关于如何将视频绘制到 Canvas 上的教程 -- here's one example tutorial .

context.drawImage(vid,0,0);

监听canvas.mousedown事件。然后暂停视频并让用户选择 Canvas 的矩形部分。使用 vid.pause 方法暂停视频。同时取消动画循环，以便 Canvas 显示视频中的静态帧。

vid.pause();

当视频暂停且 Canvas 静止时，让用户用鼠标绘制一个选择矩形。

// on mousemove ...
function draw(){
    // refresh canvas by redrawing the paused video frame onto the canvas
    ctx.drawImage(vid,0,0);
    // stroke a rectangle based on the users starting & current mouse position
    ctx.strokeRect(startX,startY,mouseX-startX,mouseY-startY);
}

鼠标松开时，创建第二个 Canvas 并将用户选择的子图像绘制到第二个 Canvas 上。如果需要导出子图像，可以从第二个 Canvas 创建一个 img 元素。

示例代码和演示展示了如何让用户选择 Canvas 的矩形部分并将其导出到 img 元素。此演示中的 Canvas 显示静态图像。您将把视频元素绘制到 Canvas 上。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

var isDown=false;
var startX,startY,mouseX,mouseY;

var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/faces1.png";
function start(){
  canvas.width=img.width;
  canvas.height=img.height;
  draw();
  $("#canvas").mousedown(function(e){handleMouseDown(e);});
  $("#canvas").mousemove(function(e){handleMouseMove(e);});
  $("#canvas").mouseup(function(e){handleMouseUp(e);});
  $("#canvas").mouseout(function(e){handleMouseOut(e);});
}

function draw(){
  ctx.drawImage(img,0,0);
  if(!isDown){return;}
  ctx.strokeRect(startX,startY,mouseX-startX,mouseY-startY);
}

function capture(){
  var c=document.createElement('canvas');
  var cctx=c.getContext('2d');
  var x=startX;
  var y=startY;
  var w=mouseX-startX;
  var h=mouseY-startY;
  c.width=w;
  c.height=h;
  cctx.drawImage(canvas,x,y,w,h,0,0,w,h);
  var img=new Image();
  document.body.appendChild(img);
  img.src=c.toDataURL();
}


function handleMouseDown(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  startX=parseInt(e.clientX-offsetX);
  startY=parseInt(e.clientY-offsetY);

  // Put your mousedown stuff here
  isDown=true;
}

function handleMouseUp(e){
  if(!isDown){return;}

  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // Put your mouseup stuff here
  isDown=false;        

  // create a cropped image
  capture();
}

function handleMouseOut(e){
  isDown=false;
  draw();       
}

function handleMouseMove(e){
  if(!isDown){return;}
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  draw();
}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Drag to select an area. Release to create a clipped img.</h4>
<canvas id="canvas" width=300 height=300></canvas>