JS - 动态选择视频坐标

JS - dynamically selecting video coordinates

本文关键字：视频 坐标 选择 动态 JS      更新时间：2023-09-26

假设我有以下视频：

<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

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

我只是想选择视频的精确片段。 对于初学者，我只需要那个正方形。

那么，我该怎么做呢？我需要操作画布吗？任何JS库？非常感谢您的时间。

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

视频元素可以是画布元素的图像源。要在画布上"播放"视频，您需要创建一个动画循环，并将当前视频帧连续绘制到画布上。有许多关于如何将视频绘制到画布上的教程 - 这是一个示例教程。

context.drawImage(vid,0,0);

侦听画布.鼠标关闭事件。然后暂停视频，让用户选择画布的矩形部分。使用 vid.pause 方法暂停视频。还要取消动画循环，以便画布显示视频中的静态帧。

vid.pause();

当视频暂停且画布为静态时，让用户使用鼠标绘制选择矩形。 

// 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);
}

在鼠标向上时，创建第二个画布并将用户选定的子图像绘制到第二个画布上。如果需要导出子图像，可以从第二个画布创建 img 元素。

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

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>

相关文章：