canvasFromImage

Use img-to-json.appspot.com and a script tag to access images on another domain. No libraries required.

HTML

<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael.js"></script>
<script src="http://rawgit.com/jfsiii/close-pixelate/97fc072f0b036a25ba77e06e71b979ca99cafa41/close-pixelate.js"></script>
<script src="http://rawgit.com/jfsiii/close-pixelate/97fc072f0b036a25ba77e06e71b979ca99cafa41/canvasFromImage.js"></script>
<h1>PIXEL</h1>
<h2></h2>

<form>
<center>
    <fieldset>
        <label for="url_field">URL: </label>
        <input value="http://cdn.bitelia.com/files/2007/05/iconos.png" id="url_field" /> 
        <button id="get_image" type="button">Get Image</button>
        <button id="invert" type="button" class="manipulate" disabled>Invert</button>
        <button id="close_pixelate" class="manipulate" type="button" disabled>Close Pixelate</button>
    </fieldset>
<input type="text" id="info" value=""> <input type="text" id="colorinfo" value="">    
    <div id="colorResult" > </div>    
</center>
</form>
<div id="view"></div>
<div id="view1"></div>
<hr>


<footer>
    <p><a href=""></a>  <a href="></a></p>
    <p><a href="http://desandro.com/resources/close-pixelate/">Close Pixelate</a> by <a href="http://desandro.com/">David Desandro</a>
<br>
Position and pickColor   Josepssv     
</footer>

CSS

body {
                font-family:arial;
                margin: 0;
                padding: 0;
                text-align: center;
                background-color:#ddf;
}
h1 { font-size: 2.5em; color: }
h2 { font-size: 1.5em; }
#instructions { margin-top: 2em; }
label { font-weight: bold; }
fieldset { width: 100%; }
#url_field{ width: 40ex; }
#colorResult { width: 400px; height:20px; background-color:#fff}
#view{display:inline; }
#view1{display:inline; }

JavaScript

$("#get_image").bind('click', getImageClicked);
var pos = { x: 0, y: 0 },
    coloract='rgb(255,255,255)'
    colorpal='rgb(255,255,255)'

    
function getImageClicked(e) 
{
    var url = $("#url_field").val(),
        el = document.createElement('img');

    el.src = url;
    // from canvasFromImage.js
    canvasFromImage(el, onCanvasReady);
}

function onCanvasReady(canvas, image)
{

    
    var existing = document.getElementsByTagName('canvas')[0],
        hr = document.getElementsByTagName('hr')[0];

    if (existing){ 
        existing.parentNode.replaceChild(canvas, existing); 
    
    } else { 
          document.body.insertBefore(canvas, hr);
                  
     }
                    ////////////////
      var c = canvas.getContext('2d'),
          w = canvas.width
          h = canvas.height
          Ry=h
          Rx=0
          Ry1=h
          Rx1=0
           $('#colorResult').css("width",(w+80+10))
          if(R!= undefined){clearPaper(R)}  
          if(R1!= undefined){clearPaper(R1)}
      //$('#view').html('')  
      R = Raphael('view',40, h);
      R.rect(0,0,40,h).attr({fill:coloract})
      R1 = Raphael('view1',40, h);
      R1.rect(0,0,40,h).attr({fill:coloract})

          
        canvas.id='myimage'
        $('#myimage').mousemove(function(e){
        pos.x = e.pageX - this.offsetLeft;
        pos.y = e.pageY - this.offsetTop;
           
        $('#info').val(pos.x.toFixed(1)+' '+pos.y.toFixed(1));
         readpixel(canvas,pos.x,pos.y)  
       });
                                                    
       $('#myimage').click(function(e){
          //drawrect()
           colorpal=coloract
      });     
                   
                ///////////////
           
    $("button.manipulate").attr('disabled', false);
    $("#invert").bind('click', function (e) { invert(canvas); });
    $("#close_pixelate").bind('click', function(e){ pixelate(canvas);
                                                   
                        ...