@daxiazilong/image-preview

ENGLISH | 简体中文

image-preview

An image preview plugin for mobile web application.

Features:

1. 🍉 Most operations are supported by gestures.
2. 🎃 Rotate and zoom image.
3. 🍓 Img lazy-loading default.
4. 🍂 Based webgl.

How to use it:

There are two ways:

1. Copy release

• The release/image-preview directory is built for different module-system , include AMD,CommonJS,ES6,UMD,IIFE. You can choose one adapt to your project.

2.Install:

• Clone it ,then npm i & npm run build
• For different module-sysetem:
• The release/image-preview directory is built for different module-system , include AMD,CommonJS,ES6,UMD,IIFE. You can choose one adapt to your project.

import

• script (in iife or umd module system,use namespace imagePreviewModule):

  <script src="js/image-preview-iife.js">
  <script>
    new imagePreviewModule.ImagePreview({
      // something same with below usage
    })
  </script>
  

• esmodule:

   import {ImagePreview} from 'js/image-preview-esm.js'
  

usage:

html:

  <div class="imageWraper">
    <img data-src="/images/IMG_0512.JPG" src="/images/IMG_0512.JPG">
    <img data-src="/images/main_body3.png" src="/images/main_body3.png">
  </div>

javascript:

//first way:
let imgObj = new ImagePreview({
  selector:`.imageWraper img`
})
//second way:
let imgObj =  new ImagePreview({
  imgs:[
    'imgsrc',
    'imgsrc',
    'imgsrc'
  ]
})
//then show n-th picture,use
imgObj.show(n);

// Distroy image preview instance. Remove HTML generated by this ImagePreview instance and other resources. For better performance, then you can set imgObj = null;
imgObj.distory();

The above code shows two ways about image preview generated, the first way bind click event on the HTMLElement supplied with selector automatically, and the second way requires yourself to bind trigger event manually. Actually, it is very simple, you just call imgObj.show(n) in your code where the image preview should open.

example

click here .

Api

• new ImagePreview({imgs?: Array<string|HTMLImageElement>})

• new ImagePreview({selector?: string})

  Generate an ImagePreview instance.

• imagePreview.prototype.show(index:number) Open index-th img on imagepreivew, index starts from 0.

• imagePreview.prototype.insertImageAfter( image: string | HTMLImageElement , index: number ) Insert a new image after index, if index < 0, then a new image will be inserted at 0 position. If the index is greater than imgs' length, the new image will be inserted in the last position.

  • Note: If the param image is HTMLImageElement, and it is cross origin, you'd better set the crossOrigin attribute.

• imagePreview.prototype.delImage(index:number) Delete index-th image. Index below 0 is 0, greater than imgs's length will be set to the last index.

• imagePreview.prototype.destroy() Distroy image preview instance. Remove HTML generated by this ImagePreview instance and other resources. For better performance, then you can set imgObj = null;

communicate

Thanks for your star 😜. yon can join qq-group 977121370 and chat with me.

Changelog

2.1.1 (2021-12-05)

Features

• cache Bezier