jseidelin / pixastic Goto Github PK

any way to add support for managing background images in the jQuery plugin?

i often use multiple background images in a single div (mesh raster + actual image).
thanks

Love the code! Trying to revert using button but not working:

$('#bw').live('click',function(){
    $(".test").pixastic("desaturate");
});
$('#revert').live('click',function(){
    Pixastic.revert(".test");
});

hi i found this cool plugin and want to use with jquery but i couldn't get it to work

i'm using this

$('document').ready(function(){
    $('img').pixastic("blurfast", {amount:0.9});
});

but it dont seems to work

When integrating pixastic into other applications it would be handy to allow the worker control file to be saved in a different directory, right now it is hard coded to be in the same directory as the other pixastic files.

Why leave it out?

Hello,

The blurfast action on a transparent png results in black being added to image where it would normally be transparent.

I'm having trouble with pixastic library and jQueryUI sliders. I'm tring to do an Image Editor with this HTML5 Canvas library. I have this code:

$("#blur_slider").slider({                   
                value: 0.5,
                min: 0,
                max: 5,
                step: 0.1,
                slide: function(event, ui) {
                        $("#bright_slider_value").val(ui.value);
                        $("#test-image").pixastic("blurfast", {amount:ui.value})
                 }
        });

When I move the slider, the image is blurred properly, but when I put the slider on the value 0,the image still being blurred. Looks like it did the last blur on the blurred image and not on the original image.

Regards guys!

TimeOut

In Chrome 6+ it is possible to pass the ImageData object to a web worker, work on the pixels array and then return the object back to the main thread. This would also allow to show a progress bar.

An example can be found in Google's Chromabrush (http://www.chromabrush.com/):

* Main thread: http://code.google.com/p/chromabrush/source/browse/frontend/js/cb.filters.js
* Web worker: http://code.google.com/p/chromabrush/source/browse/frontend/js/filter.blur.js

This works in Firefox and works in the IE's you expect it to and works in other webkit browsers but not in Chrome.

When we flip an image that has been downsized on screen (img element is smaller than real image size) if we apply the fliph or flipv action pixastic draws a new canvas with the real image size instead of the constrained image.

Just wondering if this is done on purpose or if there is any reason not to do it by using the data array to draw the image

hello, I was wondering if is there any way to use the image source as a data:image
I've tried with:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

without success.

Thanks ;)

Commenting out line 13 in pixastic.jquery.js fixes jQuery 1.7 compatibility. Dirty but it works:

if (typeof jQuery != "undefined" && jQuery && jQuery.fn) {
    jQuery.fn.pixastic = function(action, options) {
        var newElements = [];
        this.each(
            function () {
                if (this.tagName.toLowerCase() == "img" && !this.complete) {
                    //return; <---- THIS
                }
                if (action === "revert") {
                    var res = Pixastic.revert(this);
                } else {
                    var res = Pixastic.process(this, action, options);
                }
                if (res) {
                    newElements.push(res);
                }
            }
        );
        if (newElements.length > 0)
            return jQuery(newElements);
        else
            return this;
    };

};

The Pixastic instances share the worker, so if you have two instances that you operate simultaneously the result is not what you want.

The easiest fix is to move var worker; from the shared Pixastic variable space to the constructor so each instance has its own worker:

diff --git a/pixastic.js b/pixastic.js
index c9fb188..e0a7f3f 100644
--- a/pixastic.js
+++ b/pixastic.js
@@ -11,8 +11,6 @@

  var Pixastic = (function() {

-    var worker;
-
     function createImageData(ctx, width, height) {
         if (ctx.createImageData) {
             return ctx.createImageData(width, height);
@@ -22,6 +20,8 @@
     }

     function Pixastic(ctx, workerControlPath) {
+        var worker;
+

         var P = {},
             width = ctx.canvas.width, 

There is probably a better way to do this, but I didn't spend time figuring it out.

This does not seem right - https://github.com/jseidelin/pixastic/blob/master/pixastic.effects.js#L621 .

Sorry, nm. Found a a workaround.

Hi! I would like to see support for Retina displays, namely iPhone/Android smartphone devices and MacBook Pro Retina displays.

Thank you!

Hi, I'm just curious. Could this library do things similar to ImageMagick or GraphicsMagick? I'd like to try and make Instagram-like effects in JavaScript. Thanks!

Do it.

Using the line tool, attempting to draw a perfectly vertical or horizontal line results in no line actually being drawn.

I tested using the editor on http://editor.pixastic.com/ on both chrome and firefox