You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(originalImg, zoomLevel = "8", maxImageWidth = "800") {
const zoom = parseInt(zoomLevel) || 8;
const maxWidth = parseInt(maxImageWidth) || 800;
// Main container
const container = document.createElement('div');
container.style.display = 'flex';
container.style.flexDirection = 'column';
container.style.gap = '15px';
container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
container.style.maxWidth = '100%';
container.style.color = '#333';
// Top Scanner Panel
const topBar = document.createElement('div');
topBar.style.display = 'flex';
topBar.style.flexWrap = 'wrap';
topBar.style.justifyContent = 'space-between';
topBar.style.alignItems = 'center';
topBar.style.padding = '15px';
topBar.style.backgroundColor = '#f8f9fa';
topBar.style.border = '1px solid #dee2e6';
topBar.style.borderRadius = '8px';
topBar.style.gap = '20px';
const headerText = document.createElement('div');
headerText.innerHTML = `
<h3 style="margin: 0 0 5px 0; font-size: 16px;">Scanner Identifier</h3>
<p style="margin: 0; font-size: 13px; color: #666;">Hover over the image to scan and magnify pixels. Click to pick a color identifier.</p>
`;
const scanInfoBox = document.createElement('div');
scanInfoBox.style.display = 'flex';
scanInfoBox.style.alignItems = 'center';
scanInfoBox.style.gap = '15px';
// Scanner Magnifier
const magSize = 80;
const magnifierCanvas = document.createElement('canvas');
magnifierCanvas.width = magSize;
magnifierCanvas.height = magSize;
magnifierCanvas.style.border = '2px solid #ced4da';
magnifierCanvas.style.borderRadius = '4px';
magnifierCanvas.style.backgroundColor = '#fff';
// Crisp pixels
magnifierCanvas.style.imageRendering = 'pixelated';
const magCtx = magnifierCanvas.getContext('2d');
magCtx.imageSmoothingEnabled = false;
// Initially draw empty state
magCtx.fillStyle = '#e9ecef';
magCtx.fillRect(0, 0, magSize, magSize);
magCtx.fillStyle = '#adb5bd';
magCtx.font = '12px sans-serif';
magCtx.textAlign = 'center';
magCtx.textBaseline = 'middle';
magCtx.fillText('SCAN', magSize/2, magSize/2);
const valuesInfo = document.createElement('div');
valuesInfo.style.fontFamily = 'monospace';
valuesInfo.style.fontSize = '14px';
valuesInfo.style.minWidth = '160px';
valuesInfo.innerHTML = `
<div style="margin-bottom:4px; font-weight:bold;">Awaiting scan...</div>
<div style="color:#666;">RGB: --</div>
<div style="color:#666;">HEX: --</div>
<div style="color:#999; font-size:11px; margin-top:4px;">COORD: --</div>
`;
const colorPreview = document.createElement('div');
colorPreview.style.width = '40px';
colorPreview.style.height = '40px';
colorPreview.style.borderRadius = '50%';
colorPreview.style.border = '2px solid #dee2e6';
colorPreview.style.backgroundColor = '#fff';
scanInfoBox.appendChild(magnifierCanvas);
scanInfoBox.appendChild(colorPreview);
scanInfoBox.appendChild(valuesInfo);
topBar.appendChild(headerText);
topBar.appendChild(scanInfoBox);
// Canvas container
const canvasWrapper = document.createElement('div');
canvasWrapper.style.position = 'relative';
canvasWrapper.style.alignSelf = 'flex-start';
canvasWrapper.style.cursor = 'crosshair';
canvasWrapper.style.border = '1px solid #ced4da';
canvasWrapper.style.borderRadius = '4px';
canvasWrapper.style.overflow = 'hidden';
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d', { willReadFrequently: true });
// Scaling
let width = originalImg.width;
let height = originalImg.height;
if (width > maxWidth) {
height = Math.round((height * maxWidth) / width);
width = maxWidth;
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(originalImg, 0, 0, width, height);
// Scanner Reticle
const reticleSize = zoom * 2; // Show roughly what's magnified
const reticle = document.createElement('div');
reticle.style.width = reticleSize + 'px';
reticle.style.height = reticleSize + 'px';
reticle.style.border = '1px solid #fff';
reticle.style.boxShadow = '0 0 0 1px #000, inset 0 0 0 1px #000';
reticle.style.position = 'absolute';
reticle.style.pointerEvents = 'none';
reticle.style.display = 'none';
reticle.style.transform = 'translate(-50%, -50%)';
reticle.style.zIndex = '10';
canvasWrapper.appendChild(canvas);
canvasWrapper.appendChild(reticle);
// Picked Identifiers Area
const pickedContainer = document.createElement('div');
pickedContainer.style.display = 'flex';
pickedContainer.style.flexWrap = 'wrap';
pickedContainer.style.gap = '10px';
pickedContainer.style.padding = '15px';
pickedContainer.style.border = '1px dashed #ced4da';
pickedContainer.style.borderRadius = '8px';
pickedContainer.style.minHeight = '50px';
pickedContainer.style.backgroundColor = '#fdfdfd';
const pickedTitle = document.createElement('div');
pickedTitle.style.width = '100%';
pickedTitle.style.fontWeight = '600';
pickedTitle.style.fontSize = '14px';
pickedTitle.style.color = '#495057';
pickedTitle.innerText = 'Picked Identifiers (Click history badge to remove):';
pickedContainer.appendChild(pickedTitle);
container.appendChild(topBar);
container.appendChild(canvasWrapper);
container.appendChild(pickedContainer);
// Helper Functions
const rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => {
const hex = x.toString(16);
return hex.length === 1 ? '0' + hex : hex;
}).join('').toUpperCase();
const getPixelColor = (x, y) => {
// Boundaries check
x = Math.max(0, Math.min(x, width - 1));
y = Math.max(0, Math.min(y, height - 1));
const pixel = ctx.getImageData(x, y, 1, 1).data;
return { r: pixel[0], g: pixel[1], b: pixel[2], hex: rgbToHex(pixel[0], pixel[1], pixel[2]) };
};
const updateMagnifier = (x, y) => {
magCtx.fillStyle = '#e9ecef';
magCtx.fillRect(0, 0, magSize, magSize);
const srcSize = Math.floor(magSize / zoom);
const halfSrc = Math.floor(srcSize / 2);
const startX = x - halfSrc;
const startY = y - halfSrc;
const validSx = Math.max(0, startX);
const validSy = Math.max(0, startY);
const validEx = Math.min(width, startX + srcSize);
const validEy = Math.min(height, startY + srcSize);
const validSw = validEx - validSx;
const validSh = validEy - validSy;
if (validSw > 0 && validSh > 0) {
const dx = (validSx - startX) * zoom;
const dy = (validSy - startY) * zoom;
const dw = validSw * zoom;
const dh = validSh * zoom;
magCtx.drawImage(canvas, validSx, validSy, validSw, validSh, dx, dy, dw, dh);
}
// Draw crosshair on magnifier
magCtx.strokeStyle = 'rgba(255, 0, 0, 0.7)';
magCtx.lineWidth = 1;
magCtx.beginPath();
magCtx.moveTo(magSize / 2, 0);
magCtx.lineTo(magSize / 2, magSize);
magCtx.moveTo(0, magSize / 2);
magCtx.lineTo(magSize, magSize / 2);
magCtx.stroke();
// Highlight exact center pixel
magCtx.strokeRect((magSize/2) - (zoom/2), (magSize/2) - (zoom/2), zoom, zoom);
};
// Events
canvas.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
const x = Math.floor(e.clientX - rect.left);
const y = Math.floor(e.clientY - rect.top);
if (x >= 0 && x < width && y >= 0 && y < height) {
reticle.style.display = 'block';
reticle.style.left = x + 'px';
reticle.style.top = y + 'px';
const color = getPixelColor(x, y);
colorPreview.style.backgroundColor = color.hex;
valuesInfo.innerHTML = `
<div style="margin-bottom:4px; font-weight:bold; color:${color.hex}; background:#333; display:inline-block; padding:2px 6px; border-radius:3px;">Scanned</div>
<div>RGB: (${color.r}, ${color.g}, ${color.b})</div>
<div>HEX: ${color.hex}</div>
<div style="color:#999; font-size:11px; margin-top:4px;">COORD: X:${x} Y:${y}</div>
`;
updateMagnifier(x, y);
}
});
canvas.addEventListener('mouseleave', () => {
reticle.style.display = 'none';
valuesInfo.innerHTML = `
<div style="margin-bottom:4px; font-weight:bold;">Awaiting scan...</div>
<div style="color:#666;">RGB: --</div>
<div style="color:#666;">HEX: --</div>
<div style="color:#999; font-size:11px; margin-top:4px;">COORD: --</div>
`;
magCtx.fillStyle = '#e9ecef';
magCtx.fillRect(0, 0, magSize, magSize);
magCtx.fillStyle = '#adb5bd';
magCtx.fillText('SCAN', magSize/2, magSize/2);
colorPreview.style.backgroundColor = '#fff';
});
canvas.addEventListener('click', (e) => {
const rect = canvas.getBoundingClientRect();
const x = Math.floor(e.clientX - rect.left);
const y = Math.floor(e.clientY - rect.top);
const color = getPixelColor(x, y);
const badge = document.createElement('div');
badge.style.display = 'flex';
badge.style.alignItems = 'center';
badge.style.gap = '8px';
badge.style.padding = '8px 12px';
badge.style.backgroundColor = '#fff';
badge.style.border = '1px solid #dee2e6';
badge.style.borderRadius = '24px';
badge.style.boxShadow = '0 2px 4px rgba(0,0,0,0.05)';
badge.style.fontFamily = 'monospace';
badge.style.fontSize = '12px';
badge.style.cursor = 'pointer';
badge.title = 'Click to remove';
const swatch = document.createElement('div');
swatch.style.width = '18px';
swatch.style.height = '18px';
swatch.style.backgroundColor = color.hex;
swatch.style.borderRadius = '50%';
swatch.style.border = '1px solid #adb5bd';
const textWrapper = document.createElement('div');
textWrapper.style.display = 'flex';
textWrapper.style.flexDirection = 'column';
const hexTxt = document.createElement('span');
hexTxt.innerText = color.hex;
hexTxt.style.fontWeight = 'bold';
const coordTxt = document.createElement('span');
coordTxt.innerText = `X:${x} Y:${y}`;
coordTxt.style.fontSize = '10px';
coordTxt.style.color = '#868e96';
textWrapper.appendChild(hexTxt);
textWrapper.appendChild(coordTxt);
badge.appendChild(swatch);
badge.appendChild(textWrapper);
// Hover effect for removal
badge.addEventListener('mouseenter', () => { badge.style.borderColor = '#fa5252'; badge.style.backgroundColor = '#fff5f5'; });
badge.addEventListener('mouseleave', () => { badge.style.borderColor = '#dee2e6'; badge.style.backgroundColor = '#fff'; });
badge.addEventListener('click', () => pickedContainer.removeChild(badge));
pickedContainer.appendChild(badge);
});
return container;
}Apply Changes
