Untitled

<!DOCTYPE html>

<html>
<head>
    <title>Image manipulation in html5 canvas | Qoncious.com</title>
</head>

<body>

<br>
<form id="imageurl">
    <input type="url" size="100" name="source" value="http://i.imgur.com/0NuF4uh.jpg">
</form>
<br>
<button onclick="loadimage()">Load Image</button>
<br>
<button onclick="reddrop(imageurl.elements[0].value)">Red drop</button>
<button onclick="reddraw(imageurl.elements[0].value)">Red draw</button>
<br>
<button onclick="bluedrop(imageurl.elements[0].value)">Blue drop</button>
<button onclick="bluedraw(imageurl.elements[0].value)">Blue draw</button>
<br>
<button onclick="greendrop(imageurl.elements[0].value)">Green drop</button>
<button onclick="greendraw(imageurl.elements[0].value)">Green draw</button>
<br>
<canvas id="canvas" width="1600" height="1200">
<p> No canvas support! </p>
</canvas>
<br>
Image below is used for restoring channels to the working image.
<br>
<canvas id="canvasrestore" width="1600" height="1200">
<p> No canvas support! </p>
</canvas>

<script type="text/javascript">

function loadimage()
{
    document.getElementById('imageurl').size = "100";
    var source = document.getElementById('imageurl');
    var canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');

    var image = new Image();
    image.onload = function()
    {
        canvas.height = image.height;
        canvas.width = image.width;
        var imageX = Math.ceil(canvas.width/2) - Math.ceil(image.width/2);
        var imageY = Math.ceil(canvas.height/2) - Math.ceil(image.height/2);

        context.drawImage(image, imageX, imageY);
        backup(source.elements[0].value);

    }
    image.crossOrigin = '';
    image.src = source.elements[0].value;
}

function backup(url)
{
    var canvasrestore = document.getElementById('canvasrestore');
    var canvas = document.getElementById('canvas');
    contextrestore = canvasrestore.getContext('2d');
    context = canvas.getContext('2d');
    var image = new Image();
    image.crossOrigin = '';
    image.src = url;

    canvasrestore.height = image.height;
    canvasrestore.width = image.width;

    var imageX = Math.ceil(canvasrestore.width/2) - Math.ceil(image.width/2);
    var imageY = Math.ceil(canvasrestore.height/2) - Math.ceil(image.height/2);
    var imageData = context.getImageData(imageX, imageY, image.width, image.height);
    var dataArray = imageData.data;

    contextrestore.putImageData(imageData, imageX, imageY);
}

function reddraw(url)
{
    var canvasrestore = document.getElementById('canvasrestore');
    var canvas = document.getElementById('canvas');
    contextrestore = canvasrestore.getContext('2d');
    context = canvas.getContext('2d');
    var image = new Image();
    image.crossOrigin = '';
    image.src = url;

    var imageX = Math.ceil(canvas.width/2) - Math.ceil(image.width/2);
    var imageY = Math.ceil(canvas.height/2) - Math.ceil(image.height/2);
    var imageData = context.getImageData(imageX, imageY, image.width, image.height);
    var restoreData = contextrestore.getImageData(imageX, imageY, image.width, image.height);
    var dataArray = imageData.data;
    var restoreArray = restoreData.data;

        for(var i = 0; i < dataArray.length; i += 4)
        {
            var red = restoreArray[i]; // 0 to 255
            var green = dataArray[i + 1]; // 0 to 255
            var blue = dataArray[i + 2]; // 0 to 255
            var alpha = dataArray[i + 3]; // 0 to 255

            dataArray[i] = 1 * red;
            dataArray[i + 1] = 1 * green;
            dataArray[i + 2] = 1 * blue;
            dataArray[i + 3] = 1 * alpha;
        }

        context.putImageData(imageData, imageX, imageY);
}

function greendraw(url)
{
    var canvasrestore = document.getElementById('canvasrestore');
    var canvas = document.getElementById('canvas');
    contextrestore = canvasrestore.getContext('2d');
    context = canvas.getContext('2d');
    var image = new Image();
    image.crossOrigin = '';
    image.src = url;

    var imageX = Math.ceil(canvas.width/2) - Math.ceil(image.width/2);
    var imageY = Math.ceil(canvas.height/2) - Math.ceil(image.height/2);
    var imageData = context.getImageData(imageX, imageY, image.width, image.height);
    var restoreData = contextrestore.getImageData(imageX, imageY, image.width, image.height);
    var dataArray = imageData.data;
    var restoreArray = restoreData.data;

        for(var i = 0; i < dataArray.length; i += 4)
        {
            var red = dataArray[i]; // 0 to 255
            var green = restoreArray[i + 1]; // 0 to 255
            var blue = dataArray[i + 2]; // 0 to 255
            var alpha = dataArray[i + 3]; // 0 to 255

            dataArray[i] = 1 * red;
            dataArray[i + 1] = 1 * green;
            dataArray[i + 2] = 1 * blue;
            dataArray[i + 3] = 1 * alpha;
        }

        context.putImageData(imageData, imageX, imageY);
}

