HTML Canvas отображает длинные полосы в изображении ⇐ Html

[Anonymous]

html последовательно добавляет streak артефакты, когда он пытается отображать изображения с шириной значительно длинной, чем его высота.
in in В моем случае, я использую изображение JPEG, размеры которых составляют 42 577px (w) на 903px (h) (1,5 МБ), и обычно его приводят к HTML .
< P> Но когда изображение отображается на холсте, он всегда добавляет длинные полосы к изображению, начиная примерно с 75% пути, вплоть до конца изображения. Я пробовал это с множеством разных изображений примерно одинаковых размеров, и это всегда делает это:
Bad Canvas render < /p>
Я предположил, что изображение может быть слишком большим, поэтому я его масштабировал значительно. Кажется, в любом размере это изображение отображается с теми же полосами, начиная примерно в одном и том же месте. Image < /p>


const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const canvasWidth = 1000;
const image = new Image();
image.src = `https://i.sstatic.net/jUDJpnFd.jpg`; // sample bad image from above above

image.addEventListener("load", (e) => {

let width = image.width;
let height = image.height;

// Calculate the new dimensions while maintaining aspect ratio
if (width > canvasWidth) {
height *= canvasWidth / width;
width = canvasWidth;
}
ctx.drawImage(image, 0, 0, width, height);
});< /code>
< /code>
< /div>
< /div>
< /p>
Приведенный выше код, когда используется с примером плохого изображения (или любого изображения из аналогичных измерений) делает это: холст визует странные полосы


Подробнее здесь: https://stackoverflow.com/questions/794 ... s-in-image