blocks|key|161922|text|你的问题是你加载了一个外部图像，意味着来自另一个域。当您尝试访问画布上下文的任何数据时，这会导致安全错误。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|161923|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Your problem is that you load an external image, meaning from another domain. This causes a security error when you try to access any data of your canvas context.

blocks|key|163249|text|通过从交叉源域加载，您正在“污染”画布。请查看这篇MDN文章：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|163250|https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image|offset|length|163251|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1S|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

You are "tainting" the canvas by loading from a cross origins domain. Check out this MDN article:

<a href="https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image" rel="nofollow">https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image</a>

blocks|key|159517|text|您不能直接从另一个服务器将图像绘制到画布中，然后使用getImageData。这是一个安全问题，画布将被认为是“受污染的”。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|159518|使用PHP将图像的副本保存到服务器上，然后加载新图像，对您来说是否可行？例如，您可以将URL发送到PHP脚本并将其保存到服务器，然后将新文件名返回给javascript，如下所示：|159519|<?php+//The+name+of+this+file+in+this+example+is+imgdata.php

++$url=$_GET['url'];

++//+prevent+hackers+from+uploading+PHP+scripts+and+pwning+your+system
++if(!@is_array(getimagesize($url))){
++++echo+"path/to/placeholderImage.png";
++++exit("wrong+file+type.");
++}

++$img+=+file_get_contents($url);

++$fn+=+substr(strrchr($url,+"/"),+1);
++file_put_contents($fn,$img);
++echo+$fn;

?>|code-block|syntax|javascript|159520|您可以将PHP脚本与一些ajax+javascript一起使用，如下所示：|159521|xi=new+XMLHttpRequest();
xi.open("GET","imgdata.php?url="%2ByourImageURL,true);
xi.send();

xi.onreadystatechange=function()+{
++if(xi.readyState==4+&&+xi.status==200)+{
++++img=new+Image;
++++img.onload=function(){+
++++++ctx.drawImage(img,+0,+0,+canvas.width,+canvas.height);
++++}
++++img.src=xi.responseText;
++}
}|159522|如果在那之后在画布上使用getImageData，它会工作得很好。|159523|或者，如果您不想保存整个图像，则可以将x&y坐标传递给PHP脚本，并计算该侧像素的RGBA值。我认为在PHP中有很好的库可以做这样的图像处理。|159524|如果你想使用这种方法，如果你需要帮助来实现它，请让我知道。|159525|编辑-1:+peeps指出php脚本已经暴露，允许互联网恶意使用它。有一百万种方法来处理这个问题，最简单的方法之一就是对URL进行模糊处理……我认为安全的php实践应该有一个单独的谷歌。|159526|edit-2:根据流行的需求，我添加了一个检查，以确保它是一个图像而不是一个php脚本(来自：PHP+check+if+file+is+an+image)。|159527|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/15408125/php-check-if-file-is-an-image^0|Q|C|0|0|0|0|0|C|C|0|0|0|0|1B|T|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1B|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1D|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1E|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1F|8|@$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|1I|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1J|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|1K|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|1L|8|@]|D|@$9|1M|A|1N|1|1O]]|E|$]]|$1|10|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]]|11|$12|$5|13|14|15|E|$16|17]]]]

You won't be able to draw images directly from another server into a canvas and then use <code>getImageData</code>. It's a security issue and the canvas will be considered "tainted".

Would it work for you to save a copy of the image to your server using PHP and then just load the new image? For example, you could send the URL to the PHP script and save it to your server, then return the new filename to your javascript like this:

<pre><code>&lt;?php //The name of this file in this example is imgdata.php

 $url=$_GET['url'];

 // prevent hackers from uploading PHP scripts and pwning your system
 if(!@is_array(getimagesize($url))){
 echo "path/to/placeholderImage.png";
 exit("wrong file type.");
 }

 $img = file_get_contents($url);

 $fn = substr(strrchr($url, "/"), 1);
 file_put_contents($fn,$img);
 echo $fn;

?&gt;
</code></pre>

You'd use the PHP script with some ajax javascript like this:

<pre><code>xi=new XMLHttpRequest();
xi.open("GET","imgdata.php?url="+yourImageURL,true);
xi.send();

xi.onreadystatechange=function() {
 if(xi.readyState==4 &amp;&amp; xi.status==200) {
 img=new Image;
 img.onload=function(){ 
 ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
 }
 img.src=xi.responseText;
 }
}
</code></pre>

If you use <code>getImageData</code> on the canvas after that, it will work fine. 

Alternatively, if you don't want to save the whole image, you could pass x &amp; y coordinates to your PHP script and calculate the pixel's rgba value on that side. I think there are good libraries for doing that kind of image processing in PHP.

