Script to quickly append arbitrary text to an arbitrary image, create a new image out of it, and download the new image.

image-texter.js

;(function () {
  'use strict'
  // *** manipulating an image in the browser ***
  var file_input, file_reader, image_data, canvas, text_input, converted_canvas_data

  // user visits page
  console.log('hello and welcome to the quote image generator')

  // user sees a text input
  text_input = document.createElement('input')
  text_input.type = 'text'
  document.body.appendChild(text_input)
  console.log('please add some text to put on the image')

  // user sees a file input
  file_input = document.createElement('input')
  file_input.type = 'file'
  document.body.appendChild(file_input)
  console.log('please upload an image in the file input')
  // user selects a file
  file_input.addEventListener('change', capture_file)

  // application captures file
  function capture_file () {
    file_reader = new FileReader()
    file_reader.onload = function (event) {
      image_data = event.target.result
      console.log('got image data: ', image_data)
      add_image_to_canvas()
      add_text_to_canvas()
      start_new_image_download()
      clean_up()
    }

    // use FileReader() API to get file from user's computer and convert file to data-uri
    console.log('uploading image...')
    file_reader.readAsDataURL(this.files[0])
  }

  // add a canvas to the document
  function create_canvas () {
    console.log('creating canvas')
    canvas = document.createElement('canvas')
    canvas.height = 640
    canvas.width = 640
    canvas.style.background = 'gray'
    document.body.appendChild(canvas)
  }
  // append file data to a canvas
  function add_image_to_canvas () {
    create_canvas()
    console.log('adding the image to the canvas')
    var context, image

    context = canvas.getContext('2d')
    image = new Image(640, 640)
    image.src = image_data

    context.drawImage(image, 0, 0, 640, 640)
  }

  // append text layer to canvas
  function add_text_to_canvas () {
    console.log('adding the text over the image')
    var context, text

    context = canvas.getContext('2d')
    text = text_input.value
    context.font = '48px serif'
    context.fillText(text, 50, 50)
  }

  // convert canvas toDataUrl
  function get_canvas_data () {
    console.log('converting the canvas to an image')
    return canvas.toDataURL()
  }

  function start_new_image_download () {
    var download_link = document.createElement('a')
    // set data-uri as the href of an anchor tag
    download_link.href = get_canvas_data()
    download_link.text = 'click me'
    // set 'download' attribute on link tag
    download_link.download = 'img.png'
    // append link tag to document
    document.body.appendChild(download_link)
    // trigger click event on link tag
    console.log('triggering download of image')
    download_link.click()
    // remove link tag
    download_link.parentNode.removeChild(download_link)
  }

  // optionally: create an img tag with the src attribute set to the data-uri,
  // append it to the dom,
  // and hide the mess...
  function clean_up () {
    console.log('creating new downloadable image element')
    var replacement_image = document.createElement('img')
    replacement_image.src = get_canvas_data()
    console.log('cleaning up the other elements')
    document.body.innerHTML = ''
    document.body.appendChild(replacement_image)
  }
})()