Javascript - Get the average colours of pixels in a square - javascript

So I currently have a transparent web page (all the elements are visible but the background is transparent - I am using a software to do this and the background is completely transparent and can be clicked through).
What I need to do is to be able to move a box to select a specific part of the web page and then for the box to detect the colour that is behind the window (as the background is transparent)?
This picture should make a little more sense of it; the red is, for example, a desktop background. This window would be opened and the box moved to be able to detect the colour.
The idea would be like this: http://lokeshdhakar.com/projects/color-thief/ but I need it to work on a transparent window and not an image which I am unsure is possible with HTML and JS?
I understand it is possible to use an image but I would need this to continuously check the colour and when there is a change, update quickly.
Thanks for any help!

Related

How can i draw a part of an image on top of a html page depending on my mouse movement? (with or without canvas)

I want to draw an image on top of my html page depending on my mouse movement.
How can i do that? Is it a better approach to put the image below the rest of the html and scratch the html somehow away, or tu put the image above it and add it partially on top.
I found solutions on the internet with 2 images on top of each other where the top one is erased with canvas, but since i have multiple elements i want to overwrite, i have no idea how to solve it.
Assuming I've interpreted the question correctly, that the requirement is to allow the user to 'scratch away' at the page gradually revealing an image, you could do it either way.
There are libraries that will create a canvas of a page (or part thereof) such as htm2canvas. Using one of these you turn your page into an image, place it over the given image and remove (make transparent) pixels on the top canvas as the mouse moves. The drawback with this approach is that it's possible the conversion of the HTML to canvas isn't totally complete. There may be some aspects for example of CSS that aren't correctly rendered.
To be sure therefore it's probably better to do it the other way round. Lay a blank canvas over the page and copy the image to another canvas with the same dimensions but which is outside the viewport. As the mouse moves over the blank canvas copy the relevant pixels from the offscreen canvas to it.
If you could confirm that I've understood your question correctly I could go into more detail.

Javascript - How to create an image using canvas based on pixel colors on the site?

I have a site where it has div tags with background colors, and I use relative positioning to move them all together so it looks like an image. I moved them so its exactly on the top left of the page.
How do I create an image out of it, so like if there was a button, when it gets clicked, it creates an image of width 608px and height 105px, and then asks the user if they want to save it or open it or close it (standard download box)?
I would need to get the pixel color starting from index (0,0) right?
Instead of using background images on divs, just draw images onto a canvas. Then take a look at this http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

Flash-looking animated banner with JQuery

I am trying to create a banner for the top of page, but haven't found any code yet that combines all of what I need. I have included an illustration of what I'm trying to do.
A) I have 4 buttons (each an image file), two to either side default image in the center. This is the main/inactive state.
All of the buttons would have similar animation when hovered over. For the sake of this question, I only illustrated two of the buttons.
B) If you hover over Box 1 (top left), the button would change and text and lines would slide out from left to right. Also, the center image would change. And, to make things extra challenging, the left button and center image would link to Page 1. When you move away, the text slides back to the left, and the image returns to the default state in A. The blue box would behave the same way, linking to Page 2.
C) In a similar manner, if you hover over Box 4 (bottom right), the button would change and text and lines would slide out from right to left. Also, the center image would change. The right button and center image would link to Page 4. When you move away, the text slides back to the right, and the image returns to the default state in A. The green box would behave in the same manner, linking to Page 3.
The closest I've found is this: jQuery image slide on hover effect (horizontal) I was thinking that if I used the static images of all (A) as a background image, maybe I could create a transparent sprite, with only the active version of the hovered button and the center image, to slide left or right on hover.
I can see how the above example might would work for Boxes 1 and 3 (top left and right) and give the illusion of the lines sliding out as the image slides either left or right, but I'm not sure how it would work for Boxes 2 and 4.
Am I on the right track, or am I asking for way more than what's possible in JQuery? I'd be fine with loosing the animated text (I could just make them part of the hover images), but the buttons and center image need to change on hover, and they need to link to a page.
I've made a widget in jQuery that was confused with flash before. I think you need to breakdown each element of your widget into discrete pieces. You are making a new widget. There will be no methods doing what you want. You will have to use the .animate() method explained here. http://api.jquery.com/animate/ You will be animating one CSS class to another CSS class using the .animate() method.
This page has a good primer on the animate method.
http://viralpatel.net/blogs/2010/03/understanding-jquery-animate-function.html
Here's what I would do:
I would make the HTML of the page you want.
I would create CSS of each style of box that you will have.
I would have all the same CSS directives on every box that will
animate. I have found the animate method more agreeable if all CSS
that is to be computed has the same parameters but with different
values.
I would use full resolution images in the 4 outer boxes.
I would animate the div containing the image, not the image itself.
I would make the image fill the div dynamically so that when I
changed the size of the div the image would be a gimmie.
I would work in firebug testing out different commands and see how
they behave. This is critical. The interactive javascript console
is your friend.
This is a big task... when you're done this will be a nice feather in your cap! Maybe after that you could turn it into a jQuery plugin for others to use!
I decided to mess around with this for a bit, here is what I whipped up so far. No links as yet, but for a half hour I don't feel too bad about that :)
http://jsfiddle.net/BH8s5/3/

Trying to punch a hole through a jQuery overlay, problems

I am trying to do something similar to expose from jQuery toolkit.
http://flowplayer.org/tools/demos/toolbox/expose/index.html
Except I am trying to use an image as a background and have the overlay over it and reveal only a portion of the image as 100% visible (kind of like a reverse highlight).
My current solution is:
I make an overlay on a image background div and make the z-index of the visible section div higher than that of the overlay. But since the background of the visible section div is transparent the div just shows the overlay. The way the plugins I have seen get around this is by setting the background of the visible section div to a color allowing that whole div to set above the overlay since I am using a pretty big image, I don't have the option to use a colored background on the div. I also don't want to show a cloned copy of the original image because these background images are huge.
I couldn't find any documentation of how to do this online. I'd appreciate any feedback I could get.
My suggestion would be to absolutize the element, set it to a relatively high z-index, then sit your faded layer below that, but still higher than any other content. It would give the appearance of the effect you want.

Slideshow in Javascript when the image changed is the background image

The client wants to have a simple slideshow with a little twist: he wants the menu to be on top of the image being changed.
what would be the way to achieve this using css and javascript?
Don't use a background image, just put the menu in a division and position it absolutely on the top of the image somewhere. You can't resize background images and if the images are bigger than the client's visible area they will be cut off.
As you normally do. The order of the image and menu is important. If the menu is after the image then you are ok. If you can't/won't change the order then you'll have to use the css z-index property.

Categories