I have a clutter actor and I need it to be painted without transparency. I can get the background color and set alpha to 255, but that doesn't work with background images or border images. They are defined through CSS by the user, so I can't just edit them.
What I currently do to remove the background-color alpha:
let color = actor.get_background_color();
color.alpha = 255;
actor.set_background_color(color);
I am not who writes the actor. I'm a user of the actor so I can't rewrite its paint methods. Any way to flatten it?
Related
QRcode image
In this Qrcode image, the background color is almost the same as eye/data color means the contrast level is very low so it is difficult or unable to scan the QR. I am using this library npm contrast color calc to find the nearest contrast color,
let eyeCol = ColorContrastCalc.colorFrom('#535050');
let backgroundCol = ColorContrastCalc.colorFrom('#67696b');
if(eyeCol && backgroundCol){
if(eyeCol.contrastRatioAgainst(backgroundCol) <3){
let aaContrast1 = eye_Color.findLightnessThreshold(background_Color, 'AA');
return aaContrast1;
}
}
///////output: '#54C571' //////////
Output color coming from this code is far from the given color.
But I want to restrict users to select the background color which might overlap with the eye color or foreground color. If user select same color for both (let say for eye and background) then it has to return the nearest high contrast color for background, so it will become easier for the scanners to differentiate the foreground from the background.
depending on the final output type, screen/print/download, you could use...
css filter grayscale() and contrast()
does the QR code generator library have config parameters for color or size?
https://www.w3.org/2013/chroma/
I have a question about my HTML5 canvas, how can I change the color of a shape using HEX?
I have been able to change the color and size of a text but I would like to do the same to a shape, in this case a circle.
Right now you enter a text in a textbox and you can change color and size.
Also, I want to be able to click on the canvas to paint one circle, then change color and make another circle in a different color than the first one.
My code for the text jsfiddle.net/e43nfx1d/4/
My code for the circle jsfiddle.net/w8wsv7sr
It was pretty easy to do the changes on the text but now, with the circle, Im totally lost.
/Wilma
As I realized your question, your problem is to changing the color of filled circle.
There isn't any big problem here; You can change it as the same way of changing the text color.
Just like this:
context.fillStyle = "#333";
// Or any other color format that css supports
Here's your working example: http://jsfiddle.net/76koy1x7/
I'm building a website and I need a user to be able to select an image (a transparent gif with black sign on it) and select a color. I have all the gifs in black with transparent background.
How can I change the color of the gif (the black only) to the color the user chose? I was thinking about using a canvas for this but I'm not sure...
You can use a canvas for this. There is no need to iterate the pixel buffer as many suggests and I would recommend avoiding if possible for two reasons:
CORS restriction may apply if image is loaded from a different origin
Performance
There is a much easier way involving composite modes:
Live demo
/// load image here, then:
function render() {
/// this composite mode clears the canvas as well
ctx.globalCompositeOperation = 'copy';
ctx.drawImage(img, 0, 0);
/// this mode fills in whatever, in the image
ctx.globalCompositeOperation = 'source-in';
/// color to change GIF to:
ctx.fillStyle = '#00c';
/// fill color into non-alpha pixels
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
The copy mode works here as the image is the only thing we want to draw to the canvas. If you need to draw in other details as well then use source-over instead and manually clear the canvas using clearRect().
Tip: You can also draw another image on top instead of a fill color.
Original GIF
Changed to blue color
ctx.fillStyle = '#00c';
Changed to red color
ctx.fillStyle = '#c00';
etc.
Assuming that you want to change the color of the black parts of the image (not the transparent parts) you'll have to use canvas to get the black pixels of the image and draw a new image replacing these pixels with the color your user has chosen.
If you want to replace the transparent parts, simply setting a background color using CSS will do the trick.
I am adding a div dynamically and adding background colors to these divs. The background color values are coming from the backend, so one div for each colour is added and its background colour is set to that colour. But if some colour that is not valid for CSS background color property comes through, it shows as a white background.
For example 'Leopard' colour. Is there any way to validate colous and not add the div if the color is not a valid background colour?
Make a list from the W3 Specifications.
Then check to see if your color is in that list. Here is an example.
colors = ['lime', 'orange', 'pink'];
if (colors.indexOf(the_color) >= 0) {
// Set background
}
I would absolutely avoid using named colours (eg. red, white, etc...) while using instead the standard hex declaration, eg:
#FF0000 = #F00 = red
#000000 = #000 = black
#ffffff = #fff = white
#ac25B1 = some other *unnamed* colour
This way, you could easily check that the string is a valid HEX string, either 6 or 3 character long.
I think you could re-use this question's solution.
It involves a jQuery script that checks if the submitted color really produces RGB values. I'm copy-pasting it.
colorToTest = 'lime'; // 'lightgray' does not work for IE
$('#dummy').css('backgroundColor', 'white');
$('#dummy').css('backgroundColor', colorToTest);
if ($('#dummy').css('backgroundColor') != 'rgb(255, 255, 255)' || colorToTest == 'white') {
alert(colorToTest+' is valid');
}
Here's how it works:
First, the colorToTest variable is set to the color you wish to validate;
Then, the background of the target div (#dummy in this case) is set to white via jQuery;
At last, the background of the target div is set to colorToTest.
If the color is still white, and colorToTest is not White, the backend color is not valid.
However, since an unvalid color won't produce any layout, you could just set the div background to white and then apply the backend color. If it's vaild, it will change. You could however use the above script to validate it, if you wish.
The background color for one of my pages is set pulled from the background color the users set as their twitter background color. I have a page that has a rounded box with a black border. The border doesnt look good if the background color is dark, so i'd like to remove the border of the background is darker than an arbitrary hex color.
The way I was thinking about doing this was using a regex to pull the 3 RGB values and summing them, and comparing that to my reference color. Is there a better, way to accomplish this?
You could write a function that converts between RGB and HSL or HSV, and use the lightness or brightness value.
Wikipedia has the math for HSV -> RGB conversion, but not the other way.
http://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB
You could also probably pull some JS from this page.
http://www.csgnetwork.com/csgcolorsel4.html
You may also need take in account perceptual brightness of colors (i.e. bright-blue #0000FF looks much darker than bright-red #FF0000 which in turn is much-much darker than #00FF00).
So I'd split the color value into separate bytes and then multiply each by some coefficient:
function getPerceptualBrightness(color) {
var r = parseInt(color.substring(0,2),16);
var g = parseInt(color.substring(2,4),16);
var b = parseInt(color.substring(4,6),16);
return r*2 + g*3 + b;
}
var green_b = getPerceptualBrightness('00A000');
var blue_b = getPerceptualBrightness('0000FF');
if (green_b > blue_b)
{
alert("Green is brighter though it's numerical value is smaller");
}
This may be less precise than converting to HSL but the latter feels like an overkill for the task...
If the rounded corners are images, this is better treated as a photoshop problem. Save for web/png-24/transparency dither.
If I understand your problem correctly it's not just an issue of light and dark but of hue too. Those corners are dithered to a background that doesn't match these alternate ones. By that I mean the rounded edges are slowly faded from the border to the background color so the jagged pixel edges don't appear to be as jarring.
An arbitrary light/dark solution where you average the three and compare would only work well with fairly extreme lights and darks I would imagine but with a png transparency dither they'll soft-blend into any background automatically. There are workarounds for IE 6 if you have to support it.
You may be able to use the luminance of the color. jPaq offers this function. Still, I am not sure that this is what you are looking for. Here is Wikipedia's definition of luminance: http://en.wikipedia.org/wiki/Luminance.