Part 2: Here’s JPEG!

Introduction to HTML Canvas

You can use HTML <canvas> to generate images via JavaScript. I find it helpful to do as much of the composition beforehand in

or a similar design tool before dynamically adding the personalized data using Canvas. Each image will require a slightly different solution depending on the level of dynamic data and the overall composition. In the case of ourapp, we want to generate both the feed (1:1) and story (9:16) Instagram formats. Since the main element of design is the personalized poster, I’m going to generate and reuse that element, centered, on each of the individual formats. As such, we’ll start with three images: theposterwithout dynamic name, the storybackground, and the feedbackground.Preloading Assets

Before using HTML Canvas, you’ll want to load both your image assets and any custom typefaces the composition might require.

Here’s a Promise function for loading images.

loadImage(url) {
  return new Promise((resolve, revoke) => {
    let img = new Image()

img.onload = () => {
      resolve(img)
    }
img.crossOrigin = 'Anonymous'
    img.src = url
  })
}

And another you can use for preloading fonts.

loadFont(url) {
  return new Promise((resolve, revoke) => {
    let font = new FontFace('SF Movie Poster, `url(${url})`)

  font.load()
    .then(face => {
      document.fonts.add(face)

      resolve()
    })
    .catch(revoke)
  })
}

For more info on loading fonts, check out this excellent post.

#web-development #sharing #marketing #ios #programming