Как записать часть холста в растровое изображение

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() позволяет использовать существующий холст в качестве источника. Это также позволяет вам указывать субрегионы исходного «изображения» для рисования. Вы также можете создать новый элемент холста программно. Объедините их, и вы сможете создавать свои собственные закадровые буферы и перенаправлять их в / из них, не обращаясь к 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;
}

Редактировать : I сравнивал эту технику с getImageData/putImageData; если важна скорость, используйте drawImage для областей блиттинга. Вот что я увидел:

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

Тесты производительности, выполняемые путем сохранения и восстановления области 125x180 10000 раз в OS X на MacBook Pro Core i7 с частотой 2,8 ГГц. Ваш пробег может варьироваться. В частности, сохранение / восстановление областей, которые либо намного больше, либо меньше, могут привести к разной относительной производительности.

Answer 3

посмотрите на подобный вопрос здесь Как скопировать содержимое одного холста в другой холст локально

Я предлагаю написать что-то вроде

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

, взятых из здесь