Question

我们的应用程序通过JavaScript加载PNG图像并将其绘制到canvas-element的2D上下文中，以便读取像素的确切颜色值（使用getImageData）。

这在支持canvas-API的所有浏览器中都能正常工作，IE9除外： ctx.drawImage（img，0,0）似乎对图像应用了某种消除锯齿功能。是否可以禁用此行为？

我们的代码看起来像这样：

var img = document.createElement('IMG');
img.addEventListener('load', function(e) {
    var w = img.width,
        h = img.height,
        ctx = canvas.getContext('2d');

    ctx.drawImage(img, 0, 0);
    var data = ctx.getImageData(0, 0, w, h),
        pixels = data.data;

    for (var y = 0, i = 0; y < h; y++) {
        for (var x = 0; x < w; x++, i += 4) {
            var r = pixels[i],
                g = pixels[i+1],
                b = pixels[i+2],
                color = (r << 16) | (g << 8) | b;

            // do something with x, y and color
        }
    }
});
img.src = 'images/source.png';

Answer 1

改善线条清晰度的方法取决于你是否填充或绘图......请参阅http://www.netmagazine.com/features/four-essential-html5-canvas-tips了解各种方法。

在IE9中将图像绘制到canvas-element时禁用消除锯齿功能

1 个答案: