Smooth text edge with ImageMagick

[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

[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.

[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

[rotem]

I'm sorry sumoncps, what is already done? and the font is 100% the same.

[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?

[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.

[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?

[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

[rotem]

Great! it's working. Thanks a lot!

[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

[snibgo]

I know nothing about node js. Try it without backslash-escaping the parentheses.

[rotem]

Thanks, but I had to not use the gm module for this command.

Thank you, you helped a lot.