HTML Canvas渲染超长宽比图片时出现长条状条纹问题求助

大家好，我最近碰到一个HTML Canvas的诡异问题，想请教下各位有没有遇到过或者知道怎么解决：

HTML的<canvas>元素在渲染**宽高比悬殊（宽度远大于高度）**的图片时，总会出现*长条状条纹（streak）*的渲染瑕疵。

我自己的测试场景是这样的：用了一张JPEG格式的图片，尺寸为42577px（宽）×903px（高），文件大小1.5MB，按照常规方法绘制到Canvas里。但图片在Canvas中显示时，大概从75%的位置开始，一直到图片末尾，都会出现很长的条纹。我换了好几张类似宽高比的图片测试，结果都一样，渲染后的图片带有明显的长条瑕疵。

一开始我以为是图片尺寸太大导致的，于是把图片大幅缩小了尺寸，但不管缩到多大，条纹总是出现在差不多的位置，问题完全没有改善。

我准备了一张能稳定触发这个问题的样本JPEG图，用它配合下面的代码就能复现问题：

测试代码 #

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const canvasWidth = 1000;
const image = new Image();
image.src = `样本问题图片路径`; // 替换为触发问题的样本图片地址

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

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

  // 计算保持宽高比的新尺寸
  if (width > canvasWidth) {
    height *= canvasWidth / width;
    width = canvasWidth;
  }
  ctx.drawImage(image, 0, 0, width, height);
});

<canvas id="myCanvas" width="1000" height="100"/>

用上面的代码渲染样本图后，Canvas就会出现那种奇怪的长条条纹。

有没有大佬知道这是什么原因导致的？或者有没有什么办法可以解决这个问题呀？

备注：内容来源于stack exchange，提问作者Marc Reed