Skip to content

Latest commit

 

History

History
198 lines (177 loc) · 8.72 KB

REAEME-zh-CN.md

File metadata and controls

198 lines (177 loc) · 8.72 KB
Raw

简体中文 | English

image-preview

一款面向移动web app的图片预览插件.

特点:

  1. 🍉 支持绝大部分手势操作.
  2. 🎃 旋转、缩放图片.
  3. 🍓 图片默认懒加载.
  4. 🍂 基于webgl.
  5. ☄🌰 3D 视图.

image

用法

有三种:

1. npm install

   npm i @daxiazilong/image-preview

2. 复制release目录

  • release/image-preview 目录下编译了适配不同模块系统的版本 , 包括 AMD,CommonJS,ES6,UMD,IIFE. 你可以选择适合自己的一个.

3.下载整个项目:

  • 克隆下来 ,然后跑命令 npm i & npm run build
  • 对于不同的模块系统:
  • release/image-preview 目录下编译了适配不同模块系统的版本 , 包括 AMD,CommonJS,ES6,UMD,IIFE. 你可以选择适合自己的一个.

引入

  • 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'
    如果由npm安装： 
     import {ImagePreview} from '@daxiazilong/image-preview'

用法:

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:

//第一种生成方法:
let imgObj = new ImagePreview({
  selector:`.imageWraper img`
})
//第二种生成方法:
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.destroy();

上面的代码展示了生成image preview实例的两种方法, 第一种方法会在给定的HTML元素上自动绑定点击事件, 而第二种则需要自己手动绑定触发事件. 实际上, 这是很简单的, 你只需要在你代码需要打开image preview的地方调用 imgObj.show(n) 就好.

与vue一起使用:

HTML:

<div
    v-for="(item, index) in imgs"
    :key="index"
    @click="showImg(index)"
>
    {{index}}
</div>

JS:

import {ImagePreview} from '@daxiazilong/image-preview'
export default {
    data () {
        return {
            imgs: [
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201909%2F30%2F20190930192812_ZdJUw.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629013294&t=0fefdbd28f9926ff195325bd9d2bd4a9',
                'https://iknow-pic.cdn.bcebos.com/9213b07eca806538184ec36695dda144ad34821a',
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F1e93e74fb4b87734fb11bc487f9d7e2e9ce666f2.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629028767&t=83072eef6345c4169751cef753b79bd7',
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp.ssl.qhimg.com%2Ft017bbc635928363c05.jpg&refer=http%3A%2F%2Fp.ssl.qhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629274751&t=89d2696d8027df24bb767e6acb5330ac',
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ff.mgame.netease.com%2Fforum%2F201509%2F21%2F171337o26avxzpb6wpowza.gif&refer=http%3A%2F%2Ff.mgame.netease.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628907951&t=85efd61fe8604d1fb018b1555e23d316',
            ],
        }
    },
    // for vue3,  vue2.x is [beforeDestroy](https://cn.vuejs.org/v2/api/#beforeDestroy)
    beforeUnmount () {
        if (this.imgPreview) {
            this.imgPreview.destroy();
        }
    },
    methods: {
        showImg(index: any) {
            if (!this.imgPreview) {
                this.imgPreview = new ImagePreview({
                    imgs: [
                        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201909%2F30%2F20190930192812_ZdJUw.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629013294&t=0fefdbd28f9926ff195325bd9d2bd4a9',
                        'https://iknow-pic.cdn.bcebos.com/9213b07eca806538184ec36695dda144ad34821a',
                        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F1e93e74fb4b87734fb11bc487f9d7e2e9ce666f2.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629028767&t=83072eef6345c4169751cef753b79bd7',
                        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp.ssl.qhimg.com%2Ft017bbc635928363c05.jpg&refer=http%3A%2F%2Fp.ssl.qhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629274751&t=89d2696d8027df24bb767e6acb5330ac',
                        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ff.mgame.netease.com%2Fforum%2F201509%2F21%2F171337o26avxzpb6wpowza.gif&refer=http%3A%2F%2Ff.mgame.netease.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628907951&t=85efd61fe8604d1fb018b1555e23d316',
                    ]
                });
            }
            this.imgPreview.show(index);
        }
    },
}

与React一起使用:

export default() => {
    // a ref 
    const imgInstance = useRef(null as unknown as ImagePreview);
    useEffect(()=> {
        return () => {
            if (imgInstance.current) {
               // never forget to destroy
                imgInstance.current.destroy();
            }
        }
    }, [])

    const imgs =  [
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201909%2F30%2F20190930192812_ZdJUw.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629013294&t=0fefdbd28f9926ff195325bd9d2bd4a9',
        'https://iknow-pic.cdn.bcebos.com/9213b07eca806538184ec36695dda144ad34821a',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F1e93e74fb4b87734fb11bc487f9d7e2e9ce666f2.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629028767&t=83072eef6345c4169751cef753b79bd7',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp.ssl.qhimg.com%2Ft017bbc635928363c05.jpg&refer=http%3A%2F%2Fp.ssl.qhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629274751&t=89d2696d8027df24bb767e6acb5330ac',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ff.mgame.netease.com%2Fforum%2F201509%2F21%2F171337o26avxzpb6wpowza.gif&refer=http%3A%2F%2Ff.mgame.netease.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628907951&t=85efd61fe8604d1fb018b1555e23d316',
    ];
    function handleClick (index: number) {
        if (!imgInstance.current) {
            imgInstance.current = new ImagePreview({
                imgs,
            })
        }
        imgInstance.current.show(index);
    }

    return (<div>
        {
            imgs.map((src, index) => {
                return (
                    <div key={index} onClick={() =>handleClick(index)}>
                        {index}
                    </div>
                )
            })
        }
    </div>)
}

例子

click here .

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 属性.

  • imagePreview.prototype.delImage(index:number) 删除第index个图片. Index < 0 会被设置为 0, 超过imgs的长度会被设置成imgs的最后一个元素的index.

  • imagePreview.prototype.destroy() 销毁 image preview 实例. 移除它生成的HTML元素和其他资源. 为了更好的性能体验, 你可以接着设置 imgObj = null;

交流

如对您有些许帮助，可以给一颗star哦😜,

加入qq群364379192一起哔哔哔.