Сохранить / восстановить фоновую область HTML5 Canvas

Question

Я использую холст HTML5 следующим образом:

1. Отображение изображения, которое заполняет область холста.
2. Отображение надписи черного текста над изображением.
3. При нажатии на текстовую метку выделите его, нарисовав закрашенный красный прямоугольник + белый текст.

У меня эта часть работает нормально.Теперь я хочу удалить красный прямоугольник и восстановить фон изображения, который был за ним.Я новичок в канве и прочитал много, но я не вижу, как это сделать.Тем не менее, я уверен, что это должно быть довольно просто.

Answer 1

Я думаю, что есть несколько способов ...

Перерисовать все после нажатия кнопки

Это просто, но не очень эффективно.

Перерисовать только измененную часть

drawImage с 9 аргументами, чтобы перерисовать только измененную часть фонового изображения, затем перерисовать черный текст поверх.

Сохранить данные изображения перед щелчком и затем восстановить его

При этом используется getImageDataи putImageData 2D-контекста.(Не уверен, что он широко реализован, хотя.)

Вот спецификация:

ImageData getImageData(in double sx, in double sy, in double sw, in double sh);
void putImageData(in ImageData imagedata, in double dx, in double dy, in optional double dirtyX, in double dirtyY, in double dirtyWidth, in double dirtyHeight);

Так, например, если измененная часть находится в прямоугольнике от (20,30) до (180,70) пикселей, просто сделайте:

var ctx = canvas.getContext("2d");
var saved_rect = ctx.getImageData(20, 30, 160, 40);
// highlight the image part ...

// restore the altered part
ctx.putImageData(saved_rect, 20, 30);

Используйте два наложенных холста

Второй холст, расположенный над первым, будет содержать красный прямоугольник и белый текст и будет очищен, когдаВы хотите «восстановить» исходное изображение.

Answer 2

Для другого вопроса переполнения стека Я создал пример, показывающий, как сохранить и восстановить раздел холста . В итоге:

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

Answer 3

function draw(e){
    ctx.drawImage(img, 0, 0);
    if(e){
        ctx.fillStyle='red';
        ctx.fillRect(5, 5, 50, 15);
        ctx.fillStyle='white';
    }else{
        ctx.fillStyle='black';
    }
    ctx.fillText('Label', 10, 17);
}
draw();
document.onclick=draw;