If you want to use this approach, let me know if you need help implementing it.

edit-1: peeps pointed out that the php script is exposed and allows the internet to potentially use it maliciously. there are a million ways to handle this, one of the simplest being some sort of URL obfuscation... i reckon secure php practices deserves a separate google ;P

edit-2: by popular demand, I've added a check to ensure it is an image and not a php script (from: <a href="https://stackoverflow.com/questions/15408125/php-check-if-file-is-an-image">PHP check if file is an image</a>).

blocks|key|2753204|text|正如其他人所说的那样，你从一个跨来源的域中加载，这是在“污染”画布。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2753205|https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image|offset|length|2753206|但是，您可以通过简单地设置以下内容来防止这种情况：|2753207|img.crossOrigin+=+"Anonymous";|code-block|syntax|javascript|2753208|只有当远程服务器适当地设置以下标头时，这才能起作用：|2753209|Access-Control-Allow-Origin+"*"|2753210|使用“直接链接”选项时的Dropbox+file+chooser就是一个很好的例子。我在oddprints.com上使用它将来自远程dropbox图像url的图像挂到我的画布中，然后将图像数据提交回我的服务器。全部在javascript中|2753211|entityMap|0|LINK|mutability|MUTABLE|url|1|https://www.dropbox.com/developers/dropins/chooser/js|2|http://www.oddprints.com/^0|0|0|1S|0|0|0|0|0|0|C|K|1|18|D|2|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@$D|15|E|16|1|17]]|A|$]]|$1|F|3|G|5|6|7|18|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|19|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1A|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|1B|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1C|8|@]|9|@$D|1D|E|1E|1|1F]|$D|1G|E|1H|1|1I]]|A|$]]|$1|S|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|C]]|Z|$5|V|W|X|A|$Y|10]]|11|$5|V|W|X|A|$Y|12]]]]

As others have said you are "tainting" the canvas by loading from a cross origins domain.

<a href="https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image" rel="noreferrer">https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image</a>

However, you may be able to prevent this by simply setting:

<pre><code>img.crossOrigin = "Anonymous";
</code></pre>

This only works if the remote server sets the following header appropriately:

<pre><code>Access-Control-Allow-Origin "*"
</code></pre>

The <a href="https://www.dropbox.com/developers/dropins/chooser/js" rel="noreferrer">Dropbox file chooser</a> when using the "direct link" option is a great example of this. I use it on <a href="http://www.oddprints.com/" rel="noreferrer">oddprints.com</a> to hoover up images from the remote dropbox image url, into my canvas, and then submit the image data back into my server. All in javascript

blocks|key|159572|text|我发现我必须使用.setAttribute('crossOrigin',+'')，并且必须在URL的查询字符串上附加一个时间戳，以避免缺少Access-Control-Allow-Origin头的304响应。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|159573|这给了我|159574|var+url+=+'http://lorempixel.com/g/400/200/';
var+imgObj+=+new+Image();
imgObj.src+=+url+%2B+'?'+%2B+new+Date().getTime();
imgObj.setAttribute('crossOrigin',+'');|code-block|syntax|javascript|159575|entityMap^0|8|W|1X|R|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

I found that I had to use <code>.setAttribute('crossOrigin', '')</code> and had to append a timestamp to the URL's query string to avoid a 304 response lacking the <code>Access-Control-Allow-Origin</code> header. 

This gives me

<pre><code>var url = 'http://lorempixel.com/g/400/200/';
var imgObj = new Image();
imgObj.src = url + '?' + new Date().getTime();
imgObj.setAttribute('crossOrigin', '');
</code></pre>

blocks|key|160643|text|正如matt+burns在his+answer中所说，您可能需要在托管问题图像的服务器上启用CORS。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|160644|如果服务器是Apache，则可以通过将以下代码片段(来自here)添加到VirtualHost配置或.htaccess文件来完成此操作：|style|CODE|160645|<IfModule+mod_setenvif.c>
++++<IfModule+mod_headers.c>
++++++++<FilesMatch+"\.(cur%7Cgif%7Cico%7Cjpe?g%7Cpng%7Csvgz?%7Cwebp)$">
++++++++++++SetEnvIf+Origin+":"+IS_CORS
++++++++++++Header+set+Access-Control-Allow-Origin+"*"+env=IS_CORS
++++++++</FilesMatch>
++++</IfModule>
</IfModule>|code-block|syntax|javascript|160646|将其添加到VirtualHost中，您可能还需要重新加载Apache的配置(例如.如果Apache在Linux服务器上运行，则为sudo+service+apache2+reload+)|160647|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/27840082/180500|1|https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image^0|D|A|0|0|1E|9|S|4|1|0|0|1S|R|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@$A|13|B|14|F|G]]|9|@$A|15|B|16|1|17]]|C|$]]|$1|H|3|I|5|J|7|18|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|19|8|@$A|1A|B|1B|F|G]]|9|@]|C|$]]|$1|O|3|-4|5|6|7|1C|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]]]

