最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to use canvas to modify images from another domain? - Stack Overflow

programmeradmin2浏览0评论

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>
Share Improve this question edited Nov 2, 2011 at 23:36 asked Nov 2, 2011 at 22:40 user285594user285594
Add a ment  | 

3 Answers 3

Reset to default 7

It'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.

发布评论

评论列表(0)

  1. 暂无评论