Image2Code

A simple utility to turn images into JavaScript code that you can integrate into your programs.

Tags: images, jqueryui

Summary

This is a very visual environment by its very nature, and yet incorporating custom images in a simple, direct fashion is not currently possible.

This is just an attempt to simplify a process that has been of great interest to many coders in the Khan Academy, and has resulted in a number of elaborate (albeit creative) solutions in the past.

You may wonder about the practical implications of releasing a tool of this type, when it’s somewhat clear that conscious efforts have been made before to try to remove this kind of functionality from most programs. I do wonder about this too, and in case you’re interested, you may read more about my opinion on the matter here:

http://lbv.github.io/ka-cs-programs/other/sandbox.html

This is just a simple experiment that could be used to incorporate relatively small images inside your programs as encoded strings. Another alternative, which could result more appropriate for certain programs, is MAM: a JavaScript library that helps you import media assets from your programs, including external images. You can find a link below.

Links

• This program on Khan Academy
• This program on GitHub
• MAM, the Media Assets Manager library
• Background image from the Tango “Mimetypes” icons

ChangeLog

Current revision: rev6

2013-06-14

    * Added notice for browser that don't support
      FileReader.
    * Added more details about errors in downloading remote
      files.
    * Other minor usability fixes.

2013-06-13

    * Moved UI to asset files.
    * Changed background image.
    * Added support for reading files from URLs.

2013-06-11

    * Mention MAM in the comments.

2013-05-12

    * Always give the option to open the code in a new tab
      or window.
    * Added a few more comments to the generated code.

2013-05-10

    * Fixed an important bug. Now the generated code works
      asynchronously, so the image can be loaded and used
      reliably.
    * For browsers that don't fully support the `download`
      attribute, it tries to open the code in a new window
      or tab.
    * Changed theme of the UI.

2013-05-09

    * First version of this program.

To Do