I need to convert a png with color into a png that is only black and white. I'm currently processing images Sharp.js. But I haven't been able to find a way to generate a monochromatic image.
I found a greyscale option.
const sharp = require('sharp');
sharp('color-image.png')
.toGreyscale()
.toFile('b-w-image.png')
.then(() => {
console.log('Huzzah!')
});
But this doesn't work for my needs. I'm looking for a pure black and white image with no shades of grey.
I haven't found anything in the documentation that allows you to specify the level of greyscale to allow for only a B/W image.
Is there a method available that converts the image into pure black and white?
This will get you an image with two colors. Increase the contrast using the linear option.
const sharp = require('sharp');
sharp('ben.png')
.greyscale() // make it greyscale
.linear(1.5, 0) // increase the contrast
.png({colors:2}) // reduce image to two colors
.toFile('b-w-image.png')
.then(() => {
console.log('Huzzah!')
});
I need to shift the color in an image, e.g. from gray to green. But only the parts that are not white and/or black...
For UIKit I had a handy extension:
// colorize image with given tint color
// this is similar to Photoshop's "Color" layer blend mode
// this is perfect for non-greyscale source images, and images that have both highlights and shadows that should be preserved
// white will stay white and black will stay black as the lightness of the image is preserved
func tint(tintColor: UIColor) -> UIImage {
return modifiedImage { context, rect in
// draw black background - workaround to preserve color of partially transparent pixels
context.setBlendMode(.normal)
UIColor.black.setFill()
context.fill(rect)
// draw original image
context.setBlendMode(.normal)
context.draw(self.cgImage!, in: rect)
// tint image (loosing alpha) - the luminosity of the original image is preserved
context.setBlendMode(.color)
tintColor.setFill()
context.fill(rect)
// mask by alpha values of original image
context.setBlendMode(.destinationIn)
context.draw(self.cgImage!, in: rect)
}
}
is there any way to generate the same functionality with the tint options in SwiftUI?
".colorMultiply" colors white as well.
".saturation(0.5)" directly generates a grayscale image.
You can continue to use your extension, like
var body: some View {
Image(uiImage: UIImage(named: "some")!.tint(tintColor: UIColor.red))
}
I was looking for the wrong keyword.
The actually way to do this in SwiftUI is hueRotation!
It only works with coloured images and not with grayscale images though.
See example below:
Color.blue
.hueRotation(.degrees(-45.0))
I have several fonts that I would like to use that are basically outlines of letters, but the insides are transparent. How would I go about filling only the inside areas of these fonts with with a color? I suspect it would be using the special blitting RGBA_BLEND modes, but I am not familiar with their functionality.
Here is an example of the font I am using:
https://www.dafont.com/fipps.font?back=bitmap
Right now, I am simply rendering the font onto a surface, and I've written a helper function for that. Ideally I would be able to integrate this into my function.
def renderText(surface, text, font, color, position):
x, y = position[0], position[1]
width, height = font.size(text)
position = x-width//2, y-height//2
render = font.render(text, 1, color)
surface.blit(render, position)
Thank you so much for any help you can give me!
An option is to define a surface the size of the text, fill that with the color you want, and blit the text on that. For example you could do this:
text = font.render('Hello World!', True, (255, 255, 255)
temp_surface = pygame.Surface(text.get_size())
temp_surface.fill((192, 192, 192))
temp_surface.blit(text, (0, 0))
screen.blit(temp_surface, (0, 0))
This will create a temporary surface that should fill in the transparent pixels of a text surface. There is another option of using set_at() but its too expensive in processing power for what you are doing and is best used for pre-processing surfaces.
Im certain that a better option using BLEND_RGBA_MULT will come from a more experienced user. Im not too good at blending modes either.
I am trying to show the hue component of the image from my webcam. I have split apart the image into the hue component but I can't figure out how to show the hue component as the pure colors. For example if one pixel of the image was B=189 G=60 R=60 then in HSV, H=0. I don't want the draw image to be the the gray values of hue but the RGB equivalent of the hue or H=0 -> B=0 G=0 R=255
IplImage *image, *imageHSV, *imageHue;
image = cvQueryFrame(capture); //image from webcam
imageHSV = cvCreateImage( cvGetSize(image), IPL_DEPTH_8U, 3 );
imageHue = cvCreateImage( cvGetSize(image), IPL_DEPTH_8U, 1 );
cvCvtColor( image, imageHSV, CV_BGR2HSV );
cvSplit( imageHSV, imageHue, 0, 0, 0 );
I have a feeling there is a simple solution so any help is appreciated.
If I understand you correctly, you want to "correctly" visualize just the Hue component. You can create another imageSat and imageVal, one-channel each and filled with 255 (maximum). Then cvMerge your imageHue with the other two, to create a new HSV image, and convert that back to RGB/BGR for final display.
How can I display vertical text (90 degree rotated) in all browsers?
(source: sun.com)
The problem is independent from the server side language. If it's not a problem when the vertically rendered text isn't text anymore but an image, choose the solution provided by tharkun. Otherwise, there are ways to do it in the presentation layer.
First, there's (at the moment) an IE-only solution, which is part of the CSS3 standard. You can check it live.
p {
writing-mode: tb-rl;
}
The CSS3 text module also specify some properties for text orientation.
Other guys do it with SVG.
I don't think you can rotate text with PHP/HTML/CSS. But you can create an image with GD containing vertical text.
Example:
header ("Content-type: image/png");
// imagecreate (x width, y width)
$img_handle = #imagecreatetruecolor (15, 220) or die ("Cannot Create image");
// ImageColorAllocate (image, red, green, blue)
$back_color = ImageColorAllocate ($img_handle, 0, 0, 0);
$txt_color = ImageColorAllocate ($img_handle, 255, 255, 255);
ImageStringUp ($img_handle, 2, 1, 215, $_GET['text'], $txt_color);
ImagePng ($img_handle);
ImageDestroy($img_handle);
function verticletext($string)
{
$tlen = strlen($string);
for($i=0;$i<$tlen;$i++)
{
$vtext .= substr($string,$i,1)."<br />";
}
return $vtext;
}
there you go no echo
Text rotation is also possible with other browsers.
CSS:
/*Safari*/
-webkit-transform: rotate(-90deg);
/*Firefox*/
-moz-transform: rotate(-90deg);
/*Opera*/
-o-transform: rotate(-90deg);
/*IE*/
writing-mode: tb-rl;
filter: flipV flipH;
I use the function below if table header rows are too long. It's quite useful because it's easy to use, fast and you don't have to calculate text height & width. Those css-gimmicks just don't work.
#######################################################
# convert text to image and embed it to html
# uses /tmp as a cache to make it faster
# usage: print imagetext("Hello my friend");
# Created by Ville Jungman, GPL-licenced, donated by www.varuste.net
function imagetext($text,$size = 10,$color = array(253,128,46)){
$dir = "/tmp/tekstit";
$filename = "$dir/" . base64_encode($text);
if(!file_exists($filename)){
$font = "/usr/share/fonts/truetype/freefont/FreeSans.ttf";
$box = imagettfbbox($size,90,$font,$text);
$w = -$box[4] - 1;
$h = -$box[3];
$im = imagecreatetruecolor($w,$h);
$white = imagecolorallocate($im,$color[1],$color[2],$color[3]);
$black = imagecolorallocate($im, 0x00, 0x00, 0x00);
imagecolortransparent($im,$white);
imagefilledrectangle($im, 0, 0, $size, 99, $white);
imagettftext($im,$size,90,$size,$h,$black,$font,$text);
#mkdir($dir);
imagepng($im,$filename);
imagedestroy($im);
}
$data = base64_encode(file_get_contents($filename));
return "<img src='data:image/png;base64,$data'>";
}
This thread suggests that you can write text to an image and then rotate the image.
It appears to be possible with IE but not with other browsers so it might be one of those little win for IE6 =)
imagettftext oughta do the trick.
As far as I know it's not possible to get vertical text with CSS, so that means that the rotated text has to be in an image. It's very straightforward to generate with PHP's' libgd interface to output an image file.
Note however that this means using one script to produce the image, and another to produce the surrounding web page. You can't generally (inline data: URI's notwithstanding) have one script produce more than one page component.
Use raphaeljs
It works on IE 6 also
http://raphaeljs.com/text-rotation.html
function verticletext($string)
{
$tlen = strlen($string);
for($i=0;$i<$tlen;$i++)
{
echo substr($string,$i,1)."<br />";
}
}