Есть функция которая попиксельно обрабатывает изображения и выдает необходимый результат (ч/б, сепия и т.п.).
Во всех браузерах корректное отображение результата (Firefox 7+, для IE пришлось использовать фильтры), кроме Google Chrome.
Не знаю в чем дело, но вместо необходимого изображения выводится пустота. Если кто сталкивался с такой проблемой, подскажите в чем может быть загвоздка.
И пример самого JS кода:
<script type="text/javascript">
function grayscale(image, bPlaceImage){
var myCanvas=document.createElement("canvas");
var myCanvasContext=myCanvas.getContext("2d");
var imgWidth=image.width;
var imgHeight=image.height;
myCanvas.width= imgWidth;
myCanvas.height=imgHeight;
myCanvasContext.drawImage(image,0,0);
var imageData=myCanvasContext.getImageData(0,0, imgWidth, imgHeight);
for(i=0; i<imageData.height; i++){
for(j=0; j<imageData.width; j++){
var index=(i*4)*imageData.width+(j*4);
var red=imageData.data[index];
var green=imageData.data[index+1];
var blue=imageData.data[index+2];
var alpha=imageData.data[index+3];
var average=(red+green+blue)*0.3333;
imageData.data[index]=average;
imageData.data[index+1]=average;
imageData.data[index+2]=average;
imageData.data[index+3]=alpha;
}
}
myCanvasContext.putImageData(imageData,0,0,0,0,
imageData.width, imageData.height);
if(bPlaceImage){
var myDiv=document.createElement("div");
myDiv.appendChild(myCanvas);
image.parentNode.appendChild(myCanvas);
}
return myCanvas.toDataURL();
}
$(document).ready(function() {
var newImage = $('#image')[0];
if(navigator.appName != 'Netscape' && navigator.appName != 'Opera')
newImage.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);';
else{
newImage.normalImage=grayscale(newImage, false);
newImage.src=newImage.normalImage;
}
});
</script>
И кода HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<img src="pic1.png" width="346" height="230" id="image" />
</body>
</html>