blocks|key|322287|text|这在JavaScript中是不可能的，因为它违背了跨域安全性。如果你知道图像是由什么像素组成的，那就很糟糕了，http://some-other-host/yourPassword.png。只有当鼠标位于画布上或同一域的图像元素(或另一个域的具有Access-Control-Allow-Origin:+*标题的图像元素)上时，才能分辨出鼠标下像素的颜色。在画布的情况下，您将执行canvasElement.getContext('2d').getImageData(x,+y,+1,+1).data。在图像的情况下，您必须使用以下命令将其绘制到画布：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|322288|var+canvas+=+document.createElement("canvas");
canvas.width+=+yourImageElement.width;
canvas.height+=+yourImageElement.height;
canvas.getContext('2d').drawImage(yourImageElement,+0,+0);|code-block|syntax|javascript|322289|然后只需使用前面为画布解释的方法。如果您必须能够转换为颜色值的各种表示形式，请尝试my+color.js库。|322290|此外，你永远不能支持IE+<9+(假设IE9支持canvas)，使用Flash也无济于事，因为它也无法读取文档的像素数据。|322291|entityMap|0|LINK|mutability|MUTABLE|url|http://github.com/eligrey/color.js^0|1J|13|3F|U|5A|1O|0|0|18|8|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|D|@$9|15|A|16|1|17]]|E|$]]|$1|M|3|N|5|6|7|18|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

It's not possible with JavaScript as it goes against cross-domain security. It would be very bad if you knew what pixels made up the image, <code>http://some-other-host/yourPassword.png</code>. You can only tell the color of the pixel under the mouse if either the mouse is over a canvas or an image element of the same domain (or an image element of another domain which is served with an <code>Access-Control-Allow-Origin: *</code> header). In the case of the canvas, you would do <code>canvasElement.getContext('2d').getImageData(x, y, 1, 1).data</code>. In the case of the images, you would have to draw them to a canvas with:

<pre><code>var canvas = document.createElement("canvas");
canvas.width = yourImageElement.width;
canvas.height = yourImageElement.height;
canvas.getContext('2d').drawImage(yourImageElement, 0, 0);
</code></pre>

And then just use the previous method explained for canvases. If you must be able to convert to various representations of color values, try my <a href="http://github.com/eligrey/color.js" rel="noreferrer">color.js</a> library.

Also, you're never going to be able to support IE &lt;9 (that's assuming that IE9 supports canvas) and using Flash won't help as it can't read the pixel data of the document either.

