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对象： width：x，height：y，top：z，left：s

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

我只是想选择一段精确的视频。对于初学者我只需要那个方格。

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

Answer 1

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

视频元素可以是canvas元素的图像源。到＆＃34;玩＆＃34;在画布上创建动画循环并连续将当前视频帧绘制到画布上的视频。有很多关于如何在画布上绘制视频的教程 - here's one example tutorial。

context.drawImage(vid,0,0);

收听canvas.mousedown事件。然后暂停视频并让用户选择画布的矩形部分。使用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);
}

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

JS - 动态选择视频坐标

1 个答案: