javascript 对象不支持此属性或方法 IE8
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9029460/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Object does not support this property or method IE8
提问by henryaaron
I am using this HTML5 grayscialer code - http://webdesignerwall.com/demo/html5-grayscale/However, in the javascript, IE8 returns the error "Object does not support this property or method." Does anybody know whats wrong with the JavaScript? I'm pretty sure this line right here is causing the error "var ctx = canvas.getContext('2d');" Thanks.
我正在使用此 HTML5 grayscialer 代码 - http://webdesignerwall.com/demo/html5-grayscale/但是，在 javascript 中，IE8 返回错误“对象不支持此属性或方法”。有人知道 JavaScript 有什么问题吗？我很确定这里的这一行会导致错误“ var ctx = canvas.getContext('2d');”，谢谢。
// $(".item img").css({"display":"none");
// On window load. This waits until images have loaded which is essential
$(window).load(function(){
// Fade in images so there isn't a color "pop" document load and then on window load
$(".item img").animate({opacity:1},500);
// clone image
$('.item img').each(function(){
var el = $(this);
el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
var el = $(this);
el.parent().css({"width":this.width,"height":this.height});
el.dequeue();
});
this.src = grayscale(this.src);
});
// Fade image
$('.item img').mouseover(function(){
$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
})
$('.img_grayscale').mouseout(function(){
$(this).stop().animate({opacity:0}, 1000);
});
});
// Grayscale w canvas method
function grayscale(src){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
回答by u.k
Internet Explorer version 8 and earlier do not support the canvas element.
Internet Explorer 8 及更早版本不支持画布元素。
回答by PriorityMark
If you want to use canvas on IE8 you will need to look into Google's excanvas. Check it out here: http://code.google.com/p/explorercanvas/wiki/Instructions
如果您想在 IE8 上使用画布，您需要查看 Google 的 excanvas。在这里查看：http: //code.google.com/p/explorercanvas/wiki/Instructions
