Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Lee Ravenberg
Lee Ravenberg
10,019 Points

A way to manipulate images by adding text to them in a web browser?

Hi fellow Students,

I am looking for a way to manipulate images by adding text to them in a web browser. Im not sure which technology can help me accomplish this. Maybe load image in HTML5 canvas, add text over the image and then render it to a final image?

If you have any recommendations please let me know.

2 Answers

louiecamacho
louiecamacho
10,980 Points
louiecamacho
louiecamacho
10,980 Points

You would need Photoshop or a similar image editing software for that.

Lee Ravenberg
Lee Ravenberg
10,019 Points

Hehe alright, well I was hoping anyone knew a way or a JavaScript library that would help me achieve this in browser.

louiecamacho
louiecamacho
10,980 Points
louiecamacho
louiecamacho
10,980 Points

There are multiple ways to do this, all of which depends on what you are trying to accomplish. If you want to simply add text over an image, you can use the image as a container background and then add text to the container. If you want to add text in different ways, please elaborate on your goals.

Lee Ravenberg
Lee Ravenberg
10,019 Points

Thanks for your reply. I intend to actually manipulate an image by adding text to it. I think having text in a container where the image has been set as a background is not actually manipulating the image itself.