As matt burns says in <a href="https://stackoverflow.com/a/27840082/180500">his answer</a>, you may need to enable CORS on the server where the problem images are hosted.

If the server is Apache, this can be done by adding the following snippet (from <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image" rel="nofollow noreferrer">here</a>) to either your VirtualHost config or an <code>.htaccess</code> file:

<pre><code>&lt;IfModule mod_setenvif.c&gt;
 &lt;IfModule mod_headers.c&gt;
 &lt;FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$"&gt;
 SetEnvIf Origin ":" IS_CORS
 Header set Access-Control-Allow-Origin "*" env=IS_CORS
 &lt;/FilesMatch&gt;
 &lt;/IfModule&gt;
&lt;/IfModule&gt;
</code></pre>

...if adding it to a VirtualHost, you'll probably need to reload Apache's config too (eg. <code>sudo service apache2 reload</code> if Apache's running on a Linux server)

blocks|key|159600|text|我今天遇到了同样的问题，并通过下面的代码解决了它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|159601|html代码：|159602|<div+style='display:+none'>
++<img+id='img'+src='img/iak.png'+width='600'+height='400'+/>
</div>
<canvas+id='iak'>broswer+don't+support+canvas</canvas>|code-block|syntax|javascript|159603|js代码：|159604|var+canvas+=+document.getElementById('iak')
var+iakImg+=+document.getElementById('img')
var+ctx+=+canvas.getContext('2d')
var+image+=+new+Image()
image.src=iakImg.src
image.onload+=+function+()+{
+++ctx.drawImage(image,0,0)
+++var+data+=+ctx.getImageData(0,0,600,400)
}|159605|像上面这样的代码，没有跨域的问题。|159606|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I meet the same problem today, and solve it by the code follows.

html code:

<pre><code>&lt;div style='display: none'&gt;
 &lt;img id='img' src='img/iak.png' width='600' height='400' /&gt;
&lt;/div&gt;
&lt;canvas id='iak'&gt;broswer don't support canvas&lt;/canvas&gt;
</code></pre>

js code:

<pre><code>var canvas = document.getElementById('iak')
var iakImg = document.getElementById('img')
var ctx = canvas.getContext('2d')
var image = new Image()
image.src=iakImg.src
image.onload = function () {
 ctx.drawImage(image,0,0)
 var data = ctx.getImageData(0,0,600,400)
}
</code></pre>

code like above, and there is no cross-domain problem.

blocks|key|161988|text|我遇到了同样的问题，对我来说，它是通过简单地连接https:${image.getAttribute('src')}来工作的|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|161989|entityMap^0|O|Y|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

I was having the same issue, and for me it worked by simply concatenating <code>https:${image.getAttribute('src')}</code>

blocks|key|162016|text|在本地工作时，添加服务器|type|unstyled|depth|inlineStyleRanges|entityRanges|data|162017|当我在本地工作时也遇到了类似的问题。您的url将是本地文件的路径，例如file:///Users/PeterP/Desktop/folder/index.html.|162018|请注意，我正在使用。|offset|length|style|BOLD|162019|我通过全局安装http-server解决了这个问题。https://www.npmjs.com/package/http-server|162020|步骤：|162021|npm+install+http-server+-g|CODE|162022|Run服务器全球安装：http-server+~/Desktop/folder/|unordered-list-item|162023|
+|162024|ordered-list-item|162025|162026|PS:我假设你已经安装了node，否则你不会运行npm命令很远。|162027|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/http-server^0|0|0|9|1|0|Q|15|0|0|0|0|Q|0|B|T|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1A|8|@$F|1B|G|1C|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1D|8|@]|9|@$F|1E|G|1F|1|1G]]|A|$]]|$1|L|3|M|5|6|7|1H|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1I|8|@$F|1J|G|1K|H|P]]|9|@]|A|$]]|$1|Q|3|R|5|S|7|1L|8|@$F|1M|G|1N|H|P]]|9|@]|A|$]]|$1|T|3|U|5|6|7|1O|8|@]|9|@]|A|$]]|$1|V|3|-4|5|W|7|1P|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1R|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]]]

