如何使用画布来修改来自另一个域的图像

How to use canvas to modify images from another domain?

本文关键字：另一个 图像 修改 何使用      更新时间：2023-09-26

这是我使用的代码，当我有image.src = "/local/directory/image.png"工作，但如果我使用image.src="http://remote/path"它加载图像，但休息鼠标移动功能不工作。你怎么修理它?

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

后续(复制粘贴):

<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>

不可能直接从另一个域读取图像。

但是，可以通过获取图像的base-64字符串解释来操作来自另一个域的图像，并使用它。

该功能是由$.imagedata插件在jQuery中实现的，该插件可以在这个网站下载。

根据规范，当画布的源来自外部URL时，您不能使用getImageData。

From the specs:

每当画布的2D上下文的getImageData()方法将origin-clean标志设置为false的元素调用否则参数正确，则该方法必须抛出SecurityError例外。

出于安全原因，当图像是外部时不能使用getImageData。阅读本文了解更多信息。

根据浏览器的不同，如果你在本地使用本地图像运行代码，你也可能会得到一个错误。

但是，如果您在服务器上使用此代码并通过域名和访问它，图像托管在同一台服务器上，代码将正常工作

编辑:

，但我需要扫描的扫描器位于远程随机ip/目录/扫描仪.jpeg?

那么也许你的解决方案不应该涉及客户端，浏览器内JS。你能不用PHP这样没有这些限制的语言吗?或者为什么不在不同的环境下使用JS，而不像浏览器那样限制你呢?

我推荐使用PHP，因为它易于使用并且具有GD库。

相关文章：