memeplayer
Fork me on GitHub

Class: MemePlayer

MemePlayer

new MemePlayer(canvas, width, height)

Enhances a canvas with meme viewing and editing capabilities.

Parameters:
Name Type Description
canvas HTMLCanvasElement

The canvas element to render into.
width number

The width of the canvas, in pixels.
height number

The height of the canvas, in pixels.
Source:

Methods

export() → {Promise.<MemeData>}

Exports the content of the player to a data URL.

Source:
Returns:
Type
Promise.<MemeData>

loadTemplate(url) → {Promise.<Template>}

Loads a template image and starts displaying it on the canvas.

Parameters:
Name Type Description
url string

The URL of the image to display. JPG, PNG and GIF are supported image formats.
Source:
Returns:
Type
Promise.<Template>

setHeight(height)

Sets the height of the canvas.

Parameters:
Name Type Description
height number

The new height of the canvas, in pixels.
Source:

setText(text)

Sets the meme text and re-renders the meme.

Parameters:
Name Type Description
text MemeText

The new meme text to render.
Source:

setWidth(width)

Sets the width of the canvas.

Parameters:
Name Type Description
width number

The new width of the canvas, in pixels.
Source:

Type Definitions

MemeData

Type:
  • Object
Properties:
Name Type Description
data string

The base64 encoded meme data.
contentType string

The MIME type of the base64 encoded data. Guaranteed to be an image type, and if the loaded template was an animated GIF with multiple frames it's also guaranteed to be 'image/gif'.
Source:

MemeText

An object containing meme text to render over an image.

Type:
  • Object
Properties:
Name Type Description
top Object

An object representing the top line of text, if any.

Properties
Name Type Description
value string

The actual text content of the top line.
align string

The alignment of the top line. Must be one of 'left', 'right' or 'center'.
middle Object

An object representing the middle line of text, if any.

Properties
Name Type Description
value string

The actual text content of the middle line.
align string

The alignment of the middle line. Must be one of 'left', 'right' or 'center'.
bottom Object

An object representing the bottom line of text, if any.

Properties
Name Type Description
value string

The actual text content of the bottom line.
align string

The alignment of the bottom line. Must be one of 'left', 'right' or 'center'.
Source: