Mirrors/ICEcoder
2
0
Fork 0
mirror of https://github.com/icecoder/ICEcoder.git synced 2026-03-03 07:13:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

Show light or dark text on picker previews

Browse Source 
Declare all vars at the top of function
If the R, G or B values have less than 50% saturation or we have a high
yellow like color, use a white text color, otherwise black
Set that on both the X&Y preview and the clicked color preview
This commit is contained in:
Matt Pass
2013-06-21 20:53:00 +01:00
parent bccf5d0f48
commit ebfafc66cb
2 changed files with 46 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
lib/ice-coder.js
View File

@@ -1349,8 +1349,10 @@ var ICEcoder = {
// Draw a canvas image based on actual img node image src
drawCanvasImage: function (imgThis) {
var canvas = document.getElementById('canvasPicker').getContext('2d');
var img = new Image();
var canvas, img, x, y, imgData, R, G, B, rgb, hex, textColor;
canvas = document.getElementById('canvasPicker').getContext('2d');
img = new Image();
img.src = imgThis.src;
img.onload = function() {
document.getElementById('canvasPicker').width = imgThis.width;
@@ -1361,26 +1363,29 @@ var ICEcoder = {
// Show pointer colors on mouse move over canvas
document.getElementById('canvasPicker').onmousemove = function(event) {
// get mouse x & y
var x = event.pageX - this.offsetLeft;
var y = event.pageY - this.offsetTop;
x = event.pageX - this.offsetLeft;
y = event.pageY - this.offsetTop;
// get image data & then RGB values
var imgData = canvas.getImageData(x, y, 1, 1).data;
var R = imgData[0];
var G = imgData[1];
var B = imgData[2];
var rgb = R+','+G+','+B;
imgData = canvas.getImageData(x, y, 1, 1).data;
R = imgData[0];
G = imgData[1];
B = imgData[2];
rgb = R+','+G+','+B;
// Get hex from RGB value
var hex = top.ICEcoder.rgbToHex(R,G,B);
hex = top.ICEcoder.rgbToHex(R,G,B);
// set the values & BG colours of the input boxes
document.getElementById('rgbMouseXY').value = rgb;
document.getElementById('hexMouseXY').value = '#' + hex;
document.getElementById('hexMouseXY').style.backgroundColor = document.getElementById('rgbMouseXY').style.backgroundColor = '#' + hex;
textColor = R<128 || G<128 || B<128 && (R<200 && G<200 && B>50) ? '#fff' : '#000';
document.getElementById('hexMouseXY').style.color = document.getElementById('rgbMouseXY').style.color = textColor;
};
// Set pointer colors on clicking canvas
document.getElementById('canvasPicker').onclick = function() {
document.getElementById('rgb').value = document.getElementById('rgbMouseXY').value;
document.getElementById('hex').value = document.getElementById('hexMouseXY').value;
document.getElementById('hex').style.backgroundColor = document.getElementById('rgb').style.backgroundColor = document.getElementById('hex').value;
document.getElementById('hex').style.color = document.getElementById('rgb').style.color = textColor;
}
},