Interactive Canvas Color Picker Eyedropper

This is an Interactive Canvas Color Picker Eyedropper. It uses the ZIM.js framework to render a native color extraction tool directly over an image. Its function is to sample pixel data and dynamically theme the surrounding interface. The effect is immediate, bridging image content with UI styling through raw canvas manipulation.

Specs

• Weight: ~300 KB (ZIM.js framework).
• Dependencies: ZIM.js.
• Browser Support: Modern browsers supporting HTML5 Canvas and ES6 modules.

Anatomy

The component bypasses the DOM, building its structure entirely within the Canvas API.

• HTML (The Skeleton): A blank document. The framework automatically injects the <canvas> element into the body.
• CSS (The Skin): Non-existent. All visual properties, layouts, and typography are calculated and painted frame-by-frame via JavaScript.
• JS (The Nervous System): The ready function initializes the environment. It loads the Pic asset, instantiates the ColorPicker, and binds the eyedropper to the image via the dropperTarget property. Event listeners dictate the background and text color updates.

Logic

The core intelligence of this snippet lies in the automated contrast adjustment and target binding.

const colorPicker = new ColorPicker({
    alphaPicker: false,
    dropperTarget: drAbstract,
    spectrumTitle: "Choose Side Color"
});

colorPicker.on("ok", ()=>{
    F.color = colorPicker.currentValue;
    description.color = toBW(F.color);
    S.update();
});

The dropperTarget: drAbstract parameter maps the picker directly to the image’s pixel data array. The toBW() function mathematically evaluates the selected color’s luminance and instantly flips the text color to either strict black or white. This ensures absolute typographic legibility without manual threshold calculations.

Feel

The interaction is tactile and precise. The eyedropper glides over the canvas, sampling individual pixels with 1:1 accuracy. The environment reacts instantly upon confirmation, creating a tight, closed loop between user input, visual content, and global interface state.