I have tried to make it work on the web through PHP. The code is working fine in JAVA. But when I convert it to JAVASCRIPT, there is some problem with tint and save functions. When i click tint or save, the screen just freezes.
My code is:
/* @pjs preload="synthesizer.jpg";*/
// the image that is being edited
PImage originalImage;
float imageWidth;
// images to use for button logos
PImage facebookLogo, cameraLogo, rotateLogo;
// the overlay images that can be applied to the image
PImage [] overlays;
// images for the tint buttons
PImage [] tintImages;
// the tint colors we can apply
color [] tints;
// radio buttons to trigger tints and overlays
RadioButtons tintButtons;
RadioButtons overlayButtons;
// button to load a file from the camera or file
Button fileButton;
// button to post to Facebook
Button FBButton;
Button tint;
Button overlay;
Button rotateButton;
Button invert;
Button threshhold;
Button erode;
Button dilate;
Button save;
Slider blur;
Button poster;
Button brush1;
// whether the user interface is showing
boolean displayGUI = false;
// this stops you showing a file temporarily as
// we load a new file
boolean updateImage = false;
boolean pos = false;
boolean inv = false;
boolean thr = false;
boolean ero = false;
boolean dil = false;
boolean blu = false;
boolean sav = false;
boolean br1 = false;
// post to facebook next frame
boolean post = false;
// the angle of rotation of the image
float angle = 0;
// the position of the center of the image,
// this allows you to scroll it around
int imageCenterX;
// loads a new image when you get one from the camera
void setImage(String url) {
//console.log("loading: "+url);
originalImage = loadImage(url);
updateImage = true;
loop();
}
void setup()
{
size(480, 640);
imageCenterX = width/2;
originalImage = loadImage("synthesizer.jpg");
facebookLogo = loadImage("asset.f.logo.lg.png");
cameraLogo = loadImage("cameraLogo.png");
rotateLogo = loadImage("rotateLogo.png");
tints = new color[4];
tints[0] = color(0, 255, 100);
tints[1]= color(120, 100, 0);
tints[2] = color(0, 100, 160);
tints[3] = color(160, 60, 10);
/*tintImages = new PImage[4];
tintImages[0] = loadImage("tintImage0.png");
tintImages[1] = loadImage("tintImage1.png");
tintImages[2] = loadImage("tintImage2.png");
tintImages[3] = loadImage("red.png");*/
overlays = new PImage[8];
overlays[0] = loadImage("overlay1.png");
overlays[1] = loadImage("overlay2.png");
overlays[2] = loadImage("overlay1_old.png");
overlays[3] = loadImage("fog.png");
overlays[4] = loadImage("overlay3.png");
overlays[5] = loadImage("overlay7.png");
overlays[6] = loadImage("overlay11.png");
overlays[7] = loadImage("o10.png");
overlayButtons = new RadioButtons(overlays.length, width-70, 50, 64, 48, VERTICAL);
