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.addBinding(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.addBinding(params, 'image', {
	extensions: '.jpg, .gif',
});

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

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