blocks|key|325063|text|我确实同意Elijah提供的非常详细的答案。此外，我想说的是，当涉及到图像时，您不需要画布。正如您自己所说的，您可以从php中获得这些图像，并且可以在服务器上执行颜色查询。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|325064|我建议你用一个外部工具来处理这个问题-这使得它甚至独立于浏览器(但依赖于操作系统)：编写一个小工具(例如在c#中)，它为你执行颜色查询，通过快捷方式调用并将颜色提交给你的服务器。在您的CMS上以下载方式提供该工具。|325065|我用于CMS的另一种方法是通过解析CSS来“窃取”颜色:用例是将现有网站的颜色作为调色板提供给我的应用程序：|325066|325067|我要求用户提供来自目标系统的网址-主要是公司的主页|unordered-list-item|325068|我解析了该页面以查找所有内联样式和链接样式中的所有颜色定义|325069|(您可以轻松地将其扩展到所有引用的图像)|325070|结果是一个很好的调色板，其中包含可从|325071|中选择的所有颜色|325072|也许这也是你的CMS的一个解决方案？|325073|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|G|3|H|5|I|7|Z|8|@]|9|@]|A|$]]|$1|J|3|K|5|I|7|10|8|@]|9|@]|A|$]]|$1|L|3|M|5|I|7|11|8|@]|9|@]|A|$]]|$1|N|3|O|5|I|7|12|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|13|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|14|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|U|$]]

I do agree with the very detailed answer provided by Elijah. In addition, I would say that you don't need the canvas when it comes to images. As you stated yourself, you have those images available from within php and can do the color-query on the server.

I would suggest that you handle this problem with an external tool - this makes it even browser indepedent (but OS dependent): write a small tool (for instance in c#) which does the color query for you, is invoked with a shortcut and submits the color to your server. Make the tool available as download on your CMS.

Another aproach I used for a CMS was to "steal" colors by parsing the CSS: the use case was to make the colors of an already existing web site available as color palette to my application:

<ul>
<li>I asked the user to provide a URL from the target system - mostly the company's home page</li>
<li>I parsed the page to find all color definitions in all inline styles and linked styles</li>
<li>(you can easily extend this to all referenced images)</li>
<li>the result was a nice color palette with all coporate colors to choose from</li>
</ul>

Maybe that's also a solution for your CMS?

blocks|key|3286741|text|我不知道这是否可行，但如果您的页面是静态的，您可以保存每个页面的图像截图(或者可能为每个浏览器/屏幕分辨率保存一个图像截图？)然后使用AJAX将光标坐标发送到服务器，并使用PHP的imagecolorat()返回像素颜色。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3286742|要截取屏幕截图，您可以像所描述的here那样使用Selenium+IDE。|3286743|希望能有所帮助。|3286744|entityMap|0|LINK|mutability|MUTABLE|url|http://binil.wordpress.com/2006/12/22/taking-screenshots-with-selenium/|1|http://seleniumhq.org/projects/ide/^0|2I|E|0|G|4|0|O|C|1|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@$9|X|A|Y|1|Z]|$9|10|A|11|1|12]]|E|$]]|$1|H|3|I|5|6|7|13|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|S]]]]

I don't know if this is feasible, but if your pages are static you could save an image screenshot of each one of them (or maybe one for each browser/screen resolution? ) and then use AJAX to send the cursor coordinates to the server and return the pixel color with PHP's <code>imagecolorat()</code>.

To take the screenshots, you could use <a href="http://seleniumhq.org/projects/ide/" rel="noreferrer">Selenium IDE</a> like described <a href="http://binil.wordpress.com/2006/12/22/taking-screenshots-with-selenium/" rel="noreferrer">here</a>.

Hope it helps.

blocks|key|325114|text|除了前面的答案--|type|unstyled|depth|inlineStyleRanges|entityRanges|data|325115|考虑这个问题的一种方法是，您希望能够对1px+x+1px区域进行屏幕截图。捕获屏幕区域(例如，从基于Web的bug报告系统中捕获)的一种相当常见的技术是使用签名的Java+applet和java.awt.Robot来捕获图片。如果您签署了小程序，您的用户将得到一个“您信任此应用程序”对话框(带有“始终信任来自此发行商的应用程序”复选框)，然后就可以使用该工具了。|325116|然后，您可以使用LiveConnect将结果传递给JavaScript+(文档是旧的，但JavaScript仍然支持它)，或者您可以将其发布到您的服务器。类似地，您可以从JavaScript调用Java+applet。|325117|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

To add to the previous answers --

One way of thinking of this problem is that you want to be able to do a screen-capture of a 1px by 1px region. A fairly common technique for capturing screen regions (for instance from within Web-based bug-reporting systems) is to use a signed Java applet and java.awt.Robot to capture the picture. If you sign the applet, your users will get a "do you trust this app" dialog (with an "always trust apps from this publisher" checkbox) and then will be able to use the tool.

You can then pass the result out to JavaScript using LiveConnect (the docs are old, but Java applets still support this), or you can post it to your server. Similarly, you can call into the Java applet from JavaScript.

blocks|key|3073335|text|我使用javascript和JQuery合并了在StackOverflow和其他网站上找到的各种参考资料：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3073336|<html>
<body>
<canvas+id="myCanvas"+width="400"+height="400"+style="border:1px+solid+#c3c3c3;">
Your+browser+does+not+support+the+canvas+element.
</canvas>
<script+src="jquery.js"></script>
<script+type="text/javascript">
++++window.onload+=+function(){
++++++++var+canvas+=+document.getElementById('myCanvas');
++++++++var+context+=+canvas.getContext('2d');
++++++++var+img+=+new+Image();
++++++++img.src+=+'photo_apple.jpg';
++++++++context.drawImage(img,+0,+0);
++++};

++++function+findPos(obj){
++++var+current_left+=+0,+current_top+=+0;
++++if+(obj.offsetParent){
++++++++do{
++++++++++++current_left+%2B=+obj.offsetLeft;
++++++++++++current_top+%2B=+obj.offsetTop;
++++++++}while(obj+=+obj.offsetParent);
++++++++return+{x:+current_left,+y:+current_top};
++++}
++++return+undefined;
++++}

++++function+rgbToHex(r,+g,+b){
++++if+(r+>+255+%7C%7C+g+>+255+%7C%7C+b+>+255)
++++++++throw+"Invalid+color+component";
++++return+((r+<<+16)+%7C+(g+<<+8)+%7C+b).toString(16);
++++}

$('#myCanvas').click(function(e){
++++var+position+=+findPos(this);
++++var+x+=+e.pageX+-+position.x;
++++var+y+=+e.pageY+-+position.y;
++++var+coordinate+=+"x="+%2B+x+%2B+",+y="+%2B+y;
++++var+canvas+=+this.getContext('2d');
++++var+p+=+canvas.getImageData(x,+y,+1,+1).data;
++++var+hex+=+"#"+%2B+("000000"+%2B+rgbToHex(p[0],+p[1],+p[2])).slice(-6);
++++alert("HEX:+"+%2B+hex);
});
</script>
<img+src="photo_apple.jpg"/>
</body>
</html>|code-block|syntax|javascript|3073337|这是我的完整解决方案..这里我只使用了画布和一张图片，但是如果你需要在图片上使用<map>，这也是可能的。我希望我能帮上忙。|offset|length|style|CODE|3073338|entityMap^0|0|0|14|5|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Merging various references found here in StackOverflow and in other sites, I did so using javascript and JQuery:

<pre><code>&lt;html&gt;
&lt;body&gt;
&lt;canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;"&gt;
Your browser does not support the canvas element.
&lt;/canvas&gt;
&lt;script src="jquery.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
 window.onload = function(){
 var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');
 var img = new Image();
 img.src = 'photo_apple.jpg';
 context.drawImage(img, 0, 0);
 };

 function findPos(obj){
 var current_left = 0, current_top = 0;
 if (obj.offsetParent){
 do{
 current_left += obj.offsetLeft;
 current_top += obj.offsetTop;
 }while(obj = obj.offsetParent);
 return {x: current_left, y: current_top};
 }
 return undefined;
 }

 function rgbToHex(r, g, b){
 if (r &gt; 255 || g &gt; 255 || b &gt; 255)
 throw "Invalid color component";
 return ((r &lt;&lt; 16) | (g &lt;&lt; 8) | b).toString(16);
 }

$('#myCanvas').click(function(e){
 var position = findPos(this);
 var x = e.pageX - position.x;
 var y = e.pageY - position.y;
 var coordinate = "x=" + x + ", y=" + y;
 var canvas = this.getContext('2d');
 var p = canvas.getImageData(x, y, 1, 1).data;
 var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
 alert("HEX: " + hex);
});
&lt;/script&gt;
&lt;img src="photo_apple.jpg"/&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

This is my complete solution.. Here I only used canvas and one image, but if you need to use <code>&lt;map&gt;</code> over the image, it's possible too. I hope I have helped.

blocks|key|323012|text|作为安全预防措施，您不能使用Javascript捕获屏幕像素(因此开发人员无法对您的个人数据进行快照)，但您可以在Flash中执行此操作--您可以使用flash.display.BitmapData类在Flash容器中获取像素数据。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|323013|查看http://www.sephiroth.it/tutorials/flashPHP/print_screen/+--我在基于闪存的WYSYWIG项目中使用它将图像保存到LAMP+(PHP)服务器。|offset|length|323014|使用闪存的问题是，iOS设备本身并不支持闪存，这些设备现在非常流行，值得为其开发。闪光灯正在往下走。|323015|如果您的所有访问者都有支持canvas标签和JavaScript的最新web浏览器，那么基于canvas的方法肯定是一个很好的方法。|323016|entityMap|0|LINK|mutability|MUTABLE|url|http://www.sephiroth.it/tutorials/flashPHP/print_screen/^0|0|2|1K|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

As a security precaution you can't capture screen pixels with Javascript (so developers can't take snapshots of your personal data), but you CAN do it in Flash -- you can get pixel data within the Flash container using the flash.display.BitmapData class.

Check out <a href="http://www.sephiroth.it/tutorials/flashPHP/print_screen/" rel="nofollow">http://www.sephiroth.it/tutorials/flashPHP/print_screen/</a> -- I've used it in Flash-based WYSYWIG projects to save images to a LAMP (PHP) server.

The problem with using Flash is that it's not natively supported on iOS devices, which are extremely popular now and worth developing for. Flash is on its way down the tubes.

The canvas-based method will certainly be a good one provided all of your visitors have up-to-date web browsers that support the canvas tag and JavaScript.

blocks|key|3073384|text|请参阅新的inputtype=color+HTML5元素：http://www.w3.org/TR/html-markup/input.color.html，http://demo.hongkiat.com/html5-form-input-type/index2.html。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3073385|现在它至少可以在Chrome上运行(在Ubuntu上测试过，也应该可以在Windows上运行)。它启动由操作系统提供的颜色选择对话框。如果此对话框中有滴管(用于Gnome)，则可以从屏幕上的任何点选取颜色。还不是跨浏览器的，但是干净的，基于标准的。|style|BOLD|3073386|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/html-markup/input.color.html|1|http://demo.hongkiat.com/html5-form-input-type/index2.html^0|T|1D|0|27|1M|1|0|1U|R|2U|M|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]|$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@$A|Z|B|10|F|G]|$A|11|B|12|F|G]]|9|@]|C|$]]|$1|H|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

See new input[type=color] HTML5 element: <a href="http://www.w3.org/TR/html-markup/input.color.html" rel="noreferrer">http://www.w3.org/TR/html-markup/input.color.html</a>, <a href="http://demo.hongkiat.com/html5-form-input-type/index2.html" rel="noreferrer">http://demo.hongkiat.com/html5-form-input-type/index2.html</a>. 

Now it works at least in Chrome (tested in Ubuntu, should work for Windows too). It launches color-select dialog provided by operating system. If there is an eyedropper in this dialog (it is for Gnome), then it's possible to pick a color from any point on your screen. Not cross-browser yet, but clean and standards-based.

blocks|key|3073465|text|使用一种称为浏览器计时攻击的技术，可以(某种程度上)确定任何像素的颜色，甚至在iframe上也是如此。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3073466|基本上，这种技术测量的是在元素上呈现SVG滤镜的时间，而不是颜色本身(requestAnimationFrame()测量时间的精度比setTimeout()高得多)。根据当前像素颜色的不同，滤镜应用所需的时间或多或少。这使得可以确定像素是否与已知颜色相同-例如黑色或白色。|offset|length|style|CODE|3073467|更多详情请参阅本白皮书(pdf)：https://www.contextis.com/media/downloads/Pixel_Perfect_Timing_Attacks_with_HTML5_Whitepaper.pdf|3073468|顺便说一句:是的，这是一个浏览器安全漏洞，但我不知道浏览器供应商如何修补它。|3073469|entityMap|0|LINK|mutability|MUTABLE|url|https://www.contextis.com/media/downloads/Pixel_Perfect_Timing_Attacks_with_HTML5_Whitepaper.pdf^0|0|Z|N|1U|C|0|H|2O|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@$D|V|E|W|F|G]|$D|X|E|Y|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|J|3|K|5|6|7|13|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]]]

Using a technique called Browser Timing Attack, it is possible to (sort of) determine the color of any pixel, even on iframes.
Basically, this technique measures the time to render an SVG filter on an element, rather than the color itself (<code>requestAnimationFrame()</code> allows to measure time with a much better accuracy than <code>setTimeout()</code>). Depending on the current pixel color, the filter takes more or less time to apply. This makes it possible to determine if a pixel is the same color as a known color - for instance black or white.
More details in this white paper (pdf): <a href="https://www.contextis.com/media/downloads/Pixel_Perfect_Timing_Attacks_with_HTML5_Whitepaper.pdf" rel="noreferrer">https://www.contextis.com/media/downloads/Pixel_Perfect_Timing_Attacks_with_HTML5_Whitepaper.pdf</a>
By the way: yes, this is a browser security hole, but I don't see how browser vendors can patch it.

blocks|key|3286938|text|没有内置的DOM方法来获取特定像素位置的DOM元素(图像或<canvas>除外)的颜色。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3286939|因此，为了做到这一点，我们必须使用诸如HTML2Canvas或DOM+Panda之类的工具来截取我们网站的“屏幕截图”，获取用户的点击位置，并获取该特定位置的“屏幕截图”的像素颜色。|3286940|使用HTML2Canvas+(版本0.5.0-beta3)，您可以执行以下操作：|3286941|//+Take+"screenshot"+using+HTML2Canvas
var+screenshotCanvas,
++++screenshotCtx,
++++timeBetweenRuns+=+10,
++++lastTime+=+Date.now();
function+getScreenshot()+{
++++//+Limit+how+soon+this+can+be+ran+again
++++var+currTime+=+Date.now();
++++if(currTime+-+lastTime+>+timeBetweenRuns)+{
++++++++html2canvas(document.body).then(function(canvas)+{
++++++++++++screenshotCanvas+=+canvas;
++++++++++++screenshotCtx+=+screenshotCanvas.getContext('2d');
++++++++});
++++++++lastTime+=+currTime;
++++}
}
setTimeout(function()+{+//+Assure+the+initial+capture+is+done
++++getScreenshot();
},+100);

//+Get+the+user's+click+location
document.onclick+=+function(event)+{
++++var+x+=+event.pageX,
++++++++y+=+event.pageY;

++++//+Look+what+color+the+pixel+at+the+screenshot+is
++++console.log(screenshotCtx.getImageData(x,+y,+1,+1).data);
}


//+Update+the+screenshot+when+the+window+changes+size
window.onresize+=+getScreenshot;|code-block|syntax|javascript|3286942|Demo|3286943|entityMap|0|LINK|mutability|MUTABLE|url|http://html2canvas.hertzen.com/|1|https://github.com/jankuca/dom-panda|2|https://jsfiddle.net/tma6jgzw/^0|T|8|0|J|B|0|V|9|1|0|0|0|0|4|2|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]|$9|19|A|1A|1|1B]]|E|$]]|$1|H|3|I|5|6|7|1C|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1D|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1E|8|@]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|Q|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]|10|$5|T|U|V|E|$W|11]]]]

There is no built in DOM method to generically get the color of a DOM element (other than images or a <code>&lt;canvas&gt;</code>) at a particular pixel location.

Thus, in order to do this, we must use something like <a href="http://html2canvas.hertzen.com/" rel="nofollow noreferrer">HTML2Canvas</a> or <a href="https://github.com/jankuca/dom-panda" rel="nofollow noreferrer">DOM Panda</a> to take a "screenshot" of our website, get the user's click location, and get the pixel color of the "screenshot" at that particular location.

Using HTML2Canvas (version 0.5.0-beta3) you can do something like this:

<pre><code>// Take "screenshot" using HTML2Canvas
var screenshotCanvas,
 screenshotCtx,
 timeBetweenRuns = 10,
 lastTime = Date.now();
function getScreenshot() {
 // Limit how soon this can be ran again
 var currTime = Date.now();
 if(currTime - lastTime &gt; timeBetweenRuns) {
 html2canvas(document.body).then(function(canvas) {
 screenshotCanvas = canvas;
 screenshotCtx = screenshotCanvas.getContext('2d');
 });
 lastTime = currTime;
 }
}
setTimeout(function() { // Assure the initial capture is done
 getScreenshot();
}, 100);

// Get the user's click location
document.onclick = function(event) {
 var x = event.pageX,
 y = event.pageY;

 // Look what color the pixel at the screenshot is
 console.log(screenshotCtx.getImageData(x, y, 1, 1).data);
}


// Update the screenshot when the window changes size
window.onresize = getScreenshot;
</code></pre>

<h1><a href="https://jsfiddle.net/tma6jgzw/" rel="nofollow noreferrer">Demo</a></h1>

blocks|key|320707|text|Chrome+Canary现在支持EyeDropper应用编程接口！|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|320708|https://www.chromestatus.com/feature/6304275594477568|320709|我相信我们很快就能在所有流行的浏览器中看到它。|320710|基本上，它会将用户的光标更改为放大镜，并允许用户选择页面上的任何像素(适用于图像、视频和iframe)。|320711|const+eyeDropper+=+new+EyeDropper()

async+function+useEyeDropper()+{
++try+{
++++const+selectedColor+=+await+eyeDropper.open()
++++console.log(selectedColor)+//+{+sRGBHex:+'#008080'+}
++}+catch+(err)+{
++++console.log('eye+dropper+cancelled')
++}
}

someTriggerEl.addEventListener('click',+()+=>+{
++useEyeDropper();
})|code-block|syntax|javascript|320712|如果你不能很好地理解异步/等待：|320713|const+eyeDropper+=+new+EyeDropper()

someTriggerEl.addEventListener('click',+()+=>+{
++eyeDropper.open().then(selectedColor+=>+{
++++console.log(selectedColor)+//+{+sRGBHex:+'#008080'+}
++}).catch(()+=>+{
++++console.log('eye+dropper+cancelled')
++})
})|320714|我对这个功能太着迷了|320715|entityMap|0|LINK|mutability|MUTABLE|url^0|0|Y|0|0|1H|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|H|3|I|5|6|7|1A|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1B|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|1C|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|1D|8|@]|D|@]|E|$]]|$1|S|3|T|5|N|7|1E|8|@]|D|@]|E|$O|P]]|$1|U|3|V|5|6|7|1F|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|G]]]]

