如何使用javascript将画布的最后20行复制到另一个画布中？_Javascript_Html_Canvas

如何使用javascript将画布的最后20行复制到另一个画布中？

javascript html canvas

如何使用javascript将画布的最后20行复制到另一个画布中？,javascript,html,canvas,Javascript,Html,Canvas,我不想把图像的最后20行和前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.heig

我不想把图像的最后20行和前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);

对于（var i=（frame_data.length）-bottom_delta；i使用getImageData
和putImageData
这应该很简单：
// 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);

您可以使用context.drawImage的“clipping”参数来获取顶部和底部线条
    // 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:

var imgData=ctxU.getImageData（0,0，canvasU.width，canvasU.height）；
var数据=imgData.data；
//垂直行
对于（变量y=0；y

下面是代码和小提琴：

正文{背景色：象牙色；填充：30px；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var canvasU=document.getElementById（“上限”）；
var ctxU=canvasU.getContext（“2d”）；
var canvasL=document.getElementById（“较低”）；
var ctxL=canvasL.getContext（“2d”）；
//制作一个测试画布
var gradient=ctx.createLinearGradient（-50,0，canvas.width+50，canvas.height）；
渐变。添加颜色停止（0.25，“红色”）；
渐变。添加颜色停止（0.50，“绿色”）；
渐变色。添加色阻（0.75，“蓝色”）；
ctx.beginPath（）；
ctx.rect（0,0，canvas.width，canvas.height）；
ctx.fillStyle=渐变；
ctx.fill（）；
//剪辑测试画布的前20行并放入上部画布
ctxU.drawImage（画布，0,0，画布.宽度，20,0,0，画布.宽度，画布.高度）；
//剪辑画布底部20行，放入下方画布
ctxL.drawImage（canvas，0，canvas.height-20，canvas.width，20,0,0，canvas.width，20）；
})；//end$（函数（）{}）；




这将占用前20行，而不是最后20行：(
<!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>