В Хроме не работает функция
Есть функция которая попиксельно обрабатывает изображения и выдает необходимый результат (ч/б, сепия и т.п.).
Во всех браузерах корректное отображение результата (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, время: 22:58. |