Chrome Canary now supports EyeDropper API!
<a href="https://www.chromestatus.com/feature/6304275594477568" rel="nofollow noreferrer">https://www.chromestatus.com/feature/6304275594477568</a>
I believe we can expect it soon in all popular browsers.
Basically it will change user's cursor to magnifying glass and lets him select any pixel on page (works with images, videos and iframes).
<pre class="lang-js prettyprint-override"><code>const eyeDropper = new EyeDropper()

async function useEyeDropper() {
 try {
 const selectedColor = await eyeDropper.open()
 console.log(selectedColor) // { sRGBHex: '#008080' }
 } catch (err) {
 console.log('eye dropper cancelled')
 }
}

someTriggerEl.addEventListener('click', () =&gt; {
 useEyeDropper();
})
</code></pre>
If you don't understand async/await well:
<pre class="lang-js prettyprint-override"><code>const eyeDropper = new EyeDropper()

someTriggerEl.addEventListener('click', () =&gt; {
 eyeDropper.open().then(selectedColor =&gt; {
 console.log(selectedColor) // { sRGBHex: '#008080' }
 }).catch(() =&gt; {
 console.log('eye dropper cancelled')
 })
})
</code></pre>
I'm so hyped about this feature

blocks|key|3073531|text|我知道这是一个很老的帖子，但是来自google+chrome的一个新API调用功能出现了，叫做"eyeDropper“。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3073532|这是从那个博客上摘录的|3073533|const+eyeDropper+=+new+EyeDropper();

