* constructor param

CHANGELOG.md

@@ -2,8 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-## 2.1.0 (2021-07-19)
-
+## 2.0.0 (2021-07-19)
+* Refactoring using WebGL.
 
 ### Features
 

README.md

@@ -67,20 +67,22 @@ The above code shows two ways about image preview generated, the first way bind
 [click here](https://daxiazilong.github.io/image-preview/index.html) . 
 
 ### Api
-
-* `imagePreview.prototype.show(index:number)`
+* `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 )`
+* `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 image is HTMLImageElement, and it is cross origin, you'd better set the [crossOrigin](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/crossOrigin) attribute.
+   * Note: If the param image is HTMLImageElement, and it is cross origin, you'd better set the [crossOrigin](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/crossOrigin) attribute.
 
-* `imagePreview.prototype.delImage(index:number)`
+* `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()`
+* `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
-yon can join qq-group 977121370 and chat with me.
-1. maintain the transform state of a picture and recalculate the next state with some css property is very difficultb
+yon can join qq-group 977121370 and chat with me.

REAEME-zh-CN.md

@@ -1,32 +1,39 @@
 简体中文 | [English](./README.md)
 
-# image-preview(流畅 & 舒适)
-一个前端图片预览插件 绝佳的手势体验，如果有使用到，请给我一颗`star`，阿里嘎多😁
+# image-preview
+一款面向移动web app的图片预览插件.
+
 ### 特点:
-1. 支持绝大部分的手势操作.
-2. 旋转&缩放图片.
-### 使用方法:
-#### 下载:
-* 不同模块系统的使用：
-* `release/image-preview`目录下为不同的模块系统生成了不同的代码，包括AMD,CommonJS,ES6,UMD,IIFE，你可以选择一个适合你的项目下载下来。
-#### 实例
-[点击这里](http://122.51.15.11:9999/) . 
-#### 引入 
-  * script（在iife或者umd模块系统中使用imagePreviewModule）:
+1. 🍉 支持绝大部分手势操作.
+2. 🎃 旋转、缩放图片.
+3. 🍓 图片默认懒加载.
+4. 🍂 基于webgl.
+
+### 用法
+有两种:
+#### 1. 复制release目录
+*  `release/image-preview` 目录下编译了适配不同模块系统的版本 , 包括 AMD,CommonJS,ES6,UMD,IIFE. 你可以选择适合自己的一个.
+#### 2.下载整个项目:
+* 克隆下来 ,然后跑命令 `npm i & npm run build`
+* 对于不同的模块系统:
+* `release/image-preview` 目录下编译了适配不同模块系统的版本 , 包括 AMD,CommonJS,ES6,UMD,IIFE. 你可以选择适合自己的一个.
+
+
+### 引入 
+  * script (in iife or umd module system,use namespace imagePreviewModule):
     ``` html
     <script src="js/image-preview-iife.js">
     <script>
       new imagePreviewModule.ImagePreview({
-        // 这些配置和下面的是一样的
+        // something same with below usage
       })
     </script>
     ```
   * esmodule:
     ```javascript
      import {ImagePreview} from 'js/image-preview-esm.js'
     ```
-
-#### 代码:
+#### 用法:
 html:
 ```html
   <div class="imageWraper">
@@ -36,14 +43,12 @@ html:
 ```
 javascript:
 ``` javascript
-//just
+//第一种生成方法:
 let imgObj = new ImagePreview({
   selector:`.imageWraper img`
 })
-//or mvvm project
-
+//第二种生成方法:
 let imgObj =  new ImagePreview({
-  curImg:'imgsrc',
   imgs:[
     'imgsrc',
     'imgsrc',
@@ -52,10 +57,33 @@ let imgObj =  new ImagePreview({
 })
 //then show n-th picture,use
 imgObj.show(n);
-// distroy instance.  remove HTML generated by this ImagePreview instance
-// for better performance, then you can set imgObj = null;
+
+// 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();
 
 ```
+上面的代码展示了生成image preview实例的两种方法, 第一种方法会在给定的HTML元素上自动绑定点击事件, 而第二种则需要自己手动绑定触发事件. 实际上, 这是很简单的, 你只需要在你代码需要打开image preview的地方调用 `imgObj.show(n)` 就好.
+
+### 例子
+[click here](https://daxiazilong.github.io/image-preview/index.html) . 
+
+### Api
+* `new ImagePreview({imgs?: Array<string|HTMLImageElement>}) ` 
+* `new ImagePreview({selector?: string}) ` 
+
+   生成一个image preview实例.
+* `imagePreview.prototype.show(index:number)` 
+   打开第index个图片, index 从 0开始.
+
+* `imagePreview.prototype.insertImageAfter( image: string | HTMLImageElement , index: number )` 
+   在index之后插入一张新图, 如果 index < 0, 新图会在0的位置插入. 如果index超过imgs的长度会被插入到最后一个位置.
+   * 注意: 如果 参数image是HTMLImageElement, 并且存在跨域, 你最好设置一下 [crossOrigin](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/crossOrigin) 属性.
+
+* `imagePreview.prototype.delImage(index:number)` 
+  删除第index个图片. Index < 0 会被设置为 0, 超过imgs的长度会被设置成imgs的最后一个元素的index.
+
+* `imagePreview.prototype.destroy()` 
+  销毁 image preview 实例. 移除它生成的HTML元素和其他资源. 为了更好的性能体验, 你可以接着设置 imgObj = null;
+
 ### 交流
-你可以加入这个qq群977121370与我交流.
+加入qq群977121370一起哔哔哔.

example/js/image-preview-iife.js

@@ -1751,7 +1751,6 @@ var imagePreviewModule = (function (exports) {
             var maxTextureSize = gl.MAX_TEXTURE_SIZE;
             var naturalWidth = img.naturalWidth, naturalHeight = img.naturalHeight;
             var max = Math.max(naturalHeight, naturalWidth);
-            console.log(maxTextureSize);
             if (max >= maxTextureSize) {
                 var shrinkFactor = this.dpr;
                 var width = maxTextureSize / shrinkFactor;
@@ -1941,6 +1940,9 @@ var imagePreviewModule = (function (exports) {
                 // options里拿到图片
                 this.bindTrigger();
             }
+            if (!this.options.imgs) {
+                this.options.imgs = [];
+            }
             this.actionExecutor = new webGl({
                 images: this.options.imgs
             });