[英]Object does not support this property or method IE8
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." 我正在使用这个HTML5 grayscialer代码 - http://webdesignerwall.com/demo/html5-grayscale/但是,在javascript中,IE8返回错误“对象不支持此属性或方法”。 Does anybody know whats wrong with the JavaScript?
有人知道JavaScript有什么问题吗? I'm pretty sure this line right here is causing the error "
var ctx = canvas.getContext('2d');
" Thanks. 我很确定这条线路正在导致错误“
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();
}
Internet Explorer版本8及更早版本不支持canvas元素 。
If you want to use canvas on IE8 you will need to look into Google's excanvas. 如果你想在IE8上使用canvas,你需要查看Google的excanvas。 Check it out here: http://code.google.com/p/explorercanvas/wiki/Instructions
请在此处查看: http : //code.google.com/p/explorercanvas/wiki/Instructions
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.