<h2>When working on local add a server</h2>
I had a similar issue when working on local. You url is going to be the path to the local file e.g. file:///Users/PeterP/Desktop/folder/index.html.
Please note that I am on a MAC.
I got round this by installing http-server globally. <a href="https://www.npmjs.com/package/http-server" rel="nofollow noreferrer">https://www.npmjs.com/package/http-server</a>
Steps:
<ol>
<li>Global install: <code>npm install http-server -g</code></li>
<li>Run server: <code>http-server ~/Desktop/folder/</code></li>
</ol>
PS: I assume you have node installed, otherwise you wont get very far running npm commands.

blocks|key|2965805|text|当我在本地测试代码时，我在Chrome上看到了这个错误。我切换到Firefox，再也看不到这个错误了。也许切换到另一个浏览器是一个快速的解决办法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2965806|如果您使用的是第一个答案中给出的解决方案，请确保在声明img变量后立即添加img.crossOrigin+=+"Anonymous";。var+img+=+new+Image();)。|2965807|entityMap^0|D|6|W|7|0|R|3|11|U|1W|M|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|I|$]]

I was seeing this error on <code>Chrome</code> while I was testing my code locally. I switched to <code>Firefox</code> and I am not seeing the error any more. Maybe switching to another browser is a quick fix.
If you are using the solution given in the first answer, then make sure you add <code>img.crossOrigin = &quot;Anonymous&quot;;</code> just after you declare the <code>img</code> variable (for eg. <code>var img = new Image();</code>).

blocks|key|160751|text|我的问题搞得一团糟，我只是对图像进行了base64编码，以确保不会有任何CORS问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|160752|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

My problem was so messed up I just base64 encoded the image to ensure there couldn't be any CORS issues

blocks|key|162053|text|您可以将图像转换为数据字符串，因为使用图像源而不是实际的图像源。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|162054|将图像转换为数据字符串的https://www.base64-image.de/。从上面的网站转换和复制字符串数据。设置image.src+=+。|162055|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

you can convert the image to a data string as use the image source instead of the actual image source.
[https://www.base64-image.de/][1] to convert image to data string.
Convert and copy string data from the above website.
set image.src = &lt;copied_data_string&gt;.

blocks|key|2965955|text|解决方法是，将源图像URL转换为Base64数据并分配给img|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2965956|例如，使用Axios|2965957|const+getBase64+=+async(url)=>{
++++++try+{
++++++++let+image+=+await+axios.get(url,+{+responseType:+'arraybuffer'+});
++++++++let+raw+=+Buffer.from(image.data).toString('base64');
++++++++return+"data:"+%2B+image.headers["content-type"]+%2B+";base64,"%2Braw;
++++++}+catch+(error)+{
++++++++++console.log(error)
++++++}+
}

var+image+=+new+Image()

image.src=getBase64(url)|code-block|syntax|javascript|2965958|canvas不存在跨域依赖|2965959|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

workaround solution,
convert source image URL to Base64 data and assign to img
for example, use Axios
<pre><code>const getBase64 = async(url)=&gt;{
 try {
 let image = await axios.get(url, { responseType: 'arraybuffer' });
 let raw = Buffer.from(image.data).toString('base64');
 return &quot;data:&quot; + image.headers[&quot;content-type&quot;] + &quot;;base64,&quot;+raw;
 } catch (error) {
 console.log(error)
 } 
}

var image = new Image()

image.src=getBase64(url)
</code></pre>
no cross-origin dependency from canvas

My code is working very well on my localhost but it is not working on the site.

I got this error from the console, for this line <code>.getImageData(x,y,1,1).data</code>:

<pre><code>Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 
</code></pre>

part of my code:

<pre><code>jQuery.Event.prototype.rgb=function(){
 var x = this.offsetX || (this.pageX - $(this.target).offset().left),y = this.offsetY || (this.pageY - $(this.target).offset().top);
 if (this.target.nodeName!=="CANVAS")return null;
 return this.target.getContext('2d').getImageData(x,y,1,1).data;
 }
</code></pre>

Note: my image url (src) is from a subdomain url

How to fix getImageData() error The canvas has been tainted by cross-origin data?

5位重磅专家聚焦 AI 时代开发者核心成长需求，带你深入解锁全栈进化、人机协作关键路径！点击报名到场：<a href="https://cloud.tencent.com/developer/salon/salon-2403/signup" target="_blank">https://cloud.tencent.com/developer/salon/salon-2403/signup</a> 
 <img src="https://qcloudimg.tencent-cloud.cn/raw/487c82639d2338df3ef66dfb1450601a.png"/>

腾讯技术创作特训营「年度论坛」正在报名中！

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我的代码在我的本地主机上工作得很好，但在站点上却不能工作。对于这一行.getImageData(x,y,1,1).data，我从控制台得到了这个错误Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D'...

问如何修复getImageData()错误画布被跨域数据污染？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何修复getImageData()错误画布被跨域数据污染？EN