Page 1 of 1
Smooth text edge with ImageMagick
Posted: 2016-04-15T13:37:43-07:00
by rotem
I'm using ImageMagick ver 6.9.3-7 to write text over pictures. I've noticed that the same text with the same font looks much better in html canvas and I'm trying to make it looks the same.
This is how it looks in the html5 canvas:
and this is how it's looks with IM:
This is how I'm creating the image with node.js:
Code: Select all
gmFrame
.font("./assets/impact.ttf", fontSize)
.stroke("#000")
.strokeWidth(8)
.draw(`gravity center text ${position.x},${position.y} '${text}'`)
.stroke("transparent")
.fill("#fff")
.draw(`gravity center text ${position.x},${position.y} '${text}'`);
Is there something to do about it?
Thank you
Re: Smooth text edge with ImageMagick
Posted: 2016-04-15T17:05:44-07:00
by snibgo
gmFrame? Is that GraphicsMagick?
You haven't shown your complete code (where did the background image come from?). Something has enlarged the second image, after creating the text, creating the blockiness.
Re: Smooth text edge with ImageMagick
Posted: 2016-04-15T23:51:19-07:00
by rotem
Sorry, let me clarify.
- gmFrame is ImageMagick
- The background image is the same one I use in the html5 canvas and IM, you can see it here
http://res.cloudinary.com/guggy/image/u ... ly%20D.jpg
- I've attached the images again with the same zoom:
(large picture -
http://i.stack.imgur.com/SrPFp.png) - The right side is the html5 canvas
- Here is the complete code I run:
Code: Select all
convert -quality 100 test.jpg -resize 500x500 -pointsize 52 -font ./assets/impact.ttf -stroke "#000" -strokewidth 8 -draw "gravity center text 0,0 'WRITE SOMETHING'" -stroke "transparent" -fill "#fff" -draw "gravity center text 0,0 'WRITE SOMETHING'" ~/result.jpg
Re: Smooth text edge with ImageMagick
Posted: 2016-04-16T04:27:54-07:00
by rotem
I'm sorry sumoncps, what is already done? and the font is 100% the same.
Re: Smooth text edge with ImageMagick
Posted: 2016-04-16T04:47:52-07:00
by rotem
I've noticed that if I add blue 10x0.5 it looks better. How can I only add blur on the draw text part and not on the image?
Re: Smooth text edge with ImageMagick
Posted: 2016-04-16T05:49:09-07:00
by snibgo
I don't see what is wrong with the IM version. It creates a raster (pixel) image. If you zoom in to a raster image, the pixels will be enlarged, by duplication or some other method.
If you leave text as text, in vector format, then it isn't rasterised until after any zooming, so it will look better.
If you want to blur just the text and not the background, you need to draw the text to a blank image, blur it, then composite that over the background.
Re: Smooth text edge with ImageMagick
Posted: 2016-04-16T06:02:28-07:00
by rotem
Thank snibgo, is there a way to blur the text without writing another image?
I managed to do something good with this command:
Code: Select all
convert -size 500x465 xc:transparent -pointsize 51 -font ./assets/impact.ttf -stroke "#000" -strokewidth 8 -draw "gravity center text 0,0 'WRITE SOMETHING'" -stroke "transparent" -fill "#fff" -draw "gravity center text 0,0 'WRITE SOMETHING'" -blur 1x0.5 -composite test.jpg -resize 500x500 1.png
but the test.jpg file is layered over the text, how can I tell him to be below?
Re: Smooth text edge with ImageMagick
Posted: 2016-04-16T06:18:37-07:00
by snibgo
You don't need to write the text image to file. For example, bash syntax:
Code: Select all
convert -quality 100 "DJ Pauly D.jpg" -resize 500x500 \( +clone -alpha transparent -pointsize 52 -font impact -stroke "#000" -strokewidth 8 -draw "gravity center text 0,0 'WRITE SOMETHING'" -stroke "transparent" -fill "#fff" -draw "gravity center text 0,0 'WRITE SOMETHING'" -blur 0x5 \) -composite r2.png
Re: Smooth text edge with ImageMagick
Posted: 2016-04-16T06:30:03-07:00
by rotem
Great! it's working. Thanks a lot!
Re: Smooth text edge with ImageMagick
Posted: 2016-04-16T11:46:17-07:00
by rotem
I run into a problem, maybe you can help. Since I use node js I use the gm module (which also handles IM) to talk with IM. The way gm module execute the convert command is with child_process.spawn and by sending the convert command and the arguments to a shell.
The output of this command is this:
Code: Select all
convert "-quality" "100" "-quality" "100" "test.jpg" "-resize" "500x500" "\(" "+clone" "-alpha" "transparent" "-pointsize" "52" "-font" "./assets/impact.ttf" "-stroke" "#000" "-strokewidth" "8" "-draw" "gravity center text 0,0 'WRITE SOMETHING'" "-stroke" "transparent" "-fill" "#fff" "-draw" "gravity center text 0,0 'WRITE SOMETHING'" "-blur" "0x0.5" "\)" "-composite" "/Users/rotemyakir/WebstormProjects/guggy-image-server/temp/test2/result.jpg"
you can see that the /( part is also warped by "".
Is there something I can do? thanks
Re: Smooth text edge with ImageMagick
Posted: 2016-04-16T11:52:31-07:00
by snibgo
I know nothing about node js. Try it without backslash-escaping the parentheses.
Re: Smooth text edge with ImageMagick
Posted: 2016-04-16T13:05:50-07:00
by rotem
Thanks, but I had to not use the gm module for this command.
Thank you, you helped a lot.
