Tweakpane image plugin

Image input plugin for Tweakpane.

Check out the demo.

Features

• Accepts images and URLs
• Image input
• Drag and drop
• Placeholders

Installation

You can install this package via NPM:

npm i tweakpane-image-plugin

Usage

You can use this plugin using these parameters:

pane.addInput(params, 'url', {
  view: 'input-image';
  imageFit?: 'contain' | 'cover';
  extensions?: string[];
})

Example

import {Pane} from 'tweakpane';
import * as TweakpaneImagePlugin from 'tweakpane-image-plugin';

const pane = new Pane();
pane.registerPlugin(TweakpaneImagePlugin);

const params = {
  image: new Image(),
  placeholder: 'placeholder',
  url: 'https://images.unsplash.com/photo-1631875182291-17e8310183ed?q=80&w=500'
};

pane.addInput(params, 'image', {
  extensions: '.jpg, .gif',
})

pane.addInput(params, 'placeholder', {
  view: 'input-image'
})

pane.addInput(params, 'url', {
  view: 'input-image',
  imageFit: 'contain',
})