$.getImageData

Use $.getImageData plugin (which uses $.JSONP plugin)

HTML

<script src="http://github.com/betamax/getImageData/raw/master/jquery.getimagedata.min.js"></script>
<h1>Get Remote Image Data</h1>
<h2>Example: Getting an image from another domain and then inverting it</h2>
<p>Enter a URL in the URL field or just leave the default URL and press "Get image", then "Invert".</p> 
<br /> 
<div id="controls"> 
    <strong>URL: </strong>&nbsp;&nbsp;
    <input value="https://bayangolhotel.mn/qr-code.png" id="url_field" /> 
    <button id="invert">Invert</button> 
    <button id="get_image">Get Image</button>    
</div> 
<br style="clear:both"/> 
<canvas width="640" height="480"></canvas> 

<div class="hr"><hr></div> 

<footer> 
    $.getImageData was created by <a href="http://www.maxnov.com/">Max Novakovic</a> in association with 
    <a href="http://www.disturbmedia.com/" title="Disturb Media" data-target="external"><img src="http://media.maxnov.com/getimagedata/img/disturb-white.png" width="98" height="24" alt="Disturb Media" id="disturb-logo"></a> 
</footer>

JavaScript

// Set up the canvas
    var can = document.getElementsByTagName('canvas')[0];
    var ctx = can.getContext('2d');

    $("#get_image").click(function() { alert();
        var url = $("#url_field").val();
        $.getImageData({
            url: url,
            success: function(image) {

                // Set the canvas width and heigh to the same as the image
                $(can).attr('width', image.width);
                $(can).attr('height', image.height);
                $(can).css({
                    'background-color': 'none',
                    'border-color': '#fff'
                });

                // Draw the image on to the canvas
                ctx.drawImage(image, 0, 0, image.width, image.height);

            },
            error: function(xhr, text_status) {
                // Handle your error here
            }
        });


    $("#invert").click(function() {

        var width = $(can).width(),
            height = $(can).height();

        // Get the image data
        var image_data = ctx.getImageData(0, 0, width, height);
        var image_data_array = image_data.data;

        // Invert every pixel
        for (var i = 0, j = image_data_array.length; i < j; i += 4) {
            image_data_array[i] = 255 - image_data_array[i];
            image_data_array[i + 1] = 255 - image_data_array[i + 1];
            image_data_array[i + 2] = 255 - image_data_array[i + 2];
        }

        // Write the image data to the canvas
        ctx.putImageData(image_data, 0, 0);
    });

});
// To open links in new window
$('a[data-target="external"]').click(function(e) {
    window.open($(this).attr("href"));
    return false;
});