Automatic click on a specific area in the image

Question

This is my simple HTML page, and I want to target a specific area so that it automatically clicks on the blue area after the page loads. Can someone create HTML, PHP or JavaScript file for me?

HTML page: http://imgily.com/Speific-Area-Click.html

Example screenshot of a specific area:

Answer 1

You can use html2canvas to capture an area of ​​the screen and convert to canvas.
Then you can repeat the thought of the canvas and find the blue pixel (make algo).

// Do something like that
html2canvas(document.body, {
    onrendered: function(canvas) {
        var context = canvas.getContext();
        var imgData = context.getImageData(0, 0, canvas.width,canvas.height);
        var data = imgData.data;

        // enumerate all pixels
        // each pixel r,g,b,a datum are stored in separate sequential array elements
        // from : http://stackoverflow.com/questions/17714742/looping-through-pixels-in-an-image

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


        }
    }
});

Answer 2

document.ready jquery.. (, CSS , )

<input type='button' id='button' />

click jquery

<script type="text/javascript">
    $( document ).ready(function() {
      $("#button").trigger('click'); 
    });
</script>

<script type="text/javascript">
    jQuery(function(){
       jQuery('#button').click();
    });
</script>

html- script,

<script type="text/javascript">
    $( document ).ready(function() {
      $("#google_image_div a").trigger('click'); 
    });
</script>

, - ..