Различия между двумя рисунками на холсте - PullRequest
0 голосов
/ 30 января 2020

У меня есть два приложения, оба рисуют одно и то же изображение jpg на холсте, используя canvasImage.getContext("2d").drawImage. Во время процесса изображение масштабируется.

Первое приложение генерирует холст, используя Dom7 на стороне клиента, а другое - React 16.10.2 на стороне сервера. .

Упрощенные фрагменты кода:

Приложение A:

const dom7Canvas = $$('<canvas>');
const ctx = dom7Canvas[0].getContext('2d');

const imageLoader = new Image();
imageLoader.onload = () => {
    ctx.drawImage(imageLoader, 0, 0, width, height);
};
imageLoader.src = imageSource; 

Приложение B:

render() {
    return <canvas ref="canvas"></canvas>;
}

componentDidMount() {
    const ctx = this.refs.canvas.getContext('2d');

    const imageLoader = new Image();
    imageLoader.onload = () => {
        ctx.drawImage(imageLoader, 0, 0, width, height);
    };
    imageLoader.src = imageSource;
}

Проблема в том, что оба приложения рисуют немного разные изображения. Базовое изображение jpg - это черно-белое изображение, а некоторые пиксели ярче или темнее, чем на другом изображении. Различия едва различимы невооруженным глазом (никогда не больше 3 по шкале серого 256).

Я предполагаю, что эта разница сводится к тому, как размер изображения изменяется на обоих холстах, поэтому мой вопрос:
Почему холст ведет себя по-разному в этих двух случаях (холст Dom7 на стороне клиента и холст React на стороне сервера)?

Бонусный вопрос:
Есть ли способ для обоих вести себя одинаково при изменении размера / рисования изображения?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...