try+{
++const+selectedColor+=+await+eyeDropper.open();
++console.log(selectedColor);
++//+logs:+{+sRGBHex:+'#ff0000'+}
}+catch+(err)+{
++console.log("color+selection+cancelled");
}
//You+can+test+for+support+of+EyeDropper+using+the+following+snippet,+if+you’re+browsing+with+a+browser+that+supports+the+EyeDropper+API+a+button+will+be+rendered+below+the+code+snippet.

if+("EyeDropper"+in+window)+{
++//+supported
}|code-block|syntax|javascript|3073534|https://pqina.nl/blog/use-the-javascript-eye-dropper-api-to-select-colors-on-the-web/|offset|length|3073535|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|2D|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

I know this is a very old post but a new API call feature from google chrome came up called &quot;eyeDropper&quot;
this was taken from that blog
<pre class="lang-js prettyprint-override"><code>const eyeDropper = new EyeDropper();

try {
 const selectedColor = await eyeDropper.open();
 console.log(selectedColor);
 // logs: { sRGBHex: '#ff0000' }
} catch (err) {
 console.log(&quot;color selection cancelled&quot;);
}
//You can test for support of EyeDropper using the following snippet, if you’re browsing with a browser that supports the EyeDropper API a button will be rendered below the code snippet.

