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

时间:2017-08-10 07:03:48

标签: javascript css image canvas html5-canvas

在了解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" />

因此,它也适用于原始彩色图像,但对于修改过的图像(灰度图像),它似乎只将图像的一部分映射到设计宽度。所以不要得到这张图片:the full image gray-scaled

我只得到这一个:

only a portion gray-scaled of the original image

请注意,即使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标签宽度,否则它不起作用。所以我不确定背后的机制是什么。但在这种情况下,如果我不遵守这条规则问题仍然存在。因此,在我的拙见中,添加这些特定信息,我的帮助人们陷入了类似的问题。以及有关其原因或方法的任何解释。感谢

1 个答案:

答案 0 :(得分:0)

答案包括两个步骤:

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

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

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

    img{ width: 689px; }