The idea came to me while working on the new Pixastic image editor. One of the Ubiquity-specific features will be an "edit-screenshot" command that takes a picture of the current page and loads it up in the image editor. This is possible via the HTML5
canvas element. While in normal web pages you can only paint regular images via the drawImage() method, running with Ubiquity's privileges also gives you access to a drawWindow() method that simply takes a window object instead. Pretty cool stuff. So that makes it rather easy to just grab a screenshot and use that in place of a regular image and, for this color picking command, to put the page in a "click somewhere" mode and then use the mouse coordinates to grab the pixel value from the screenshot image.


grab-color command here (notice the bar at the top and the "Subscribe" button in the top-right corner).
You can now toggle Ubiquity (ctrl+space or whatever your command is) and type
grab-color. And that's it. When you move the mouse over the page, the color under the pointer is displayed in a box and when you click the page, the color is prompted to you for easy copying.The command has one optional argument that determines the format of the color returned to you, either "hex" or "rgb". So to get the color in
rgb([r],[g],[b]) format, do grab-color rgb.
11 comments:
Colourzilla.
yeah... Darkimmortal gave the right name.
I suggest, instead of doing all this hard work, put little time and effort to go through all the available addons of Firefox. You will find a lot of useful tools.
Anyways heads up for your approach. Keep up doing nice work which surely fascinates me.
@Sahil, thanks. Yes, it seems that addon does the job as well. Like I said in the post, I'm sure there are other options, this was just a way to do it with Ubiquity.
And it's not a lot of "hard work", as you'll see if you look at the source, it was really quite simple, but thanks for your concern.
On a Mac, there's a little-known utility that's installed by default called "Digital Color Meter", which will show you the current color (in hex, or an RGB tuple, or whatever) of anything on the screen under the mouse cursor. A viable alternative for anyone using OS X (no doubt similar utilities could be found for Windows users as well), and useful for more than just web pages.
Hi! Another solution: http://www.iconico.com/colorpic/
Thanks,
Great information!
Keep it up!
This is great! Whatever other options are, it's fantastic to have something available for Ubiquity. Many thanks :)
Can Pixastic be used to extract common colors from an image using javascript?
@Terry: There's no such functionality in Pixastic at the moment, but it shouldn't be hard to add if someone's up for it.
Hi..
I want to be the best web designer and have known different designing softwares. I always try to be ready for learning new techniques which can help me to achieve my goal. Thank you so much for giving extra knowledge here.
Post a Comment