if (&quot;EyeDropper&quot; in window) {
 // supported
}
</code></pre>
<a href="https://pqina.nl/blog/use-the-javascript-eye-dropper-api-to-select-colors-on-the-web/" rel="nofollow noreferrer">https://pqina.nl/blog/use-the-javascript-eye-dropper-api-to-select-colors-on-the-web/</a>

blocks|key|3073627|text|我想对@BorrisTB的回答(以及每个人对EyeDropper应用编程接口可用性的回答)添加两个重要的考虑因素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3073628|3073629|我们在一个项目上实现了滴管API，这个项目在我的机器上运行得很流畅，但在生产服务器上给了我EyeDropper+is+undefined。结果发现它需要window.isSecureContext+=+true。这在本地主机上是可能的，并且仅在HTTPS上是可能的。所以要确保页面是通过HTTPS加载的，以便应用程序接口可用。|ordered-list-item|offset|length|style|CODE|3073630|目前只在基于铬的浏览器上可用，也只在桌面上可用。Mozilla和Safari不支持此功能，出于安全原因，也没有计划支持此功能。请参阅下表https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API#browser_compatibility|3073631|3073632|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API#browser_compatibility^0|0|0|19|N|24|T|0|1W|2D|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|V|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|W|8|@$F|X|G|Y|H|I]|$F|Z|G|10|H|I]]|9|@]|A|$]]|$1|J|3|K|5|E|7|11|8|@]|9|@$F|12|G|13|1|14]]|A|$]]|$1|L|3|-4|5|6|7|15|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

