pixastic
JavaScript Image Processing Library
I have a canvas element with an image into.
Now I try to rotate the image in the canvas when I click a button:
$("#rotateC").live('click',function(e) {
e.preventDefault();
console.log("rotateC");
Pixastic.process(firstImg, 'rotate',
{
'angle': +90,
'leaveDOM': true
},
function(firstImg) {
ctx.drawImage(firstImg, 0, 0);
}
);
});
The image will rotate once and then if I click the button again, nothing happens.
Do you know what the problem is?
Source: (StackOverflow)
I'm having an issue with pixastic and jquery tools overlay. I want overlay to open when an image is clicked and that image to be desaturated.
Desaturation and overlay work properly, but when the overlay is closed the image is not clickable anymore and does not revert back to the original color. Here is a test page (http://thesupercow.com/clients/overlaytest/).
Any help would be appreciated.
Source: (StackOverflow)
I'm working on an image editor and I have to create some pixel manipulation methods applied on RaphaelJS images. I am considering using Pixastic library for pixel manipulation.
The problem is the I cannot link RaphaelJS image to Pixastic since RaphaelJS creates a SVG element and Pixastic requires an 'img' tag.
I have tried something like this but with no success
img = r.image("Assets/test.jpg", 40, 40, 260, 150);
img.node=Pixastic.process(img.node, "desaturate");
Source: (StackOverflow)
On http://www.pixastic.com/lib/docs/actions/blurfast/ , their tutorial shows how to blur a single image.
var img = new Image();
img.onload = function() {
Pixastic.process(img, "blurfast", {amount:0.5});
} document.body.appendChild(img);
img.src = "myimage.jpg";
How would I go about blurring all the images on a page and then making a button to revert them back to their original unblurred state?
Thanks in advance!
Source: (StackOverflow)
I have seen this effect where when mouse is over an image, that image glows up. I am not talking about a border glow, I mean the colors in the image glow up. I found that there is a library called Pixastic, the glow affect can be seen here.
http://www.pixastic.com/lib/docs/actions/glow/
Is there a way to apply this effect on mouse hover on the image? I am trying to make a button that glows up.
Thanks!
Source: (StackOverflow)
<script type="text/javascript">
$(function() {
jQuery(".attachment-thumbnail")
.pixastic("desaturate")
.pixastic("sepia")
});
</script>
I got this pixastic script working, now I need to revert the effects on rollover. I don't really know how to do that though.
The link is here if you want to take a look, http://mentor.com.tr/wp/?page_id=218
Source: (StackOverflow)
I use a javascript image processing library to manipulate an image, and when I'm done I want to have the possibility to save the image (a new file) to the server and keep track of it in a database. The database part is no problem, but how do I save the image without losing the manipulation done?
Are there any libraries for that or is it easiest to just do it myself?
Source: (StackOverflow)
In my web app, I need to desaturate/grayscale some pictures. I am using the following CSS to achieve that:
.grayscale {
filter: grayscale(100%); /* Current draft standard */
-webkit-filter: grayscale(100%); /* New WebKit */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%); /* Not yet supported in Gecko, Opera or IE */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
-webkit-filter: grayscale(1); /* Old WebKit */
}
This covers a wide array of browser. The problem is that some older ones like Safari 5 are not affected by it. I know there are some jQuery libraries like Pixastic that do support those older browsers but I would like to use as less jQuery as possible to make my page load as fast as possible. Therefore, my question is: it possible to check if the image was grayscaled and if not, use a jQuery plugin like Pixastic to do so?
Source: (StackOverflow)
I have a set of images that have to be desaturated on load and in colour on hover. I've tried this but the hover doesn't work, the desaturation on load it does though:
$(window).load(function () {
$(".box img").pixastic("desaturate");
$(".box img").mouseenter(function (e) {
var self = $(this);
Pixastic.revert(self); // make it colour
});
$(".box img").mouseleave(function (e) {
// make it black n white again
$(this).pixastic("desaturate");
});
});
I've seen some other posts here but none seem to work.
What am I doing wrong?
Source: (StackOverflow)
I have a strange conflict between Pixastic and my canvas listeners.
When I use a Pixastic function on my canvas the listeners of my canvas after this operation don't work. I analyzed my canvas using the Pixastic plugin and discovered that pixastic added some attributes like tabindex (that I think conflicted with the listener).
This is my canvas before and after:
//Before
<canvas id="mycanvas" width="727" height="600" style="border: 1px solid black; left: 36.5px; top: 21px;"></canvas>
//After
<canvas id="mycanvas" class="" width="600" height="727" style="border: 1px solid black; left: 36.5px; top: 21px;" title="" tabindex="-1"></canvas>
The listeners that i use are mousedown, mouseup, mousemove. Someone can help me?
Source: (StackOverflow)
The Pixastic "blend" filter seems to work fine on their demo site in IE9, but the actual downloadable code does not. I believe it's due to the "isIE" detection code in the pixastic.core.js file at line 426:
isIE : function() {
return !!document.all && !!window.attachEvent && !window.opera;
}
Whenever Pixastic.Client.isIE() is called, it picks up IE9 with that test. If I comment out the block at line 204 which starts
if (imageIsCanvas && Pixastic.Client.isIE()) {
the Blend effect works fine in IE9.
Is there a snippet I could replace the "ieIE" function shown above with to keep old versions of IE away from the effects while allowing IE9? Or, if I have the detection wrong, where is it and how can I modify it to suit? Many thanks.
Source: (StackOverflow)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 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!
Source: (StackOverflow)
I am using appcelerator titanium and i am trying to build a mobile app that allows you to change an imageview brightness and contrast by using touch events.
It is not possible by using Titanium standard features, so i am guessing if i can import some external libraries like pixastic that can help me do so.
is it possible? how can i do that?
Thanks
Source: (StackOverflow)
I'm using the Pixastic plugin in JavaScript. I have a table filled with images that are blurred. When I go over them with the mouse I want them to get normal. And when the mouse leaves an image I want it to blur back. For some reason my code doesn't work. Here's the code:
Before, I copied the wrong code part, and I apologize for that this one is the one I'm asking about.
<script type="text/javascript">
$(document).ready(function(){
$('.photography').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
function () {Pixastic.revert('this');};
}
else {
function(){Pixastic.process('this', "blurfast", {amount:0.5});};
}
});
});
</script>
OK, so I managed to find my old code that actually works half way (when I hover over the image for the first time it works, but when I try for the second time it doesn't).
$(document).ready(function(){
var blur = function() {Pixastic.process(this, "blurfast", {amount:0.5});};
var unblur = function () {Pixastic.revert(this);};
$('.photography').each(blur);
$('.photography').hover(unblur,blur);
});
OK, so now I'm also adding the code for the function called revert:
revert : function(img) {
if (Pixastic.Client.hasCanvas()) {
if (img.tagName.toLowerCase() == "canvas" && img.__pixastic_org_image) {
img.width = img.__pixastic_org_width;
img.height = img.__pixastic_org_height;
img.getContext("2d").drawImage(img.__pixastic_org_image, 0, 0);
if (img.parentNode && img.parentNode.replaceChild) {
img.parentNode.replaceChild(img.__pixastic_org_image, img);;
}
return img;
}
}
else
if (Pixastic.Client.isIE()) {
if (typeof img.__pixastic_org_style != "undefined")
img.style.cssText = img.__pixastic_org_style;
}
}
Source: (StackOverflow)
I try to rotate my image when I click(using Pixastic) but I can only rotate 1 time, how can I go on rotating each time I click to the image
$('#tok').click(function() {
$("#tok").pixastic("rotate", {angle:90});
});
Source: (StackOverflow)