自动单击图像中的特定区域

Question

这是我的简单HTML页面，我希望将特定区域定位为在页面加载后自动点击蓝色区域。任何人都可以为我创建HTML，PHP或JavaScript文件吗？

HTML页面：http://imgily.com/Speific-Area-Click.html

特定区域的示例屏幕截图：

Answer 1

您可以使用html2canvas捕获屏幕区域并转换为画布。
然后你可以迭代思考画布并找到蓝色像素（做一个算法）..

// 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's 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

你可以使用jquery的document.ready函数.. 在该蓝色区域放置一个按钮（即您可以将一些css应用于该按钮，这将使其具有相同的外观和感觉）

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

您可以使用jquery

触发点击事件

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

或

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

修改

对于你提供的html链接，你应该使用如下脚本

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

如果需要任何帮助，请告诉我..