Blog Post Icon
Blog
11/12/2014

Convert text to an image with Javascript and HTML5

Hello!

Working with frameworks like Django and with CMS’ like Drupal and WordPress we come across a wide variety of requirements for manipulating, sanitizing and importing data from all different sources and formats.

Recently we had the requirement to take a text field that was defined in a Django model and convert that text string to an image. There are many reasons for this type of requirement. You could argue that this requirement would be the first (of many) steps towards implementing your own custom captcha solution.

Well we did some research and found some solutions out there and implemented it our self in Django and we thought we’d share here as well! I’ll go through each of the components necessary to implement this. This type of implementation can very easily be integrated into WordPress or Drupal through a custom module or custom plugin or function perhaps. Additionally you can go beyond just “text” strings and you can draw boxes and manipulate the fill colors and create rudimentary graphics that are dynamically generated. This may be useful on pages with user generated content for example.

Javascript


To start, this javascript code is very simplistic. You could create a simple HTML file and manually fill in the fields that I have defined as template “tags” (for Django). You can see that I am defining a font and font size, which is useful. You can also set the color, background color and other variables within the code above, but I chose to keep it simple.

HTML5

To dynamically draw the graphics, we are going to use an HTML5 element called canvas. Canvas is designed to do just that – draw graphics on the fly. If your browser doesn’t support HTML5, you won’t see anything. You can put text in between the canvas tags so that browsers that do not support HTML5 will at least see a message.

Your browser does not support HTML5

You can see that I am setting a size as well as CSS styling such as padding, margins and width. This is our attempt to make the canvas element more responsive. There is more that would have to be done in order to accomplish this. You would have to define a css container for the canvas and apply some constraints and elements to that container. Then you would have to implement jquery code to trigger a function to apply certain elements to ensure the canvas container is responsive. I’ll leave that for another post!

In the end you will see that you can generate an image based on any text with many options to style it. I hope somebody finds this useful!

At Shift8, we cater to all sorts of businesses in and around Toronto from small, medium, large and enterprise projects. We are comfortable adapting to your existing processes and try our best to compliment communication and collaboration to the point where every step of the way is as efficient as possible.

Our projects are typically broken into 5 or 6 key “milestones” which focus heavily on the design collaboration in the early stages. We mock-up any interactive or unique page within your new website so that you get a clear picture of exactly how your design vision will be translated into a functional website.

Using tools like Basecamp and Redpen, we try to make the process simple yet fun and effective. We will revise your vision as many times as necessary until you are 100% happy, before moving to the functional, content integration and development phases of the project.

For the projects that are more development heavy, we make sure a considerable amount of effort is spent in the preliminary stages of project planning. We strongly believe that full transparency with a project development plan ensures that expectations are met on both sides between us and the client. We want to ensure that the project is broken into intelligent phases with accurate budgetary and timeline breakdowns.

Approved design mock-ups get translated into a browse-ready project site where we revise again and again until you are satisfied. Client satisfaction is our lifeblood and main motivation. We aren’t happy until you are.

Need Web Design?

Fill out the form to get a free consultation.

shift8 web toronto – 416-479-0685
203A-116 geary ave. toronto, on M6H 4H1, Canada
© 2023. All Rights Reserved by Star Dot Hosting Inc.

contact us
phone: 416-479-0685
toll free: 1-866-932-9083 (press 1)
email: sales@shift8web.com

Shift8 Logo