无法真正调整画布图像的大小

Question

在了解HTML画布时，我发现了这个

Example: Dynamically change images

使用HTML Canvas基本上动态地将图像从颜色更改为灰度，反之亦然。此示例按类名（img）选择'grayscale'元素，以便能够一次将此过程应用于多个图像。

HTML

<img class="grayscale" src="myPicture.png" alt="Description of my picture" />

的JavaScript

window.addEventListener('load', removeColors);

function showColorImg() {
  this.style.display = 'none';
  this.nextSibling.style.display = 'inline';
}

function showGrayImg() {
  this.previousSibling.style.display = 'inline';
  this.style.display = 'none';
}

function removeColors() {
  var aImages = document.getElementsByClassName('grayscale'),
      nImgsLen = aImages.length,
      oCanvas = document.createElement('canvas'),
      oCtx = oCanvas.getContext('2d');
  for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId < nImgsLen; nImgId++) {
    oColorImg = aImages[nImgId];
    nWidth = oColorImg.offsetWidth;
    nHeight = oColorImg.offsetHeight;
    oCanvas.width = nWidth;
    oCanvas.height = nHeight;
    oCtx.drawImage(oColorImg, 0, 0);
    oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
    aPix = oImgData.data;
    nPixLen = aPix.length;
    for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
      aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
    }
    oCtx.putImageData(oImgData, 0, 0);
    oGrayImg = new Image();
    oGrayImg.src = oCanvas.toDataURL();
    oGrayImg.onmouseover = showColorImg;
    oColorImg.onmouseout = showGrayImg;
    oCtx.clearRect(0, 0, nWidth, nHeight);
    oColorImg.style.display = "none";
    oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
  }
}

到目前为止，这个例子运行良好，但是当我使用大图像时，会出现水平滚动条（图像宽度为2400像素） 所以我选择在img标签中精确定义图像的宽度，如下所示：

<img class="grayscale" src="mypic3.jpg" width="698px" alt="Description of my picture" />

因此，它也适用于原始彩色图像，但对于修改过的图像（灰度图像），它似乎只将图像的一部分映射到设计宽度。所以不要得到这张图片：

我只得到这一个：

请注意，即使oCanvas.width = nWidth;使用img标记的偏移量（即689）初始化画布宽度，也会发生这种情况

我尝试过的其他无用的东西：

oCtx.drawImage(oColorImg, 0, 0);
oCanvas.style.backgroundSize="70%";
oCanvas.style.width="689px";
oCtx.putImageData(oImgData, 0, 0, 0, 0, 698, 410);

我感谢任何帮助

编辑：将标记重复 - 对于通过设置画布宽度将问题标记为问题副本的人，我特别声明它不起作用，上面的代码包括设置画布宽度。
- 对于使用drawimage（）的扩展形式的最后四个，我尝试过但除非我设置一个显式的全局CSS规则设置img标签宽度，否则它不起作用。所以我不确定背后的机制是什么。但在这种情况下，如果我不遵守这条规则问题仍然存在。因此，在我的拙见中，添加这些特定信息，我的帮助人们陷入了类似的问题。以及有关其原因或方法的任何解释。感谢

Answer 1

答案包括两个步骤：

1. 第一个（正如Kaiido建议的那样）正在考虑drawImage()的扩展语法，考虑canvas.width，canvas.height个参数

   oCtx.drawImage(oColorImg, 0, 0, nWidth, nHeight);

2. 第二个是您制作CSS规则设置图像宽度 （请注意，如果你不这样做，即使图像似乎在显示中和通过Javascript提取图像宽度都正常设置宽度，问题仍然存在。所以改善这个答案的一种方法是解释这种奇怪的行为）

   img{ width: 689px; }