I have two images, one of which is a small icon that is superimposed over the first image. My icon has a white background, so when the icon is placed over the other image, we get this effect where a white square appears over the image. Ideally, I do not want to display this white background on top of my other image. Is there is a CSS property I can apply to my icon to make its white background transparent?
Actually there is a way although only currently supported on Chrome, Firefox, and Safari. If the background color is white, you can add the CSS property:
mix-blend-mode: multiply;
You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
Opacitator
mix-blend-mode does work for some browsers, but we've found that it causes performance issues in chrome, I have no idea why.
A designer on my team came up with this genius hack, where you create a layer that is mostly transparent, but when it is laid over a white background, it's color will match the color of the surrounding background.
The way this "magical" color is found; is by calculating how much darker each color axis should be for the amount of opacity removed. The formula for this is 255 - ( 255 - x ) / opacity. The issue is: If the opacity is set too low the formula gives you negative numbers (which can't be used). If the opacity is too high, you'll get some coloring on the non-white portions of your image.
Initially we used a spreadsheet that would do the calculations and through manual trial and error we would find that Goldilox color.
Once we started using sass I realized that this can be accomplished with a binary search. So I created a sass function that does the work for us.
Check out this gist on sassmeister. Pass your background color in-to the opacitator function on line 56 of the sass-code. and use the generated rgba color in a div (or a pseudo element) to overlay the image.
I also created a working example on codepen.
As there is no reliable way to remove background with CSS, sharing a code snippet of how I did it with JS:
public async removeImageBackground(image) {
const backgroundColor = { red: 255, green: 255, blue: 255 };
const threshold = 10;
const imageElement = new Image();
imageElement.src = image;
await new Promise(function(resolve) { imageElement.addEventListener('load', resolve); });
var canvas = document.createElement('canvas');
canvas.width = imageElement.naturalWidth;
canvas.height = imageElement.naturalHeight;
var ctx = canvas.getContext('2d');
ctx.drawImage(imageElement, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
for (var i = 0; i < imageData.data.length; i += 4) {
const red = imageData.data[i];
const green = imageData.data[i + 1];
const blue = imageData.data[i + 2];
if (Math.abs(red - backgroundColor.red) < threshold &&
Math.abs(green - backgroundColor.green) < threshold &&
Math.abs(blue - backgroundColor.blue) < threshold) {
imageData.data[i + 3] = 0;
}
}
ctx.putImageData(imageData, 0, 0);
return canvas.toDataURL(`image/png`);
}
You can make a container for your image.
Then for the css of the container:
overflow:hidden; height: (depends on your image, then make it a smaller px); width:100%;
Hope it helps. :)
No. Not yet...
It is getting very close to possible, though. Check out this article about CSS Filters, an experiemental css feature, that is doing some things client-side that are neat.
CSS Filters
Related
I've searching a way to fill an image surface with a color with canvas but didn't find what i'm looking for.
Is there actually any way to do it?
There is an example of what i'm talking about:
If the image is like this:
I would need to paint this with canvas:
Just fill the actual image surface with a color (black in this case).
I think this Android method does the same, so I hope there is something similar on canvas.
imageView.setColorFilter(Color.RED);
Thank you in advance.
You can use composition mode to do this, more specifically the source-in:
ctx.globalCompositeOperation = "source-in";
ctx.fillRect(x, y, w, h); // fill the image area using current color
// Using the original colored logo in OPs post:
var img = new Image; img.onload = go; img.src = "//i.stack.imgur.com/kv435.png";
function go() {
var ctx = c.getContext("2d");
c.width = this.width; c.height = this.height;
ctx.drawImage(this, 0, 0);
// change color
ctx.globalCompositeOperation = "source-in";
ctx.fillRect(0, 0, c.width, c.height); // def. color is black
}
<canvas id=c></canvas>
What's important to be aware of though is that composite operations works with the alpha channel. If the image doesn't have an alpha channel but just a white background, this approach won't work. In that case you would need to iterate over each pixel and replace all non-white pixels to the target color pixel.
For this approach you can use getImageData(). But my recommendation is to prepare the image so it has an alpha channel embedded before processing.
Here's a demonstration:
var ctx = document.getElementById("test").getContext("2d");
ctx.shadowColor = "black";
ctx.fillStyle = "white";
ctx.shadowBlur = 10;
ctx.fillRect(10, 10, 10, 10);
ctx.shadowBlur = 50;
ctx.fillRect(70, 10, 10, 10);
ctx.fillRect(70, 70, 70, 70);
<canvas id="test" width="200" height="200"></canvas>
If I set shadowBlur=10 and then draw a small 10x10 square, I get a nice, strong shadow. The same if I set shadowBlur=50 and draw a big 70x70 square. But if I set shadowBlur=50 and then draw a small 10x10 square, I get a very faint, barely visible shadow.
Instead I would have expected a small center square and a large dark shadow all around it.
Obviously I misunderstand how the shadow blur works, so - how does it work, and how do I get a large dark shadow around a small object?
The shadowBlur uses Gaussian blur to produce the shadow internally. The object is drawn to a separate bitmap as stencil in the shadow-color and then blurred using the radius. It does not use the original shape after this step. The result is composited back (as a side-note: there was previously a disagreement on how to composite shadows so Firefox and Chrome/Opera rendered them differently - I think they have landed on source-over in both camps by now though).
If the object is very small and the blur radius very big, the averaging will be thinned by the empty remaining space around the object leaving a more faint shadow.
The only way to get a more visible shadow with the built-in method is to use a smaller radius. You can also "cheat" using a radial gradient, or draw a bigger object with shadow applied to an off-screen canvas but offset relative to the shadow itself so the object doesn't overlap it, then draw the shadow only (using clipping arguments with drawImage()) back to main canvas at desired size before drawing main object.
In newer versions of the browsers you can also produce Gaussian blurred shadows manually using the new filter property on the context with CSS filters. It do require some extra compositing steps and most likely an off-screen canvas for most scenarios, but you can with this method overdraw shadows in multiple steps with variable radii from small to bigger producing a more pronounced shadow at the cost of some performance.
Example of manually generated shadow using filter:
This allow for more complex shapes like with the built-in shadow, but offer more control of the end result. "Falloff" in this case can be controlled by using a easing-function with an initial normalized radius value inside the loop.
// note: requires filter support on context
var ctx = c.getContext("2d");
var iterations = 16, radius = 50,
step = radius / iterations;
for(var i = 1; i < iterations; i++) {
ctx.filter = "blur(" + (step * i) + "px)";
ctx.fillRect(100, 50, 10, 10);
}
ctx.filter = "none";
ctx.fillStyle = "#fff";
ctx.fillRect(100, 50, 10, 10);
<canvas id=c></canvas>
Example of gradient + filter:
This is a more cross-browser friendly solutions as if filter is not supported, at least the gradient comes close to an acceptable shadow. The only drawback is it is more limited in regards to complex shapes.
Additionally, using a variable center point for the gradient allows for mimicking fall-off, light size, light type etc.
Based on #Kaiido's example/mod in comment -
// note: requires filter support on context
var ctx = c.getContext("2d");
var grad = ctx.createRadialGradient(105,55,50,105,55,0);
grad.addColorStop(0,"transparent");
grad.addColorStop(0.33,"rgba(0,0,0,0.5)"); // extra point to control "fall-off"
grad.addColorStop(1,"black");
ctx.fillStyle = grad;
ctx.filter = "blur(10px)";
ctx.fillRect(0, 0, 300, 150);
ctx.filter = "none";
ctx.fillStyle = "#fff";
ctx.fillRect(100, 50, 10, 10);
<canvas id=c></canvas>
Is it possible to write image on canvas and write text with background?
For example like this:
How text works in canvas
Unfortunately no, you can't produce text with background with the text methods - only fill or outline the text itself.
This is because the glyphs from the typeface (font) are converted to individual shapes or paths if you want, where the background of it would be the inner part of the glyph itself (the part you see when using fill). There is no layer for the black-box (the rectangle which the glyph fits within) the glyph is using besides from using its geometric position, so we need to provide a sort-of black-box and bearings ourselves.
On the old computer systems most fonts where binary font which where setting or clearing a pixels. Instead of just clearing the background one could opt to provide a background instead. This is not the case with vector based typefaces by default (a browser has direct access to the glyphs geometry and can therefor provide a background this way).
Creating custom background
In order to create a background you would need to draw it first using other means such as shapes or an image.
Examples:
ctx.fillRect(x, y, width, height);
or
ctx.drawImage(image, x, y [, width, height]);
then draw the text on top:
ctx.fillText('My text', x, y);
You can use measureText to find out the width of the text (in the future also the height: ascend + descend) and use that as a basis:
var width = ctx.measureText('My text').width; /// width in pixels
You can wrap all this in a function. The function here is basic but you can expand it with color and background parameters as well as padding etc.
/// expand with color, background etc.
function drawTextBG(ctx, txt, font, x, y) {
/// lets save current state as we make a lot of changes
ctx.save();
/// set font
ctx.font = font;
/// draw text from top - makes life easier at the moment
ctx.textBaseline = 'top';
/// color for background
ctx.fillStyle = '#f50';
/// get width of text
var width = ctx.measureText(txt).width;
/// draw background rect assuming height of font
ctx.fillRect(x, y, width, parseInt(font, 10));
/// text color
ctx.fillStyle = '#000';
/// draw text on top
ctx.fillText(txt, x, y);
/// restore original state
ctx.restore();
}
ONLINE DEMO HERE
Just note that this way of "measuring" height is not accurate. You can measure height of a font by using a temporary div/span element and get the calculated style from that when font and text is set for it.
I simpler solution is to call fillText twice. First a string of Unicode+2588 █ which is a black rectangle repeated the same length as the text using the background color. And then call fillText as normal with the foreground color.
This function gives you vertically and horizontally centered text with a background. It only works well with monospaced fonts (characters with the same width). The function counts the number of character in the string you which to print and multiplies them with 0.62 (assuming that the width of the font is slightly less than 0.62 times the height). The background is 1.5 times bigger than the font size. Change this to fit your needs.
function centeredText(string, fontSize, color) {
var i = string.length;
i = i*fontSize*0.62;
if (i > canvas.width) {
i = canvas.width;
}
ctx.fillStyle = "RGBA(255, 255, 255, 0.8)";
ctx.fillRect(canvas.width / 2 - i / 2,canvas.height / 2 - (fontSize * 1.5) / 2, i, (fontSize * 1.5) );
ctx.font = fontSize.toString() + "px monospace";
ctx.fillStyle = color;
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.fillText(string, canvas.width / 2, canvas.height / 2);
}
So calling the function would look something like this.
centeredText("Hello World", 30, "red");
Is there any way to convert the image so it appears as a gray scale. Changing rgb is not working as required.
As you probably know, screen color consists of 3 components: red, green and blue. Each component or color (for example, red) has a value from 0 to 255. The value 0 indicates there is no red color and the value 255 would be the brightest possible red color. To convert a color to grayscale you just need to calculate the average for all three components. This can be done using the simple formula below:
grayscalecolor = (red + green + blue) / 3;
Canvas Method
var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
var imgW = imgObj.width;
var imgH = imgObj.height;
canvas.width = imgW;
canvas.height = imgH;
canvasContext.drawImage(imgObj, 0, 0);
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
for(>var y = 0; y < imgPixels.height; y++){
for(>var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
Microsoft Internet Explorer does not support the CANVAS tag, but Microsoft does provide image manipulation through filters. The filter to use for converting images to grayscale is the filter named DXImageTransform.Microsoft.BasicImage.
imgObj.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';
If you're able to use HTML5 you could use a canvas, as seen here.
Google for "canvas grayscale image" the first link will be:
HTML 5 introduces Canvas object which can be used to draw and manipulate images. In this example, I used a Canvas to turn an image into grayscale. If your browser supports Canvas, you should see two images above: the normal image and the grayscale one. The grayscale one is not a separate image, it is generated by utilizing Canvas.
http://permadi.com/tutorial/jsCanvasGrayscale/index.html
If you want this to be done client side (on the browser) with a HTML you will need to use a Canvas. Example here: http://www.youtube.com/watch?v=QJa7tWScXS4
Use PaintbrushJS:
http://mezzoblue.github.com/PaintbrushJS/demo/
It lets you apply any number of filters including greyscale and works in most modern browsers. It's not a 'HTML' solution, that would not be possible without two images.
At least it works on most browsers, including ones which don't yet support HTML5.
is there any way to choose an area on the canvas by color and clip it?
I want to be able to clip an undefined aread that the only thing in common between all the pixels is that they all have the same color.
thanks
Live Demo
Below is a way to select a color.. and do whatever you want with it. I pass a color I want to find iterate over every pixel and remove the color that matches, since Im not sure what you meant by clipping I assumed you mean remove. However please note on large images this method will be slow.
// Takes an array with 3 color components, rgb
function removeColor(color){
var canvasData = ctx.getImageData(0, 0, 256, 256),
pix = canvasData.data;
for (var i = 0, n = pix.length; i <n; i += 4) {
if(pix[i] === color[0] && pix[i+1] === color[1] && pix[i+2] === color[2]){
pix[i+3] = 0;
}
}
ctx.putImageData(canvasData, 0, 0);
}
removeColor([0,0,255]); // Removes blue.
And like Simon pointed out the code above will get the exact color. Below will grab the approximate color, which is good if you have colors overlapping or very close to each other.
Demo 2 with approximation