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=".6.4/jquery.min.js"></script>
<script>
$(document).ready(function()
{
var image = new Image();
var ctx = $('#canvas')[0].getContext("2d");
image.src = ".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=".6.4/jquery.min.js"></script>
<script type="text/javascript" src=".getimagedata.min.js"></script>
<script>
$(document).ready(function()
{
// var image = new Image();
// var ctx = $('#canvas')[0].getContext("2d");
// //image.src = ".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: ".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>
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./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./intl/en_/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./ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.github./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./intl/en_/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./intl/en_/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>
3 Answers
Reset to default 7It's not possible to directly read an image from another domain.
However, manipulate images from another domain can be achieved by getting a base-64 string interpretation of the image, and use it.
This feature is implemented in jQuery by the $.imagedata plugin, which can be downloaded at this site.
According to the specs you cannot use getImageData when the source of the canvas is ing from an external URL.
From the specs:
Whenever the getImageData() method of the 2D context of a canvas element whose origin-clean flag is set to false is called with otherwise correct arguments, the method must throw a SecurityError exception.
For security reasons you cannot use getImageData when the image is external. Read this article for more information.
Depending on your browser, if you run the code locally with a local image you may also get an error.
However if you use this code on a server and access it via a domain name and the image is hosted on the same server, the code will work fine.
Edit:
but i need to scan from scanner which is located in remote as randomIP/directory/scaner.jpeg?
Then maybe your solution should not involve client-side, in-browser JS. Can you not use another language like PHP that doesn't have these sorts of restrictions? Or why not use JS under a different environment that doesn't restrict you the way browsers do?
I remend PHP because it's easy to use and has the GD library.