如何使用画布来修改来自另一个域的图像？ [英] How to use canvas to modify images from another domain?

问题描述

这是我使用的代码，当我有 image.src =/local/directory/image.png工程但如果我使用 image.src =http：// remote / path它加载图像，但rest mousemove函数不工作。您如何解决这个问题？

复制并粘贴到test.htm

$ p> < script type =text / javascriptsrc =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 。
var imageData = ctx.getImageData（canvasX，canvasY，1，1）;
var pixel = imageData.data;

var pixelColor = rgba（+ pixel [0] +，+ pixel [1] +，+ pixel [2] +，+ pixel [3] +）;
$ ）.css（'background-color'，pixelColor）;

}）;

}）;
< / script>

< body>
< canvas id =canvaswidth =340height =220>< / canvas>
< body>


跟进（复制粘贴）：

 < script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js> ;< / script> 
< script type =text / javascriptsrc =https://raw.github.com/betamax/getImageData/master/jquery.getimagedata.min.js>< / script> 
< script> 
 $（document）.ready（function（）
 {
 // var image = new Image（）; 
 // var ctx = 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 '，pixelColor）; 
 // 
 //}）; 
 $ .getImageData（{
 url：http://www.google.com/intl/en_com/images/srpr/logo3w.png，
 success：function（image）{ 
 
 //设置画布
 var can = document.getElementsByTagName（'canvas'）[0]; 
 var ctx = can.getContext（'2d'）; 
 
 //将画布宽度和高度设置为与图像相同
 $（可）.attr（'width'，image.width）; 
 $（可以）。 attr（'height'，image.height）; 
 
 //将图像绘制到画布上
 ctx.drawImage（image，0，0，image.width，image.height） ; 
 
 //获取图像数据
 var image_data = ctx.getImageData（0，0，image.width，image.height）; 
 var image_data_array = image_data.data; 
 
 //反转每个像素
 // for（var i = 0，j = image_data_array.length; i  // image_data_array [ i_data_array [i] = 255  -  image_data_array [i]; 
 // image_data_array [i + 1] = 255  -  image_data_array [i + 1]; 
 // image_data_array [i + 2] +2]; 
 //} 
 
 //将图像数据写入画布
 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）; 
 var pixel = imageData.data; 
 
 var pixelColor =rgba（+ pixel [0] +，+ pixel [1] +，+ pixel [ 2] +，+ pixel [3] +）; 
 $（document.body）.css（'background-color'，pixelColor）; 
 
} 
 
}，
错误：function（xhr，text_status）{
 //处理此处的错误
} 
}）; 
 
}）; 
< / script> 
 
< body> 
< canvas id =canvaswidth =340height =220 < / canvas> 
< body> 
  

解决方案

无法直接从其他网域。

但是，通过对图像进行 base-64 字符串解释，可以实现从另一个域操作图像，并使用它。 / p>

此功能在jQuery中由 $。imagedata 插件实现，可以从 此网站 。

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>

解决方案

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.

这篇关于如何使用画布来修改来自另一个域的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！