getImageData跨原点错误 [英] getImageData cross-origin error

问题描述

前体：我知道已经有一些关于这个主题的问题，但没有一个似乎提供一个纯JavaScript解决方案。

所以我碰到这个错误，我试图从画布使用像 context.getImageData（），我的确切代码可以看到 这里 或以下：

 < canvas id =imageCanvaswidth =600height =800> ;< / canvas> 
  

  b $ b var canvas = document.getElementById（'imageCanvas'）; 
 
 var image = new Image（）; 
 image.src ='http://emoticons.pw/emoticons/emoticon-faces-002-medium.png'; 
 image.onload = function（）{
 
 width = image.width; 
 height = image.height; 
 
 var context = canvas.getContext（'2d'）; 
 context.fillStyle =＃024359; // canvas background color 
 context.fillRect（0，0，width，height）; 
 context.drawImage（this，0,0）; 
 
 imageData = context.getImageData（0,0，width，height）; // PROBLEM HERE 
 
 context.putImageData（imageData，0，0）; 
} 
  

我在Chrome中遇到以下错误：

无法从画布中获取图片数据，因为画布已被跨原始数据污染的
。

，然后出现安全错误。我不想做一个奇怪的指令事情的服务器更改或启动chrome。我觉得有一些我可以在JavaScript中做的事情。

使用本地映像不是一个问题，但是当尝试时，我有同样的错误！ / p>

我试图这样做没有服务器，如果我把它放在我的默认godaddy web服务器，都解决了我的问题？我听说谣言dropbox也可以模拟服务器足够近？

解决方案

不能使用 // 如果你使用（Chrome允许你覆盖这个，但我不会推荐它）。

轻量级服务器（如 Mongoose ），允许您使用 http：// localhost 作为域来测试您的本地页面。

如果您需要在不同的域上托管图片，则需要确保它们支持跨源使用。

Dropbox和ImgUrl（我推荐后者只是图像）都支持CORS使用，但你需要通过添加 crossOrigin 属性添加到您的图片中，然后再设置源代码（或者如果您使用的话，将其包含在HTML标记中）：

  var img = new Image; 
 
 img.onload = myLoader; 
 img.crossOrigin =''; /// = anonymous 
 img.src ='http：//imgur.com / ....'; 
  

或在HTML中：

 < img src =...alt =crossOrigin =anonymous/> 
  

Precursor: I know there have been a few questions already asked about this topic, but none of them seem to offer a straight JavaScript only solution.

So I ran into this error where I am trying to get the pixel data from a canvas using something like context.getImageData(), my exact code can been seen here or below:

<canvas id="imageCanvas" width="600" height="800"></canvas>

// Load Image
var canvas = document.getElementById('imageCanvas');

var image = new Image();
image.src = 'http://emoticons.pw/emoticons/emoticon-faces-002-medium.png';
image.onload = function() {

    width=image.width;
    height=image.height;

    var context = canvas.getContext('2d');
    context.fillStyle="#024359"; // canvas background color
    context.fillRect(0, 0, width, height);
    context.drawImage(this,0,0);

    imageData = context.getImageData(0,0,width, height); // PROBLEM HERE

    context.putImageData(imageData, 0, 0);
}

I get the following errors in Chrome:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

and then a security error as well. I don't want to make server changes or start chrome with a weird instruction thing. I feel like there has to be something I can do in JavaScript.

Using local images only is not a problem, but when trying that, I got the same error!

I am trying to do this without a server, if I put this on my "default" godaddy web server, are all my problems solved? I heard rumors dropbox could also simulate a server close enough?

解决方案

You can't use file:// if you're using that (Chrome allow you to override this but I won't recommend it).

For local testing use a light-weight server such as Mongoose which allow you use http://localhost as a domain to test your local pages. This way you avoid problems with CORS.

If you need to host images on a different domain you need to make sure they support cross-origin usage.

DropBox and ImgUrl (I recommend the latter for just images) both support CORS usage, but you need to request such usage by adding the crossOrigin property to your image before setting the source (or include it in the HTML tag if you're using that):

var img = new Image;

img.onload = myLoader;
img.crossOrigin = '';              ///=anonymous
img.src = 'http://imgur.com/....';

or in HTML:

<img src="..." alt="" crossOrigin="anonymous" />

这篇关于getImageData跨原点错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！