HTML -Leinwand macht lange Streifen im Bild ⇐ JavaScript

[Guest]

Die HTML fügt konsistent Streak Artefakte hinzu, wenn es versucht, Bilder mit einer Breite länger zu rendern Mein Fall, ich verwende ein JPEG -Bild, dessen Abmessungen 42.577px (W) pro 903px (h) (1,5 MB) beträgt und es normal zu einem HTML .
< P> Aber wenn das Bild in der Leinwand angezeigt wird, fügt es dem Bild immer lange Streifen hinzu, die bei etwa 75% des Weges bis zum Ende des Bildes beginnen. Ich habe dies mit vielen verschiedenen Bildern mit ungefähr den gleichen Abmessungen versucht und es tut immer Folgendes:
schlechte Leinwand rendert < /p>
Ich nahm an, dass das Bild zu groß sein könnte, also habe ich es verkleinert wesentlich. Es scheint in jeder Größe zu sein, dass dieses Bild mit den gleichen Streifen an derselben Stelle angezeigt wird. < /P>
Dies ist ein Beispiel -JPEG Bild < /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>
Der obige Code, wenn es mit dem Beispiel für schlechtes Bild verwendet wird (oder ein beliebiges Bild von ähnlichen Dimensionen) rendert dies: Leinwand macht seltsame Streifen