在了解HTML画布时,我发现了这个
使用HTML Canvas基本上动态地将图像从颜色更改为灰度,反之亦然。此示例按类名(img
)选择'grayscale'
元素,以便能够一次将此过程应用于多个图像。
<img class="grayscale" src="myPicture.png" alt="Description of my picture" />
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标签宽度,否则它不起作用。所以我不确定背后的机制是什么。但在这种情况下,如果我不遵守这条规则问题仍然存在。因此,在我的拙见中,添加这些特定信息,我的帮助人们陷入了类似的问题。以及有关其原因或方法的任何解释。感谢
答案 0 :(得分:0)
答案包括两个步骤:
第一个(正如Kaiido建议的那样)正在考虑drawImage()
的扩展语法,考虑canvas.width
,canvas.height
个参数
oCtx.drawImage(oColorImg, 0, 0, nWidth, nHeight);
第二个是您制作CSS规则设置图像宽度 (请注意,如果你不这样做,即使图像似乎在显示中和通过Javascript提取图像宽度都正常设置宽度,问题仍然存在。所以改善这个答案的一种方法是解释这种奇怪的行为)
img{
width: 689px;
}