react-emojify-image

pixelating an image, with emojis.

🤷‍♂️

Demo

You can check out the demo here.

Install

npm install --save react-emojify-image

Usage

import EmojifyImage from 'react-emojify-image';

class Emojified extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      loaded: false
    };
  }
  render({ imgURL, scale }) {
    return (
      <div>
        <img src={imgURL} ref={(_) => (this.img = _)} onLoad={() => this.setState({loaded: true})}/>
        { this.state.loaded && <EmojifyImage scale={10} scale={scale} image={createImageBitmap(this.img)}/> }
      </div>
    );
  }
}

react-emojify-image uses ES2015+ import/export syntax, and other features.
Meaning, you have to use a bundler of some sort along with the package, but nowadays who doesn't?

props

name	type	default	required	description
image	ImageBitmap		yes	An ImageBitmap object of the actual image to use. The easiest way to get this object is to use createImageBitmap(). It gets an image source, which can be an , SVG ,
scale	Number	15	no	The number of (scale X scale) pixels to replace with one emoji.
loader	Function	() => <span>Loading...</span>	no	The loader component to render when either remapping colors to emojis or when emojifying the image.

FAQ

• How can I load other emojis?

  • Simple! you can use import { EmojifyImageCustom } from 'react-emojify-image'. It's the same thing but it also has an emojis prop which is an array of strings.
    This serves as the list of emojis to use when reconstructing the image.

• This package is really big! can you make it smaller?

  • Well, this concerns the last question. You can supply a different set of emojis to use. Also, this was built in a way that tree-shaking can do it's magic. if you'll load EmojifyImageCustom you won't get the entire list of predefined emojis, making this rather small.

• What are the supported browsers on this thing?

  • Chrome and Firefox. Unfortunately Safari doesn't support ImageBitmap which is used here as a base class to create all image types.
    Maybe later support for other browsers will be added.

• Hmmm... but why?

  • Why not?

Contributing

Feel free to open issues and pull requests if you have any other cool ideas for this project :)