Почему я получаю более высокое качество изображения в Chrome, если масштабирую холст за несколько шагов? - PullRequest
Новая
       29

Почему я получаю более высокое качество изображения в Chrome, если масштабирую холст за несколько шагов?

2 голосов
/ 04 мая 2019

При использовании HTML-холста в Chrome, почему я получаю лучшее качество изображения, если я это делаю: 

 ctx.scale(0.5, 0.5);
 ctx.drawImage(image, 10,10);
 ctx.clearRect(0, 0, canvas.width, canvas.height);

 ctx.scale(0.5, 0.5);
 ctx.drawImage(image, 10,10);

вместо: 

ctx.scale(0.25, 0.25);
ctx.drawImage(image, 10,10);

Другими словами, я получаю лучшее качество, если уменьшу изображение до 50% в два раза, вместо того, чтобы уменьшать его до 25% напрямую. В Chrome текст становится гораздо менее размытым, когда я масштабирую его в два этапа (я рендеринг больших PNG, которые в основном состоят из текста).

Холст определяется как: 

<canvas id="canvas" width="2600" height="2400"></canvas>

Изображение: 

var image = new Image();
image.src = "myimage.png";

Изоляция:

Я пробовал это в Chrome, Firefox, Edge и IE. Более высокое качество изображения можно увидеть только в Chrome. Я видел много других вариантов (описанных здесь, в StackOverflow) о том, как улучшить качество изображения, но у нас довольно большая кодовая база, и для введения какого-то другого параметра потребовалось бы больше переделки нашего рендерера.

Справочная информация:

Я работаю над веб-приложением, которое отображает большие изображения (3000x3000 пикселей). Приложение позволяет пользователю увеличивать / уменьшать, перемещаться и отмечать объекты на изображении.

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

...