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 , , OffscreenCanvas, or element, a Blob, ImageData, or another ImageBitmap object. 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 :)