Pixastic: Effects not working
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitle开发者_JAVA百科d Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="pixastic.custom.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#image').pixastic("desaturate");
});
</script>
</head>
<body>
<img id="image" src="test2.jpg"/>
</body>
</html>
This is the code that i'm working with and when i load the page in the browser, image does not desaturate. Can anyone please help me rectify what's wrong with the code!
OK, so caman not working out?
Heres and example of the desaturate filter working:
http://jsfiddle.net/PCbvb/7/
Things to bear in mind with pixastic:
(1) you should try the : $(whatever).pixastic("desaturate",{average : false});
(average:false bit)
(2) canvas only works when the image is on the same domain as the script using it.
Hope that helps.
Alex
This is moving the goal posts slightly but I had a project recently where I needed to do a lot of canvas image manipulation and started off with pixastic however i did run into a lot of issues and couldnt find a lot of documentation around. I moved to using http://camanjs.com/ and it was all a lot easier and i had a lot fewer issues. The library is very easy to impliment as a replacement for Pixastic.
Hope it helps Alex
ps worth mentioning that theres a lot of very cool presets too: http://camanjs.com/examples/presets
Adding [0]
made a big difference. Definitely did the trick for me. Give it a try.
Pixastic.revert($(this).find('.imageUrl')[0]);
Another thing is I had to create a VAR as pixastic creates a duplicate canvas.
This is my whole function
$(function () {
$('.col1.w1').mouseenter(function () {
var origImg = ($(this).find('.imageUrl'));
if (origImg.is('img')) {
Pixastic.process(origImg[0], 'blurfast', { amount: 2 });
}
});
$('.col1.w1').mouseout(function () {
var origImg = ($(this).find('.imageUrl'));
Pixastic.revert($(this).find('.imageUrl')[0]);
});
});
I figured out what was the problem.... I was trying to access the files locally. Images were not desaturating because of some "Security Error" due to local access to files. I installed Xampp to create a local server on my PC and then ran the file...and voila Pixastic started working.
精彩评论