webapp将添加本地图片并展示在页面，并利用photoswipe实现图片预览，以及photoswipe的图片宽高问题

webapp将添加本地图片并展示在页面，并利用photoswipe实现图片预览

最近在写一个类似与微博的webapp 在图片预览的时候使用了photoswipe，下面我将说一下如何将图片从本地添加至页面并实现点击预览

一、如何选中本地图片

• 思路

  1. 首先利用input标签选中本地图片

  2. 利用JavaScript监听input标签的onchange方法

  3. input标签选中图片后触发onchange函数，此时选中的图片数组files为input的属性，将数组传入函数进行处理

• 代码

  1. html

     <input id="upload_imgs" type="file" accept="image*/" multiple/>
     <!-- 其中type为file文件类型 multiple为支持多选(按住ctrl键即可多选) -->
     

  2. JavaScript

     // 首先选中dom元素
     let upload_imgs = document.getElementById('upload_imgs')
     
     //添加onchange事件
     upload_imgs.onchange = (upload_imgs.files) => {
            
         // 传入的参数为选中的图片数组
         showGreen(upload_imgs.files)
         // 将数组进行处理并展示在页面上的函数
     }
     

二、如何将选中的图片展示在屏幕上

• 思路

  在上面我们已经将input标签选中的文件数组作为参数传入showGreen函数，由于input标签的files数组保存的是图片的二进制编码，而img标签的src只能识别图片的绝对地址和base64编码的格式，由于的本地添加，所以我们选择将files数组文件的二进制编码转为base64编码，动态创建img元素，并将base64编码作为img的src属性，然后将img添加至屏幕

  1. 将二进制编码转为base64编码

  2. 创建Image对象，设置src属性

  3. 将Image对象添加至html中

• 代码

  • html

    <div id='imgbox'></div>
    <!-- 放置图片的容器 -->
    

  • JavaScript

    let imgbox = document.getElementById('imgbox')
    // 参数files即为待展示的图片数组    
    function showGreen(files) {
           
        // 如果数组长度为0 则不进行处理
    if(files.length) {
           
            for(let i = 0, len = files.length; i < len; i++) {
           
                let file = files[i]
                // 创建FileReader对象
                let reader = new FileReader()
                // 转换完成的触发函数
                // 注意此函数为异步执行，在该函数内部使用外部变量需要注意
                reader.onload = () => {
           
             		let img = new Image()
                    // 此处可以添加class是的图片更好的展示
                    img.src = reader.result
                    // 将图片添加至html
                    imgbox.appendChild(img)
                }
                // 以base64的格式进行处理，处理完成后结果作为reader的result属性 
                reader.readerAsDataURL(file)   
            }
        }
    }
    

  • 到这里我们已经实现本地图片的添加并展示在页面上

三、利用photoswipe实现图片点击预览

原理： 其实photoswipe只是帮我们写了一些css, js 和 html 我们只需要将这些 html css js 添加至我们的文件中就可以

1. photoswipe的下载

   • 使用npm下载

     npm install photoswipe
     

   • 通过github下载

     git clone https://github.com/dimsemenov/PhotoSwipe.git
     

   下载好后的文件夹名为photoswiped

2. photoswipe的基本使用

   • 首先我们需要在页面中引入下载好的photoswipe的js和css文件

     	<link rel="stylesheet" type="text/css" href="photoswipe/dist/photoswipe.css">
     	<link rel="stylesheet" type="text/css" href="photoswipe/dist/default-skin/default-skin.css">
     	<script type="text/javascript" src="photoswipe/dist/photoswipe.min.js"></script>
     	<script type="text/javascript" src="photoswipe/dist/photoswipe-ui-default.min.js">