Управление яркостью изображения на холсте с помощью javascript - PullRequest
Новая
       18

Управление яркостью изображения на холсте с помощью javascript

1 голос
/ 10 февраля 2020

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

Я добавил эту строку для обнаружения идентификатора в объекте и присвоения яркости свойству изображения. 

 for (let j = 0; j < imageOverlay.length ; j++) {
    if (id == imageOverlay[j]) {
        image.style.filter = "brightness(200%)";
    }
}

Когда консоль регистрирует image, отображается: 

<img src="https://assets.coingecko…ravencoin.png?1548386057" style="filter: brightness(200%);">

Понятия не имею, почему яркость не отображается на изображении.

Я использую html canvas и хотел бы сделать это с обычным javascript.

Спасибо за помощь, полный код можно найти ниже. 

var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
var circles = [];

//Init Start
let circle = new Circle();
var image = new Image();
image.src = "https://assets.coingecko.com/coins/images/3412/large/ravencoin.png?1548386057";
var id = "id";

//Image overlay for brigther images
var imageOverlay = ["id"];

for (let j = 0; j < imageOverlay.length ; j++) {
    //Check for id
    if (id == imageOverlay[j]) {
        console.log("FOUND ID: " + imageOverlay[j]);
        //Change brightness
        image.style.filter = "brightness(200%)";
        console.log(image);
    }
}

circle.init({
   image, c, id,
});

circles.push(circle);

//draw image
animate();

function Circle() {
    //Give var
    this.diameter = 100;
    this.id = id;
    this.image = image;
    this.c = null;

    //Draw circle on canvas
    this.draw = function () {

    //Image overlay for brigther images
    for (let j = 0; j < imageOverlay.length ; j++) {
        if (this.id == imageOverlay[j]) {
            this.c.filter = "brightness(300%)";
        }
    }



        this.c.beginPath();
        this.c.drawImage(this.image, (100 - this.diameter / 2), (100 - this.diameter / 2), this.diameter, this.diameter);
        this.c.closePath();
    };

    //Init circle properties
    this.init = function (options) {
        Object.keys(options).forEach((key) => {
            this[key] = options[key];
        })
    }
}

//Draw / Animate image
function animate() {
    requestAnimationFrame(animate);
    circles[0].draw();
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<canvas></canvas>

</body>
</html>

1 Ответ

0 голосов
/ 10 февраля 2020

Да, вы можете изменить яркость изображения с помощью стиля, но это не изменит оригинала, а оригинал - это то, что холст использует для рисования.

Что вам нужно сделать, это применить эту яркость Фильтр к контексту.
Перед вызовом:
this.c.drawImage(this.image
вы просто устанавливаете фильтр:
this.c.filter = "brightness(200%)";

Ниже приведен анимированный пример 

var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
var image = document.querySelector('img');

bright=0
function animate() {
  requestAnimationFrame(animate);
  
  b=Math.sin(bright/60)*100 + 100
  c.filter = "brightness("+b+"%)";
  c.drawImage(image, 0, 0, 100, 100);
  
  b += 100
  c.filter = "brightness("+b+"%)";
  c.drawImage(image, 50, 0, 100, 100);
  
  b += 100
  c.filter = "brightness("+b+"%)";
  c.drawImage(image, 100, 0, 100, 100);
  bright++
}
animate();
<canvas height="100" width="200"></canvas>
<img src="https://assets.coingecko.com/coins/images/3412/large/ravencoin.png?1548386057" height="100" width="100" style="filter:brightness(90%);">
...