function bluedraw(url)
{
    var canvasrestore = document.getElementById('canvasrestore');
    var canvas = document.getElementById('canvas');
    contextrestore = canvasrestore.getContext('2d');
    context = canvas.getContext('2d');
    var image = new Image();
    image.crossOrigin = '';
    image.src = url;

    var imageX = Math.ceil(canvas.width/2) - Math.ceil(image.width/2);
    var imageY = Math.ceil(canvas.height/2) - Math.ceil(image.height/2);
    var imageData = context.getImageData(imageX, imageY, image.width, image.height);
    var restoreData = contextrestore.getImageData(imageX, imageY, image.width, image.height);
    var dataArray = imageData.data;
    var restoreArray = restoreData.data;

        for(var i = 0; i < dataArray.length; i += 4)
        {
            var red = dataArray[i]; // 0 to 255
            var green = dataArray[i + 1]; // 0 to 255
            var blue = restoreArray[i + 2]; // 0 to 255
            var alpha = dataArray[i + 3]; // 0 to 255

            dataArray[i] = 1 * red;
            dataArray[i + 1] = 1 * green;
            dataArray[i + 2] = 1 * blue;
            dataArray[i + 3] = 1 * alpha;
        }

        context.putImageData(imageData, imageX, imageY);
}

function reddrop(url)
{
    var canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
    var image = new Image();
    image.crossOrigin = '';
    image.src = url;

    var imageX = Math.ceil(canvas.width/2) - Math.ceil(image.width/2);
    var imageY = Math.ceil(canvas.height/2) - Math.ceil(image.height/2);
    var imageData = context.getImageData(imageX, imageY, image.width, image.height);
    var dataArray = imageData.data;

        for(var i = 0; i < dataArray.length; i += 4)
        {
            var red = dataArray[i]; // 0 to 255
            var green = dataArray[i + 1]; // 0 to 255
            var blue = dataArray[i + 2]; // 0 to 255
            var alpha = dataArray[i + 3]; // 0 to 255

            dataArray[i] = 0 * red;
            dataArray[i + 1] = 1 * green;
            dataArray[i + 2] = 1 * blue;
            dataArray[i + 3] = 1 * alpha;
        }

        context.putImageData(imageData, imageX, imageY);
}

function bluedrop(url)
{
    var canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
    var image = new Image();
    image.crossOrigin = '';
    image.src = url;

    var imageX = Math.ceil(canvas.width/2) - Math.ceil(image.width/2);
    var imageY = Math.ceil(canvas.height/2) - Math.ceil(image.height/2);
    var imageData = context.getImageData(imageX, imageY, image.width, image.height);
        var dataArray = imageData.data;

        for(var i = 0; i < dataArray.length; i += 4)
        {
            var red = dataArray[i]; // 0 to 255
            var green = dataArray[i + 1]; // 0 to 255
            var blue = dataArray[i + 2]; // 0 to 255
            var alpha = dataArray[i + 3]; // 0 to 255

            dataArray[i] = 1 * red;
            dataArray[i + 1] = 1 * green;
            dataArray[i + 2] = 0 * blue;
            dataArray[i + 3] = 1 * alpha;
        }

        context.putImageData(imageData, imageX, imageY);
}

function greendrop(url)
{
    var canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
    var image = new Image();
    image.crossOrigin = '';
    image.src = url;

    var imageX = Math.ceil(canvas.width/2) - Math.ceil(image.width/2);
    var imageY = Math.ceil(canvas.height/2) - Math.ceil(image.height/2);
    var imageData = context.getImageData(imageX, imageY, image.width, image.height);
        var dataArray = imageData.data;

        for(var i = 0; i < dataArray.length; i += 4)
        {
            var red = dataArray[i]; // 0 to 255
            var green = dataArray[i + 1]; // 0 to 255
            var blue = dataArray[i + 2]; // 0 to 255
            var alpha = dataArray[i + 3]; // 0 to 255

            dataArray[i] = 1 * red;
            dataArray[i + 1] = 0 * green;
            dataArray[i + 2] = 1 * blue;
            dataArray[i + 3] = 1 * alpha;
        }

        context.putImageData(imageData, imageX, imageY);
}
</script>

</body>
</html>