I would like to add two important considerations on @BorrisTB's answer (and to everyone's answer pointing to the availability of EyeDropper API).
<ol>
<li>We implemented Eyedropper API on a project which was running smoothly
on my machine but was giving me <code>EyeDropper is undefined</code> on
production server. Turns out it needed <code>window.isSecureContext = true</code>. Which is possible on localhost, and on HTTPS only. So make
sure the page is loaded over HTTPS, for API to be available.</li>
<li>At the moment it is only available on chromium based browsers and
that too on Desktops only. Mozilla and Safari do not support this
feature, and have no plan for supporting it for security reason.
Please refer to the table below
<a href="https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API#browser_compatibility" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API#browser_compatibility</a></li>
</ol>

I am looking for an "eyedropper" tool, that gives me the hex value of the pixel the mouse cursor is under, in JavaScript for a CMS.

For Firefox, there is the excellent <a href="http://www.colorzilla.com/firefox/screenshots.html" rel="noreferrer">ColorZilla</a> extension that does exactly that. However, it's FF only of course, and I would really like to deliver the tool along with the CMS.

A dutch developer has had the <a href="http://youngdutchdesign.com/moodrop-mootools-eyedropper-tool" rel="noreferrer">very clever idea</a> of using a combination of Ajax and PHP's <code>imagecolorat()</code> to find out the Pixel colour on an image. But that limits the range to images I can access server side, and I'm really dreaming of a universal tool. 

I will work with one of these approaches, but would much prefer a cross-browser, Javascript or Flash based way that requires no server-side fiddling and no installing of extensions.

I am also interested in any IE specific solutions that do what ColorZilla can do - I could live with supporting IE and FF only, though a cross browser solution would of course be ideal.

JavaScript eyedropper (tell color of pixel under mouse cursor)

服务器

Windows

容器

Ubuntu

HTML5

Java

我正在寻找一个“滴管”工具，它给我的十六进制值的像素的鼠标光标下，在JavaScript的内容管理系统。对于火狐来说，有一个很棒的扩展就可以做到这一点。然而，这只是FF，当然，我真的很想把这个工具和CMS一起交付。一位荷兰开发人员使用Ajax和PHP的imagecolorat()的组合来找出图像上的像素颜色的。，但这限...

问JavaScript滴管(告诉鼠标光标下像素的颜色)
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript滴管(告诉鼠标光标下像素的颜色)EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript滴管(告诉鼠标光标下像素的颜色)
EN