在 IE9 中将图像绘制到画布元素时禁用抗锯齿功能
我们的应用程序通过 JavaScript 加载 PNG 图像，并将其绘制到画布元素的 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';
Our application loads a PNG-image via JavaScript and draws it to the 2D-context of a canvas-element in order to read the exact color values of the pixels (using getImageData).
This works fine in all browsers that support the canvas-API, except in IE9: ctx.drawImage(img, 0, 0) seems to apply some kind of anti-aliasing to the image. Is it possible to disable this behavior?
Our code kind of looks like this:
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';
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
提高线条清晰度的方法取决于您是填充还是绘图......请参阅http://www.netmagazine.com/features/four-essential-html5-canvas-tips 了解每种方法的方法。
The approach to improve the crispness of lines depends on whether or not you are filling or drawing...see http://www.netmagazine.com/features/four-essential-html5-canvas-tips for approaches to each.