У меня есть два приложения, оба рисуют одно и то же изображение 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 на стороне сервера)?
Бонусный вопрос:
Есть ли способ для обоих вести себя одинаково при изменении размера / рисования изображения?