如何将画布的一部分捕获到位图

Question

我想捕获一个画布的一小部分作为位图.那可能吗？这样我可以在该区域上绘制另一个位图后替换它.一旦我完成了位图,我想用原始作品替换我画的一小块画布.

谢谢!

Answer 1

你可以用.getImageData()和做.putImageData()

例

var canvas, ctx, img, imgd, col;
window.onload = function () {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    col = {
        0: '#000',
        .25: '#0099f9',
        .55: '#03f',
        1: '#000'
    };
    img = document.getElementById('img');
    var w = h = canvas.width = canvas.height = 200;

    var grad = ctx.createRadialGradient(w / 2, w / 2, 0, w / 2, w / 2, h);
    for (var i in col) {
        grad.addColorStop(i, col[i]); //just a funny mess, please don't bother :)
    }

    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, w, h);
    imgd = ctx.getImageData(50, 50, 20, 20); //caching the image Data

}

function draw() {
    ctx.drawImage(img, 50, 50, 20, 20); //drawing Image on to canvas
}

function redraw() {
    ctx.putImageData(imgd, 50, 50, 20, 20); //redraw the cached Image Data
}

和一个简单的在线示例,只有你:)

在这里试试吧

Answer 2

该drawImage()情境的方法,可以使用现有的帆布作为源.它还允许您指定要绘制的源"图像"的子区域.您还可以以编程方式创建新的canvas元素.结合这些,您可以创建自己的屏幕外缓冲区和blit到/从它们,而无需通过getImageData()/putImageData()或数据URL.

我在网上举了一个例子.

请注意,虽然该示例恰好将动态创建的画布附加到文档以便您可以看到它(源代码的第29行),但这不是必需的.在文档中创建的画布元素是否附加到层次结构.

简而言之:

function copyCanvasRegionToBuffer( canvas, x, y, w, h, bufferCanvas ){
  if (!bufferCanvas) bufferCanvas = document.createElement('canvas');
  bufferCanvas.width  = w;
  bufferCanvas.height = h;
  bufferCanvas.getContext('2d').drawImage( canvas, x, y, w, h, 0, 0, w, h );
  return bufferCanvas;
}

编辑:我对此技术进行了基准测试getImageData/putImageData ; 如果速度很重要,请使用drawImageblitting区域.这是我看到的:

http://phrogz.net/tmp/canvas_copy_benchmark.png

通过在2.8GHz Core i7 MacBook Pro上在OS X上保存和恢复125x180区域10,000次来执行基准测试.你的旅费可能会改变.具体而言,保存/恢复更大或更小的区域可能导致不同的相对性能.

Answer 3

看看这里类似的问题How to Copy Contents of One Canvas to Another Canvas Locally

我建议写一些类似的东西

var canvas1 = document.getElementById('canvas1');
var src     = canvas1.toDataURL("image/png"); // cache the image data source`

将图像保存在变量中，然后使用以下命令检索它

var img     = document.createElement('img'); // create a Image Element
img.src     = src;   //image source
var ctx1    = canvas1.getContext('2d');
ctx2.drawImage(img, 0, 0);  // drawing image onto second canvas element

取自这里