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

[Anonymous]

HTML Canvas постоянно добавляет артефакты «полосы» к загруженным изображениям, когда он пытается отображать изображения, где ширина значительно длиннее высоты. < /p>
В моем случае я использую изображение JPEG, чье Размеры - x: 42577, y: 903, 1,5 МБ и загружаем его на холст HTML. Около 75% пути, вплоть до конца изображения. Я попробовал это с множеством разных изображений примерно одинаковых размеров, и это всегда делает это:
Bad Canvas render < /p>
Я предполагал, что изображение может быть слишком большим, поэтому я его масштабировал значительно. Кажется, в любом размере это изображение отображается с теми же полосами, начиная примерно в одном и том же месте. Изображение < /p>

Код: Выделить всё

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const canvasWidth = 1000;
const image = new Image();
image.src = `long-alphabet.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);
});

Приведенный выше код, когда используется с примером плохого изображения (или любого изображения схожих измерений).>

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