CODEWITHSUNDEEP
imagemagickimagemagick-convertnode-imagemagick
Rotem
Rotem

Reputation: 2356

Smooth text edge with ImageMagick

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:

enter image description here

and this is how it's looks with IM:

enter image description here

(enlarge the images to view the different)

This is how I'm creating the image with node.js:

    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?

Upvotes: 1

Views: 879

Answers (1)

Rotem
Rotem

Reputation: 2356

After investigating the only way to do it is with blur.

This is an example for how to add text with blur without writing another file 

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

Upvotes: 1

Related Questions