В Хроме не работает функция
Есть функция которая попиксельно обрабатывает изображения и выдает необходимый результат (ч/б, сепия и т.п.).
Во всех браузерах корректное отображение результата (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> |
В общем, поэкспериментировав понял, хром ни под каким углом не хочет работать без события load.
Повесил это событие, все замечательно, но загвоздка в том то что изображение которое необходимо обработать подгружается с помощью Ajax, следовательно найти его можно только после обновления DOM. Добавляю событие live и в итоге, все что в событии load перестает работать. :-E Подскажите, в чем заключается ошибка? :)
$('#button').live('click', function(){
$('#img_crop_new').load(function(){
$('#img_crop_new').jToningImage();
});
});
|
| Часовой пояс GMT +3, время: 01:23. |