I am having trouble processing my image using HTML5 Canvas and Javascript Filters from Pixastic, what am I doing wrong?

问题

The Javascript "pixastic.custom (5) file was created from Pixastic using just the core code and "lighten" filter. The code works to redraw the image in the canvas in a Mozilla Broweser, however it is not filtering it. The HTML5 is coding the canvas, drawing the image on the canvas, and supposed to be redrawing the image through the Javascript Filter on to the canvas where it would then be lightened. Does any of this make sense?

Here is my code below:

<!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript" charset="utf-8" src="pixastic.custom  (5).js"></script>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
        #myCanvas {
            border: 1px solid #9C9898;
        }
    </style>
    <script>
        window.onload = function() {
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            var imageObj = new Image();
            imageObj.onload = function() {
                var options ={};
                Pixastic.process(imageObj, "lighten", options)
                    {amount : .5
                };
                options.resultCanvas;
                context.drawImage(imageObj, 80, 60);
            }

            imageObj.src = "IMAG8703.jpg";
        };
    </script>
</head>
<body>
    <canvas id="myCanvas" width="2000" height="4000"></canvas>
</body>
    </html>

Thank you for looking over my code...I really have no idea why it isn't working. Everything is in the same directory and everything matches up. The code is combined from the PIXASTIC site with HTML5 Canvas framework everything should work smoothly...

回答1:

The problem is at the 7th line from the script tag. Not sure what you are trying to do but there's gonna be an error.

This is legal.

Pixastic.process(imageObj, "lighten", {amount : .5});

来源：https://stackoverflow.com/questions/10952343/i-am-having-trouble-processing-my-image-using-html5-canvas-and-javascript-filter

标签

javascript

html5

image-processing

html5-canvas

pixastic