how to save pic from javascript to input=field

Question

I have a script for taking webcam picture that I took from here webcam click . But instead of save it, I want to put that picture in input="file" That transfer it late in PHP file with other data from Form.

So here is a js part of function webcam.save(); for more details about it you can go to a link that I provided in the beginning.

onSave: function(data) {

    var col = data.split(";");
    var img = image;

    if (false == filter_on) {

        for(var i = 0; i < 320; i++) {
            var tmp = parseInt(col[i]);
            img.data[pos + 0] = (tmp >> 16) & 0xff;
            img.data[pos + 1] = (tmp >> 8) & 0xff;
            img.data[pos + 2] = tmp & 0xff;
            img.data[pos + 3] = 0xff;
            pos+= 4;
        }

    } else {

        var id = filter_id;
        var r,g,b;
        var r1 = Math.floor(Math.random() * 255);
        var r2 = Math.floor(Math.random() * 255);
        var r3 = Math.floor(Math.random() * 255);

        for(var i = 0; i < 320; i++) {
            var tmp = parseInt(col[i]);

            if (id == 0) {
                r = (tmp >> 16) & 0xff;
                g = 0xff;
                b = 0xff;
            } else if (id == 1) {
                r = 0xff;
                g = (tmp >> 8) & 0xff;
                b = 0xff;
            } else if (id == 2) {
                r = 0xff;
                g = 0xff;
                b = tmp & 0xff;
            } else if (id == 3) {
                r = 0xff ^ ((tmp >> 16) & 0xff);
                g = 0xff ^ ((tmp >> 8) & 0xff);
                b = 0xff ^ (tmp & 0xff);
            } else if (id == 4) {

                r = (tmp >> 16) & 0xff;
                g = (tmp >> 8) & 0xff;
                b = tmp & 0xff;
                var v = Math.min(Math.floor(.35 + 13 * (r + g + b) / 60), 255);
                r = v;
                g = v;
                b = v;
            } else if (id == 5) {
                r = (tmp >> 16) & 0xff;
                g = (tmp >> 8) & 0xff;
                b = tmp & 0xff;
                if ((r+= 32) < 0) r = 0;
                if ((g+= 32) < 0) g = 0;
                if ((b+= 32) < 0) b = 0;
            } else if (id == 6) {
                r = (tmp >> 16) & 0xff;
                g = (tmp >> 8) & 0xff;
                b = tmp & 0xff;
                if ((r-= 32) < 0) r = 0;
                if ((g-= 32) < 0) g = 0;
                if ((b-= 32) < 0) b = 0;
            } else if (id == 7) {
                r = (tmp >> 16) & 0xff;
                g = (tmp >> 8) & 0xff;
                b = tmp & 0xff;
                r = Math.floor(r / 255 * r1);
                g = Math.floor(g / 255 * r2);
                b = Math.floor(b / 255 * r3);
            }

            img.data[pos + 0] = r;
            img.data[pos + 1] = g;
            img.data[pos + 2] = b;
            img.data[pos + 3] = 0xff;
            pos+= 4;
        }
    }

    if (pos >= 0x4B000) {
        ctx.putImageData(img, 0, 0);
        pos = 0;
    }
},

html:

<input type="file" id="pic">