June 30, 2016 12:03 am

Creating a service which converts images to ASCII in PHP

Have you ever wanted to send, display or use colored ASCII versions of real images? Well, it turns out this is not something very hard to achieve with PHP. In this tutorial, we are going to create a simple class which has the capabilities to convert all kinds of URLs to jpg/gif/png images to ASCII and show the ASCII in dimensions specified by the user (we shall resize the image to the specified by the user dimensions before converting it to ASCII). Furthermore, we will build a simple web interface where users can give URLs to images and their desired dimensions and see the ASCII output as well as the HTML code that they can use to add the ASCII elsewhere.

Creating a service which converts images to ASCII in PHP

Below are some screenshots of the service.

sample2 sample1

Creating the Image to ASCII and Image resize class

To start with, we hide potential errors from being displayed and initialize our class.

We want to initialize the class at least with a path to an image and optionally with x and y dimension of the ASCII. In our constructor method, we set the appropriate properties and we prepare for resizing the image. By default, ASCII with 90×40 dimensions is going to be shown to the user. The users can change  that up to 600×600.

The getImage method creates an image resource depending on the file extension of the remote image that was provided to the class’ constructor or displays an error if something went south (we do not support the image extension or there was trouble creating the image resource).

The convert method which we are going to call when we want to get the ASCII just gets the image resource and if there was no error – it returns the ASCII HTML code.

The actual method (toAscii) which converts the image resource to ASCII first gets the image dimensions and sets them in variables. It then creates a new image resource of the desired or default dimensions with the help of imagecreatetruecolor($w,$h), it resizes the original image in the new resource with the help of imagecopyresampled, and it overrides the original image resource with the new image resource. It then changes the width and height variables to hold the new x and y dimensions.

Finally, it creates a pre tag, loops over every pixel of the image and creates a span tag colored after the original pixel’s color with # as content.  After every image line, it adds the br tag to add a newline. Then, it just returns the gathered output to the caller.

Creating the Image to ASCII service

We are not going to focus on not repeating ourselves for the service and we are just going to write some quick code which shows a front-end to the user. If the user has not submitted our form yet, we just display the form prettified using Bootstrap and a Bootstrap theme.  We show an input for URLs and two numeric inputs. Notice the meta viewport tag in the head which enables the site to be responsive for mobile devices.

Lastly, if the form was submitted – we convert the image to ASCII, passing the image URL and the desired x and y dimensions (if they were chosen), display the original form and display the ASCII output and the HTML code for the ASCII art in a textarea so that users can copy it and use it in their own website, blog, or another web technology. We also autofill the form with the last query by the user if one exists and escape the user’s input to prevent potential XSS.

We did it again. We now are able to convert arbitrary images to ASCII and we are ready to have fun with it. Below is another image converted to ASCII.

Tutorial Categories:

Author Ivan Dimov

Ivan is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling. You can find more about him at: http://www.dimoff.biz. facebook, twitter


Tutorial Categories: