cxj-react-image 用法以下：

yarn add cxj-react-image
// npm i cxj-react-image

import ImageModal from 'cxj-react-image';

<ImageModal 
  src={imageList[currentImageIndex]}  {/* 当前图片途径 */}
  next={() => this.next()}            {/* 掌握下一张 */}
  prev={() => this.prev()}            {/* 掌握上一张 */}
  closeModal={() => this.closeImg()}  {/* 掌握modal翻开封闭 */}
  option={{
    move: true,                        {/* 掌握拖动 */}
    waterMarkText: '多功能图片组件',    {/* 设置水印笔墨 */}
    rotate: true,                      {/* 掌握扭转 */}
    zoom: true                         {/* 掌握放大减少 */}
  }}
/>

更细致的用法请参考 container.js文件

github地点

在线例子

若有协助，谢谢star~ 若有题目，迎接call me~

交换请加wx: c13266836563

以下为相干完成解说

拖拽

完成拖拽的思绪是盘算出dom末了的left跟top。

未挪动前能够经由过程clientX跟offsetLeft拿到dom的x坐标和左侧距，记为initX和offLeft。

挪动的过程当中能够经由过程clientX拿到元素的x坐标，记为moveX。

获得公式：left = moveX - initX + offLeft。

中心代码以下：

const move = (dv) => {
  // 猎取元素
  let x = 0;
  let y = 0;
  let l = 0;
  let t = 0;
  let isDown = false;
  // 鼠标按下事宜
  dv.onmousedown = function(e) {
    // 猎取x坐标和y坐标
    x = e.clientX;
    y = e.clientY;

    // 猎取左部和顶部的偏移量
    l = dv.offsetLeft;
    t = dv.offsetTop;
  
    handleMove();
  };
  // 鼠标挪动
  // 再包一层是为了轻易注册 防止被替代
  function handleMove() {
    onmousemove = function(e) { 
      // 猎取x和y
      let nx = e.clientX;
      let ny = e.clientY;

      // 盘算挪动后的左偏移量和顶部的偏移量
      let nl = nx - (x - l);
      let nt = ny - (y - t);

      dv.style.left = nl + 'px';
      dv.style.top = nt + 'px';
    };
  }
};

关于拖拽，有个状况还须要优化：页面上有两个modal，要保证末了点击的modal要掩盖之前点击的modal。

也就是zIndex要掌握好，这里用localStorage来保留这个最大的zIndex

imageModalMaxzIndex = localStorage.getItem('imageModalMaxzIndex');
if (dv.style.zIndex != imageModalMaxzIndex) {
  dv.style.zIndex = +imageModalMaxzIndex + 1;
  localStorage.setItem('imageModalMaxzIndex', dv.style.zIndex);
}

水印

前端完成水印，防止私密图片泄漏

思绪是运用canvas天生笔墨图片，然后应用以下的css：

background-image:url('${base64Url}');

background-repeat:repeat;

完成水印类：

/**
 * @overview: 水印组件
 */

export default class WaterMark {
  constructor(container, option) {
    this.container = container;
    this.option = {
      width: '200px',
      height: '150px',
      opacity: .7,
      fillStyle: 'rgba(47, 205, 227, 0.3)',
      font: '20px microsoft yahei',
      textBaseline: 'middle',
      textAlign: 'center',
      fillText: '水印',
      ...option
    };
  }
    
  draw() {
    const { 
      container, 
      option: {
        width,
        height,
        opacity,
        fillStyle,
        font,
        textBaseline,
        textAlign,
        fillText,
        scrollHeight
      } 
    } = this;
    const canvas = document.createElement('canvas');
    canvas.setAttribute('width', width);
    canvas.setAttribute('height', height);
    canvas.setAttribute('opacity', opacity);
    const ctx = canvas.getContext('2d');
  
    ctx.textAlign = textAlign;
    ctx.textBaseline = textBaseline;
    ctx.font = font;
    ctx.fillStyle = fillStyle;
    ctx.rotate(Math.PI / 180 * 30);
    ctx.fillText(fillText, 80, 10);
        
    var base64Url = canvas.toDataURL();
    const watermarkDiv = document.createElement('div');
    watermarkDiv.setAttribute('style', `
          position:absolute;
          top:0;
          left:0;
          width:100%;
          height:${scrollHeight || '100%'};
          z-index:1000;
          pointer-events:none;
          background-repeat:repeat;
          background-image:url('${base64Url}')`);
  
    if (typeof container === 'object') {
      container.style.position = 'relative';
      container.insertBefore(watermarkDiv, container.firstChild);
    }
  }
}

这里有一篇文章总结了几种前端水印的计划，推荐给人人 文章

缩放

缩放的话，监听鼠标转动事宜。向上转动放大，向下转动减少；这里要注重掌握最小缩放值。

还要注重的是图片在边境的缩放，不然图片可能会挪动在屏幕外。

须要做的处置惩罚是推断左侧界跟图片的宽度。

代码完成：

// 掌握滚轮缩放

const zoom = (onWheelEvent, dom) => {
  let e = onWheelEvent;
  let imageModalWidth = parseInt(dom.style.width);
  let modalLeft = parseInt(dom.style.left);
      
  // 盘算缩放后的大小 每一次滚轮 100px
  let calcWidth = imageModalWidth - e.deltaY;                 
      
  // 限定最小 width = 400
  if (calcWidth <= 300) {
    return;
  }
    
  // 不让modal因为减少消逝在视野中
  if (modalLeft + calcWidth < 50) {
    return;
  }
      
  dom.style.width = `${calcWidth}px`;
};