img-preview.js

/**
 *
 * @authors zhazhjie (zhazhjie@vip.qq.com)
 * @date    2018-05-12 15:32:18
 * @version 1.0
 */
(function (global, factory) {
  typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
      (global.imgPreview = factory());
})(window, function () {

  var imgPreview = {};
  var params = {};

  function getEl(id) {
    return document.getElementById(id);
  }

  function createEl(el) {
    var wrapper = document.createElement('div');
    wrapper.id = 'img-preview-wrapper';
    wrapper.style = 'width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:9998;overflow-x:hidden;backgroundColor:rgba(0, 0, 0, 0);transition:all .3s;';
    var img = document.createElement('img');
    img.id = 'img-preview';
    img.src = el.src;
    img.style = 'cursor:zoom-out;position:absolute;transition:all .3s;margin-bottom:15px';
    setImgSize(img, params);
    wrapper.appendChild(img);
    document.body.appendChild(wrapper);
    wrapper.addEventListener('click', hideImg);
    return {
      img: img,
      wrapper: wrapper
    };
  }

  function setImgSize(img, data) {
    img.style.width = data.width + 'px';
    img.style.height = data.height + 'px';
    img.style.top = data.top + 'px';
    img.style.left = data.left + 'px';
  }

  function showImg(e) {
    document.body.style.overflow = 'hidden';
    params = this.getBoundingClientRect();
    var wrapper = getEl('img-preview-wrapper');
    var img = getEl('img-preview');
    if (wrapper) {
      wrapper.style.display = 'block';
      img.src = this.src;
      setImgSize(img, params);
    } else {
      var ele = createEl(this);
      img = ele.img;
      wrapper = ele.wrapper;
    }
    var margin = 30;
    var imgWidth = img.naturalWidth || img.offsetWidth;
    var imgHeight = img.naturalHeight || img.offsetHeight;
    var imgRatio = imgWidth / imgHeight;
    var winWidth = window.innerWidth - margin;
    var winHeight = window.innerHeight - margin;
    // var winRatio = winWidth / winHeight;
    if (imgWidth > winWidth) {
      imgWidth = winWidth;
      imgHeight = imgWidth / imgRatio;
    }
    // else if (imgWidth > winWidth && imgRatio < winRatio) {
    //   imgHeight = winHeight;
    //   imgWidth = imgHeight * imgRatio;
    // }
    // if (imgHeight > winHeight) {
    //   imgHeight = winHeight;
    //   imgWidth = imgHeight * imgRatio;
    // }
    var top = margin >> 1;
    var left = ((winWidth - imgWidth) >> 1) + top;
    if (imgHeight <= winHeight) {
      top = ((winHeight - imgHeight) >> 1) + top;
      wrapper.style.overflowY = 'hidden';
    } else {
      wrapper.style.overflowY = 'scroll';
      imgWidth -= wrapper.offsetWidth - wrapper.clientWidth;
    }
    setTimeout(function () {
      setImgSize(img, {
        width: imgWidth,
        height: imgHeight,
        top: top,
        left: left
      });
      wrapper.style.backgroundColor = 'rgba(0,0,0,0.3)';
    })

  }

  function hideImg() {
    //console.log(this)
    document.body.style.overflow = '';
    setImgSize(getEl('img-preview'), params);
    var wrapper = getEl('img-preview-wrapper');
    wrapper.style.backgroundColor = 'rgba(0,0,0,0)';
    setTimeout(function () {
      wrapper.style.display = 'none';
    }, 300)
  }

  imgPreview.install = function (Vue) {
    Vue.directive('img-preview', {
      bind: (el, binding) => {
        el.style.cursor = 'zoom-in';
        el.addEventListener('click', showImg)
      }
    })
  };
  return imgPreview;
});