enlarger v1.9.0

Enlarger

A image enlarger library for web app. See example here.

Features

• Make the image have a magnifying glass effect.
• Easy to use.
• Support Typescript.

Installation

# pnpm
$ pnpm add enlarger

# yarn
$ yarn add enlarger

# npm
$ npm i enlarger

Usage

1. Imports the style.

import 'enlarger/lib/style.css'

2. Create a image enlarger instance.

<!-- Define a container -->
<div id="enlarger-container"></div>

// Then, initial a instance

import { createEnlarger } from 'enlarger'

const imageEnlarger = createEnlarger({
  container: '#enlarger-container',
  src: 'https://www.some.com/path/foo.png',
  autoSize: true
})

Options

APIs

Methods of instance

setOptions

You can modify the options via it after initialization.

imageEnlarger.setOptions({
  width: 500 // Set the image width to 500
})

setWidth

You can modify the wdith of image via it after initialization.

imageEnlarger.setWidth(500)

setHeight

You can modify the height of image via it after initialization.

TIPS, Usually, you only need to control the width of the image, and the height is responsive.

imageEnlarger.setHeight(800) // Set the image width to 800

destory

Destory the image enlarger instance.

imageEnlarger.destory()

CHANGE LOG

See here.