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
}

和一个简单的在线示例，只有你：）

Try it Here

Answer 2

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

我放了example of this online。

请注意，虽然该示例恰好将动态创建的画布附加到文档以便您可以看到它（源代码的第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;
}

修改：我benchmarked这项技术与getImageData/putImageData相比;如果速度很重要，请使用drawImage进行blitting区域。这就是我所看到的：

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

取自here

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

3 个答案:

Try it Here