摘要：移動(dòng)的過(guò)程中可以通過(guò)拿到元素的坐標(biāo)，記為。向上滾動(dòng)放大，向下滾動(dòng)縮小這里要注意控制最小縮放值。還要注意的是圖片在邊界的縮放，不然圖片可能會(huì)移動(dòng)在屏幕外。代碼實(shí)現(xiàn)控制滾輪縮放計(jì)算縮放后的大小每一次滾輪限制最小不讓由于縮小消失在視野中

cxj-react-image 用法如下：

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

import ImageModal from "cxj-react-image";

 this.next()}            {/* 控制下一張 */}
  prev={() => this.prev()}            {/* 控制上一張 */}
  closeModal={() => this.closeImg()}  {/* 控制modal打開(kāi)關(guān)閉 */}
  option={{
    move: true,                        {/* 控制拖動(dòng) */}
    waterMarkText: "多功能圖片組件",    {/* 設(shè)置水印文字 */}
    rotate: true,                      {/* 控制旋轉(zhuǎn) */}
    zoom: true                         {/* 控制放大縮小 */}
  }}
/>

更詳細(xì)的用法請(qǐng)參考 container.js文件

github地址

在線(xiàn)例子

如有幫助，感謝star~ 如有問(wèn)題，歡迎call me~

交流請(qǐng)加wx: c13266836563

以下為相關(guān)實(shí)現(xiàn)講解

實(shí)現(xiàn)拖拽的思路是計(jì)算出dom最后的left跟top。

未移動(dòng)前可以通過(guò)clientX跟offsetLeft拿到dom的x坐標(biāo)和左邊距，記為initX和offLeft。

移動(dòng)的過(guò)程中可以通過(guò)clientX拿到元素的x坐標(biāo)，記為moveX。

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

核心代碼如下：

const move = (dv) => {
  // 獲取元素
  let x = 0;
  let y = 0;
  let l = 0;
  let t = 0;
  let isDown = false;
  // 鼠標(biāo)按下事件
  dv.onmousedown = function(e) {
    // 獲取x坐標(biāo)和y坐標(biāo)
    x = e.clientX;
    y = e.clientY;

    // 獲取左部和頂部的偏移量
    l = dv.offsetLeft;
    t = dv.offsetTop;
  
    handleMove();
  };
  // 鼠標(biāo)移動(dòng)
  // 再包一層是為了方便注冊(cè) 避免被替換
  function handleMove() {
    onmousemove = function(e) { 
      // 獲取x和y
      let nx = e.clientX;
      let ny = e.clientY;

      // 計(jì)算移動(dòng)后的左偏移量和頂部的偏移量
      let nl = nx - (x - l);
      let nt = ny - (y - t);

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

關(guān)于拖拽，有個(gè)情況還需要優(yōu)化：頁(yè)面上有兩個(gè)modal，要保證最后點(diǎn)擊的modal要覆蓋之前點(diǎn)擊的modal。

也就是zIndex要控制好，這里用localStorage來(lái)保存這個(gè)最大的zIndex

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

前端實(shí)現(xiàn)水印，避免私密圖片泄露

思路是使用canvas生成文字圖片，然后利用以下的css：

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

background-repeat:repeat;

實(shí)現(xiàn)水印類(lèi)：

/**
 * @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);
    }
  }
}

這里有一篇文章總結(jié)了幾種前端水印的方案，推薦給大家 文章

縮放的話(huà)，監(jiān)聽(tīng)鼠標(biāo)滾動(dòng)事件。向上滾動(dòng)放大，向下滾動(dòng)縮小；這里要注意控制最小縮放值。

還要注意的是圖片在邊界的縮放，不然圖片可能會(huì)移動(dòng)在屏幕外。

需要做的處理是判斷左邊界跟圖片的寬度。

代碼實(shí)現(xiàn)：

// 控制滾輪縮放

const zoom = (onWheelEvent, dom) => {
  let e = onWheelEvent;
  let imageModalWidth = parseInt(dom.style.width);
  let modalLeft = parseInt(dom.style.left);
      
  // 計(jì)算縮放后的大小 每一次滾輪 100px
  let calcWidth = imageModalWidth - e.deltaY;                 
      
  // 限制最小 width = 400
  if (calcWidth <= 300) {
    return;
  }
    
  // 不讓modal由于縮小消失在視野中
  if (modalLeft + calcWidth < 50) {
    return;
  }
      
  dom.style.width = `${calcWidth}px`;
};