Universal gl-react Image that implements resizeMode in OpenGL
JavaScript HTML CSS
Clone or download
Latest commit 547b088 Feb 26, 2018
Permalink
Failed to load latest commit information.
example introduce a "free" resizeMode that supports zooming out Sep 1, 2017
src Fix in OpenGL context Feb 26, 2018
.flowconfig much better gl-react-image for gl-react v3 Aug 29, 2017
.gitignore init Jun 18, 2016
.npmignore init Jun 18, 2016
README.md README typo Aug 29, 2017
package.json 3.1.1 Feb 26, 2018
yarn.lock yarn.lock Aug 29, 2017

README.md

gl-react-image

Universal gl-react module that implements resizeMode prop in OpenGL.

-> Example App <-

The library is called gl-react-image but barely anything can be the source, it can be a video, a canvas, another stack of effects,... (anything that gl-react support as a texture)

yarn add gl-react-image
import GLImage from "gl-react-image";
import {Surface} from "gl-react-dom";// or "gl-react-native" or "gl-react-expo" or ..

<Surface ...>
  <GLImage
    source="http://i.imgur.com/tCatS2c.jpg"
    resizeMode="stretch"
  />
</Surface>

GLImage Props

  • source (required): the texture input. It can be an image URL or anything gl-react supports for textures.
  • resizeMode: "cover" | "stretch" | "contain" : This implement the exact same React Native Image resizeMode prop in OpenGL.
  • center and zoom props can be used with resizeMode=cover to define the cover crop position:
    • center, an [x,y] array, defines the gravity of the crop (x and y are in [0, 1] bound).
    • zoom should be a value in ] 0 , 1 ] bound. 1 means no zoom, more value is close to 0, more the zoom is important.
  • width and height: only provide if you also want a resize. (this is feeded to the gl-react Node width/height)

Example

-> Example App <-

<GLImage
  source="http://i.imgur.com/tCatS2c.jpg"
  resizeMode="stretch"
/>

alternative syntax is to use only source via a { uri, width, height } object.

<GLImage
  source="http://i.imgur.com/tCatS2c.jpg"
  resizeMode="stretch"
/>
<GLImage
  source="http://i.imgur.com/tCatS2c.jpg"
  resizeMode="contain"
/>
<GLImage
  source="http://i.imgur.com/tCatS2c.jpg"
  resizeMode="cover"
/>
<GLImage
  source="http://i.imgur.com/tCatS2c.jpg"
  resizeMode="cover"
  zoom={0.5}
/>
<GLImage
  source="http://i.imgur.com/tCatS2c.jpg"
  resizeMode="cover"
  zoom={0.44}
  center={[ 1, 0.55 ]}
/>

Web usage example

import React from "react";
import {render} from "react-dom";
import {Surface} from "gl-react-dom";
import GLImage from "gl-react-image";

render(
  <Surface width={300} height={300}>
    <GLImage
      source="http://i.imgur.com/tCatS2c.jpg"
    />
  </Surface>
  , document.body
))

React Native usage example

import React from "react";
import {Image, View} from "react-native";
import {Surface} from "gl-react-dom";
import GLImage from "gl-react-image";

export default class Example extends Component {
  static propTypes = {
    src: PropTypes.string.isRequired,
  };
  render () {
    return (
      <Surface style={{ width: 300, height: 300 }}>
        <GLImage
          source={src}
        />
      </Surface>
    );
  }
}