0

我不想将图像的最后一行和前 20 行复制到两个单独的画布中。复制 opper 20 行很容易，但我在较低的行上遇到了麻烦。

顶级帆布：

    canvas_top.width = video.width;
    canvas_top.height = 20;
    var context_top = canvas_top.getContext('2d');
    context_top.drawImage(video, 0, 0, video.width, canvas_top.height);

无法以这种方式复制较低的行，因为您无法输入索引。

将视频的某些行复制到新画布中的快速方法是什么？

到目前为止我的想法：

用空值填充画布并用原始数据替换它们：

for(var i=(frame_data.length)-bottom_delta;i<frame_data.length;i+=4){
        bottom_data.data[counter] = frame_data[i];
        bottom_data.data[counter+1] = frame_data[i+1];
        bottom_data.data[counter+2] = frame_data[i+2];
        bottom_data.data[counter+3] = frame_data[i+3];
        counter+=4;
        }

    context_bottom.putImageData(bottom_data,0,0);

这没有用。

我试图旋转画布，但似乎当你旋转画布时，它不会改变数组中像素的位置。

context.drawImage(video, 0, 0, video.width, video.height); context.scale(1,-1); context.translate(0,-video.height); context_bottom.drawImage(contextcanvas, 0, 0, video.width, video.height); context.scale(1,-1); context.translate(0,-video.height);

有任何想法吗？

4

2 回答 2

1

您可以使用 context.drawImage 的“剪辑”参数来抓取顶部和底部线

    // clip the top 20 lines of the test canvas and put in upper canvas
    ctxU.drawImage(canvas,0,0, canvas.width,20,0,0,canvasU.width,canvasU.height);

    // clip th bottom 20 lines of the canvas and put in lower canvas
    ctxL.drawImage(canvas,0,canvas.height-20, canvas.width,20,0,0, canvas.width,20);

在此处输入图像描述

然后你可以使用getImageData分析上下画布：

var imgData = ctxU.getImageData(0,0, canvasU.width, canvasU.height);
var data = imgData.data;

// vertical rows
for(var y = 0; y < canvasU.height; y++) {
  // horizontal columns
  for(var x = 0; x < canvasU.width; x++) {
    var r = data[((canvasU.width * y) + x) * 4];
    var g = data[((canvasU.width * y) + x) * 4 + 1];
    var b = data[((canvasU.width * y) + x) * 4 + 2];
    var a = data[((canvasU.width * y) + x) * 4 + 3];

    // and then do your stuff with the rgba info

  }
}
// put the edited imgData back:

这是代码和小提琴：http: //jsfiddle.net/m1erickson/66nJk/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:30px; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var canvasU=document.getElementById("upper");
    var ctxU=canvasU.getContext("2d");
    var canvasL=document.getElementById("lower");
    var ctxL=canvasL.getContext("2d");

    // make a test canvas
    var gradient=ctx.createLinearGradient(-50,0,canvas.width+50,canvas.height);
    gradient.addColorStop(0.25,"red");
    gradient.addColorStop(0.50,"green");
    gradient.addColorStop(0.75,"blue");
    ctx.beginPath();
    ctx.rect(0,0,canvas.width,canvas.height);
    ctx.fillStyle=gradient;
    ctx.fill();


    // clip the top 20 lines of the test canvas and put in upper canvas
    ctxU.drawImage(canvas,0,0, canvas.width,20,0,0,canvasU.width,canvasU.height);
    // clip th bottom 20 lines of the canvas and put in lower canvas
    ctxL.drawImage(canvas,0,canvas.height-20, canvas.width,20,0,0, canvas.width,20);




}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="upper" width=300 height=20></canvas><br>
    <canvas id="canvas" width=300 height=300></canvas><br>
    <canvas id="lower" width=300 height=20></canvas>
</body>
</html>
于 2013-07-05T23:49:25.537 回答
0

使用and应该很简单：getImageDataputImageData

// get bottom 20 rows from source canvas
var data = src_ctx.getImageData(0, 0, src_ctx.canvas.width, 20);

// put them into the destination canvas
dst_ctx.putImageData(data, 0, 0);
于 2013-07-05T23:11:11.610 回答