如何使用canvas修改来自其他域的图像？

这是我使用的代码当我有image.src = "/local/directory/image.png" image.src="http://sofzh.miximages.com/javascript/image.png"工作，但如果我使用image.src="http://remote/path"它加载图像但rest​​mousemovefunction不工作。 你是如何解决的？

复制并粘贴到test.htm

   $(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); }); });     

跟进（复制粘贴）：

    $(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  } }); });     

Answer 1

无法直接从其他域读取图像。

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

这个function是通过$.imagedata插件在jQuery中实现的，可以在这个站点下载。

Answer 2

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

从规格：

每当使用其他正确的参数调用其origin-clean标志设置为false的canvas元素的2D上下文的getImageData（）方法时，该方法必须抛出SecurityErrorexception。

Answer 3

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

根据您的浏览器，如果您使用本地映像在本地运行代码，您可能也会收到错误。

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

编辑 ：

但我需要从位于远程的扫描仪扫描为randomIP /目录/ scaner.jpeg？

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

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