当前位置：文江博客话题详情

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

发布于 2024-10-09 08:18:34 字数 88 浏览 4 评论 0原文

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

谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寻找一个思念的角度 2024-10-16 08:18:34

上下文的 drawImage() 方法允许您使用现有的画布作为源。它还允许您指定要绘制的源“图像”的子区域。您还可以通过编程方式创建新的画布元素。将它们结合起来，您就可以创建自己的离屏缓冲区并与它们进行 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;如果速度很重要，请使用drawImage来进行位块传送区域。这是我看到的：

_{（来源：phrogz.net）}

基准执行者在 2.8GHz Core i7 MacBook Pro 的 OS X 上保存和恢复 125x180 区域 10,000 次。您的里程可能会有所不同。具体来说，保存/恢复更大或更小的区域可能会导致不同的相对性能。

The drawImage() method of contexts allows you to use an existing canvas as the source. It also allows you to specify sub-regions of the source "image" to draw. You can also create a new canvas element programmatically. Combine these, and you can create your own offscreen buffers and blit to/from them without needing to go through getImageData()/putImageData() or data URLs.

I've put an example of this online.

Note that while the example happens to append the dynamically-created canvas to the document so that you can see it (line 29 of the source), this is not necessary. Canvas elements created in the document function whether attached to the hierarchy or not.

In short:

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

Edit: I benchmarked this technique versus getImageData/putImageData; if speed is important, use drawImage for blitting regions. Here's what I saw:

_{(source: phrogz.net)}

Benchmarks performed by saving and restoring a 125x180 region 10,000 times on OS X on a 2.8GHz Core i7 MacBook Pro. Your mileage may vary. Specifically, saving/restoring regions that are either much larger or smaller may result in different relative performance.

回复收藏 0 原文

薄暮涼年 2024-10-16 08:18:34

您可以使用 < 来执行此操作code>.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
}

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

在这里尝试

you can do this using .getImageData() and .putImageData()

Example

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
}

and a simple Online Example, just you :)

Try it Here

回复收藏 0 原文

爱要勇敢去追 2024-10-16 08:18:34

在这里看看类似的问题如何将一个画布的内容本地复制到另一个画布

我建议编写一些内容，例如

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

Taken from 此处

have a look at a similar question here How to Copy Contents of One Canvas to Another Canvas Locally

What i suggest is write somthing like

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

to save image in a variable and then retrive it later with

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

Taken from here

回复收藏 0 原文

~没有更多了~