Javascript 如何使用画布修改来自其他域的图像？_Javascript_Jquery_Canvas_Html5 Canvas

Javascript 如何使用画布修改来自其他域的图像？

javascript jquery canvas html5-canvas

Javascript 如何使用画布修改来自其他域的图像？,javascript,jquery,canvas,html5-canvas,Javascript,Jquery,Canvas,Html5 Canvas,这是我在使用image.src=“/local/directory/image.png”时使用的代码，但是如果我使用image.src=”http://remote/path“它加载图像，但rest mousemove功能不起作用。你怎么修理它复制并粘贴到test.htm <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></

这是我在使用

image.src=“/local/directory/image.png”

时使用的代码，但是如果我使用

image.src=”http://remote/path“

它加载图像，但rest mousemove功能不起作用。你怎么修理它

复制并粘贴到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>


$（文档）.ready（函数（）
{
var 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=函数（）
{
ctx.drawImage（图像，0，0，image.width，image.height）；
}
$（'#canvas'）.mousemove（函数（e）
{ 
var canvasOffset=$（this.offset（）；
var canvasX=数学地板（e.pageX-canvasOffset.left）；
var canvasY=数学地板（e.pageY-canvasOffset.top）；
var imageData=ctx.getImageData（canvasX，canvasY，1，1）；
var pixel=imageData.data；
var pixelColor=“rgba（“+像素[0]+”、“+像素[1]+”、“+像素[2]+”、“+像素[3]+”）；
$（document.body）.css（'background-color'，pixelColor）；
});
});

跟进（复制粘贴）：


$（文档）.ready（函数（）
{
//var 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=函数（）
//  {
//ctx.drawImage（图像，0，0，image.width，image.height）；
//  }
//$（'#canvas'）.mousemove（函数（e）
//  { 
//var canvasOffset=$（this.offset（）；
//var canvasX=数学地板（e.pageX-canvasOffset.left）；
//var canvasY=数学地板（e.pageY-canvasOffset.top）；
//var imageData=ctx.getImageData（canvasX，canvasY，1，1）；
//var pixel=imageData.data；
//
//var pixelColor=“rgba（“+像素[0]+”、“+像素[1]+”、“+像素[2]+”、“+像素[3]+”）；
//$（document.body）.css（'background-color'，pixelColor）；
//
//  });
$.getImageData({
url:“http://www.google.com/intl/en_com/images/srpr/logo3w.png",
成功：功能（图像）{
 
//设置画布
var can=document.getElementsByTagName（'canvas'）[0]；
var ctx=can.getContext（'2d'）；
 
//将画布宽度和高度设置为与图像相同
$（can.attr（'width'，image.width）；
$（can.attr（'height'，image.height）；
 
//将图像绘制到画布上
ctx.drawImage（图像，0，0，image.width，image.height）；
 
//获取图像数据
var image_data=ctx.getImageData（0，0，image.width，image.height）；
var image\u data\u array=image\u data.data；
 
//反转每个像素
//对于（变量i=0，j=image\u data\u array.length；i

根据，当画布的源来自外部URL时，不能使用getImageData
根据规范：
每当画布的2D上下文的getImageData（）方法
使用调用其原始清除标志设置为false的元素
如果参数不正确，则该方法必须抛出SecurityError
例外
根据，当画布的源来自外部URL时，不能使用getImageData
根据规范：
每当画布的2D上下文的getImageData（）方法
使用调用其原始清除标志设置为false的元素
如果参数不正确，则该方法必须抛出SecurityError
例外
出于安全原因，当图像为外部图像时，不能使用getImageData。阅读了解更多信息
根据浏览器的不同，如果使用本地映像在本地运行代码，也可能会出现错误
但是，如果您在服务器上使用此代码并通过域名访问它，并且映像托管在同一服务器上，则代码将正常工作
编辑：
但我需要从位于远程的扫描仪进行扫描，其名称为randomIP/directory/scaner.jpeg
那么，也许您的解决方案不应该涉及浏览器JS中的客户端。你能不能使用另一种像PHP这样没有这些限制的语言？或者为什么不在一个不同的环境下使用JS，而不是像浏览器那样限制您呢
我推荐PHP，因为它易于使用，并且有GD库。
出于安全原因，当图像是外部图像时，您不能使用getImageData。阅读了解更多信息
根据浏览器的不同，如果使用本地映像在本地运行代码，也可能会出现错误
但是，如果您在服务器上使用此代码并通过域名访问它，并且映像托管在同一服务器上，则代码将正常工作
编辑：
但我需要从位于远程的扫描仪进行扫描，其名称为randomIP/directory/scaner.jpeg
那么，也许您的解决方案不应该涉及浏览器JS中的客户端。你不能用另一种语言吗
<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>