This is the code i am using when i have image.src = "/local/directory/image.png" works but if i use image.src="http://remote/path" it loads the image but rest mousemove function do not work. How do you fix it?
copy and paste to test.htm
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function()
{
var image = new Image();
var ctx = $('#canvas')[0].getContext("2d");
image.src = "http://www.google.com/intl/en_com/images/srpr/logo3w.png";
//image.src = "/agents/google.png";
image.width="340";
image.height="220";
image.onload = function ()
{
ctx.drawImage(image, 0, 0, image.width, image.height);
}
$('#canvas').mousemove(function(e)
{
var canvasOffset = $(this).offset();
var canvasX = Math.floor(e.pageX - canvasOffset.left);
var canvasY = Math.floor(e.pageY - canvasOffset.top);
var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;
var pixelColor = "rgba("+pixel[0]+", "+pixel[1]+", "+pixel[2]+", "+pixel[3]+")";
$(document.body).css('background-color',pixelColor);
});
});
</script>
<body>
<canvas id="canvas" width="340" height="220"></canvas>
<body>
Follow up (copy paste):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/betamax/getImageData/master/jquery.getimagedata.min.js"></script>
<script>
$(document).ready(function()
{
// var image = new Image();
// var ctx = $('#canvas')[0].getContext("2d");
// //image.src = "http://www.google.com/intl/en_com/images/srpr/logo3w.png";
// image.src = "/agents/google.png";
//
// image.width="340";
// image.height="220";
// image.onload = function ()
// {
// ctx.drawImage(image, 0, 0, image.width, image.height);
// }
// $('#canvas').mousemove(function(e)
// {
// var canvasOffset = $(this).offset();
// var canvasX = Math.floor(e.pageX - canvasOffset.left);
// var canvasY = Math.floor(e.pageY - canvasOffset.top);
// var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
// var pixel = imageData.data;
//
// var pixelColor = "rgba("+pixel[0]+", "+pixel[1]+", "+pixel[2]+", "+pixel[3]+")";
// $(document.body).css('background-color',pixelColor);
//
// });
$.getImageData({
??url: "http://www.google.com/intl/en_com/images/srpr/logo3w.png",
??success: function(image){
?
????// Set up the canvas
????var can = document.getElementsByTagName('canvas')[0];
????var ctx = can.getContext('2d');
?
????// Set the canvas width and heigh to the same as the image
????$(can).attr('width', image.width);
????$(can).attr('height', image.height);
?
????// Draw the image on to the canvas
????ctx.drawImage(image, 0, 0, image.width, image.height);
?
????// Get the image data
????var image_data = ctx.getImageData(0, 0,? image.width, image.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);
$('#canvas').mousemove(function(e)
{
var canvasOffset = $(this).offset();
var canvasX = Math.floor(e.pageX - canvasOffset.left);
var canvasY = Math.floor(e.pageY - canvasOffset.top);
var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;
var pixelColor = "rgba("+pixel[0]+", "+pixel[1]+", "+pixel[2]+", "+pixel[3]+")";
$(document.body).css('background-color',pixelColor);
});
?
??},
??error: function(xhr, text_status){
????// Handle your error here
??}
});
});
</script>
<body>
<canvas id="canvas" width="340" height="220"></canvas>
<body>
See Question&Answers more detail:
os 
