Pixastic ColorAdjust Type Error Undefined

60 Views Asked by At

I'm really hoping someone will be able to help... I have double and triple and quadruple checked that the Pixastic libraries are loading.

Here is my HTML code:

In the <head> tag:

<script src="pathto.../pixastic.js"></script>
<script src="pathto.../pixastic.effects.js"></script>
<script src="pathto.../pixastic.worker.js"></script>

In the <body> tag:

<div id="pattern-div" class="">
<div id="preview-background-print"><img id="preview-image" src="/image.png"/></div>
</div>

Here is the jQuery. I am omitting the formulae that compute the RGB offsets because they don't seem relevant. But let me know if they are. :)

$('#preview-image').pixastic('coloradjust',{
    red : pixadjustR,
    green : pixadjustG,
    blue : pixadjustB
});

This is the error I'm getting:

TypeError: $('#preview-image').pixastic is not a function. (In '$('#preview-image').pixastic('coloradjust',{
        red : pixadjustR,
        green : pixadjustG,
        blue : pixadjustB
    })', '$('#preview-image').pixastic' is undefined)`

(I have also tried Pixastic.process(document.getElementById("preview-image"), "coloradjust"... and get Pixastic.process is not a function etc.

1

There are 1 best solutions below

1
SleepProgger On

Did you include the pixastic jquery plugin ?

If you want to do it without the jquery plugin this is similar to how they do it in the demo:

function pixastic(img, method, options){
    // Copy image to canvas
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    // Create Pixastic object and execute filter.
    // The second parameter is the path to the folder containing the worker script 
    var P = new Pixastic(ctx);
    P[method](options).done(function(){
        // Copy the data back to the image as dataURI
        img.src = canvas.toDataURL();
    });
}
pixastic($('img')[0], "coloradjust", {
  red : pixadjustR,
  green : pixadjustG,
  blue : pixadjustB
})