Canvas HTML5 - изменить цвет фона после рисования изображения - PullRequest
Новая
       71

Canvas HTML5 - изменить цвет фона после рисования изображения

0 голосов
/ 04 августа 2020

Я ищу, чтобы изменить цвет фона изображения после рисования изображения.

У меня есть палитра цветов, в которой пользователь может изменить цвет фона изображения. 

this.picker.onChange = async (color) => {
    const colorPicked = color;
    this.context.fillStyle = colorPicked;
    this.context.fillRect(0, 0, 1000, 1000);
}

// ...

// The event call this function when it's ready

buildImageProcess(this.context);

// User can use the color picker to change the background color

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

1 Ответ

0 голосов
/ 04 августа 2020

Через CSS

Если фон прозрачный, измените холст CSS background-color.

С помощью глобальной композитной операции

Если вам нужны пиксели холста установите цвет, затем используйте ctx.globalCompositeOperation = "destination-over" для рендеринга только прозрачных и полупрозрачных пикселей.

Если фоновые пиксели уже имеют цвет, то это проблема.

Через копию холста переднего плана

Это метод с наименьшими проблемами. по сути, он создает второй слой (передний план), который вы можете визуализировать поверх фона (слоя)

Копировать холст

Чтобы скопировать холст (передний план) 

function copyCanvas(canvas) {
    const copy = document.createElement("canvas");
    copy.width = canvas.width;
    copy.height = canvas.height;
    const ctx = copy.getContext("2d");
    ctx.drawImage(canvas, 0, 0); // render canvas to new canvas
    return copy;
}

Вы также можете использовать OffscreenCanvas или ImageBitmap, хотя метод копирования немного отличается от указанного выше. (ТАКЖЕ проверьте поддержку браузера)

Слои рендеринга

Когда у вас есть копия пикселей переднего плана, вы можете рендерить фон, а затем передний план для окончательного результата 

this.picker.onChange = async (color) => {
    const ctx = this.context;
    if (this.foreGround === undefined) {  // create copy only when needed
        this.foreGround = copyCanvas(ctx.canvas);
    }
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // in case color is semi transparent
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.drawImage(this.foreGround, 0, 0);
}

Если вы меняете пиксели переднего плана, просто создаете новую копию изменений. Например, в приведенном выше примере просто установите this.foreGround = undefined перед добавлением фона, и холст будет скопирован

...