一個基于react的圖片裁剪組件

Brenner 發(fā)布于2019-08-22 16:26 / 2114人閱讀

摘要：要注意，的屬性是，而和，，對應(yīng)的分別是，，的值設(shè)為這樣，保存拖拽選擇框時的參數(shù)，保存裁剪選擇框時的參數(shù)，為元素，為觸發(fā)事件時的。

開始

寫了一年多vue，感覺碰到了點(diǎn)瓶頸，學(xué)習(xí)下react找找感覺。剛好最近使用vue寫了個基于cropperJS的圖片裁剪的組件，便花費(fèi)了幾個晚上的功夫用react再寫一遍。代碼地址，demo地址
項目是使用create-react-app來開發(fā)的，省去了很多webpack配置的功夫，支持eslint，自動刷新等功能，使用前npm install并npm start即可。推薦同樣是新學(xué)習(xí)react的人也用用看。
項目寫的比較簡陋，自定義配置比較差，不過也是完成了裁剪圖片的基本功能，希望可以幫助到初學(xué)react和想了解裁剪圖片組件的朋友。
組件的結(jié)構(gòu)是這樣的。



     
      
       
         
         
       
     

      
        
        
      

     
        this.resizeStart(event, "top")}>
        this.resizeStart(event, "right")}>
        this.resizeStart(event, "bottom")}>
        this.resizeStart(event, "left")}>
        this.resizeStart(event, "right")}>
        this.resizeStart(event, "left")}>

ImageUploader & Cropper

ImageUploader主要做的就是上傳圖片，監(jiān)聽了input的change事件，并調(diào)用了父組件Cropper的的handleImgChange方法,該方法設(shè)置了綁定到img元素的imageValue，會使得img元素出發(fā)load事件。

  handleImgChange = e => {
    let fileReader = new FileReader()
    fileReader.readAsDataURL(e.target.files[0])
    fileReader.onload = e => {
      this.setState({...this.state, imageValue: e.target.result})
    }
  }

load事件觸發(fā)了Cropper的setSize方法，該方法可以設(shè)置了圖片和裁剪選擇框的初始位置和大小。目前裁剪選擇框是默認(rèn)設(shè)置是大小為圖片的80%，中間顯示。

  setSize = () => {
    let img = this.refs.img
    let widthNum = parseInt(this.props.width, 10)
    let heightNum = parseInt(this.props.height, 10)
    this.setState({
      ...this.state,
      naturalSize: {
        width: img.naturalWidth,
        height: img.naturalHeight
      }
    })
    let imgStyle = img.style
    imgStyle.height = "auto"
    imgStyle.width = "auto"
    let principalStyle = ReactDOM.findDOMNode(this.refs.selectArea).parentElement.style
    const ratio = img.width / img.height
    // 設(shè)置圖片大小、位置
    if (img.width > img.height) {
      imgStyle.width = principalStyle.width = this.props.width
      imgStyle.height = principalStyle.height = widthNum / ratio + "px"
      principalStyle.marginTop = (widthNum - parseInt(principalStyle.height, 10)) / 2 + "px"
      principalStyle.marginLeft = 0
    } else {
      imgStyle.height = principalStyle.height = this.props.height
      imgStyle.width = principalStyle.width = heightNum * ratio + "px"
      principalStyle.marginLeft = (heightNum - parseInt(principalStyle.width, 10)) / 2 + "px"
      principalStyle.marginTop = 0
    }
    // 設(shè)置選擇框樣式
    let selectAreaStyle = ReactDOM.findDOMNode(this.refs.selectArea).style
    let principalHeight = parseInt(principalStyle.height, 10)
    let principalWidth = parseInt(principalStyle.width, 10)
    if (principalWidth > principalHeight) {
      selectAreaStyle.top = principalHeight * 0.1 + "px"
      selectAreaStyle.width = selectAreaStyle.height = principalHeight * 0.8 + "px"
      selectAreaStyle.left = (principalWidth - parseInt(selectAreaStyle.width, 10)) / 2 + "px"
    } else {
      selectAreaStyle.left = principalWidth * 0.1 + "px"
      selectAreaStyle.width = selectAreaStyle.height = principalWidth * 0.8 + "px"
      selectAreaStyle.top = (principalHeight - parseInt(selectAreaStyle.height, 10)) / 2 + "px"
    }
  }

Cropper上還有一個getCropData方法，方法會打印并返回裁剪參數(shù),

  getCropData = e => {
    e.preventDefault()
    let SelectArea = ReactDOM.findDOMNode(this.refs.selectArea).style

    let a = {
      width: parseInt(SelectArea.width, 10),
      height: parseInt(SelectArea.height, 10),
      left: parseInt(SelectArea.left, 10),
      top: parseInt(SelectArea.top, 10)
    }
    a.radio = this.state.naturalSize.width / a.width

    console.log(a)
    return a
  }

SelectArea

重新放一遍selectArea的結(jié)構(gòu)。要注意，.top-resize的cursor屬性是 n-resize，而和left，right，bottom對應(yīng)的分別是w-resize，e-resize，s-resize

     
        this.resizeStart(event, "top")}>
        this.resizeStart(event, "right")}>
        this.resizeStart(event, "bottom")}>
        this.resizeStart(event, "left")}>
        this.resizeStart(event, "right")}>
        this.resizeStart(event, "left")}>

selectArea的state值設(shè)為這樣，selectArea保存拖拽選擇框時的參數(shù)，resizeArea保存裁剪選擇框時的參數(shù)，container為.image-principal元素，el為觸發(fā)事件時的event.target。

    this.state = {
      selectArea: null,
      el: null,
      container: null,
      resizeArea: null
    }

拖拽選擇框

在.select-area按下鼠標(biāo)，觸發(fā)mouseDown事件，調(diào)用dragStart方法。
使用method = e => {}的形式可以避免在jsx中使用this.method.bind(this)
在這個方法中，首先保存按下鼠標(biāo)時的鼠標(biāo)位置，裁剪框與圖片的相對距離和裁剪框的最大位移距離，接著添加事件監(jiān)聽

  dragStart = e => {
    const el = e.target
    const container = this.state.container
    let selectArea = {
      posLeft: e.clientX,
      posTop: e.clientY,
      left: e.clientX - el.offsetLeft,
      top: e.clientY - el.offsetTop,
      maxMoveX: container.offsetWidth - el.offsetWidth,
      maxMoveY: container.offsetHeight - el.offsetHeight,
    }
    this.setState({ ...this.state, selectArea, el})
    document.addEventListener("mousemove", this.moveBind, false)
    document.addEventListener("mouseup", this.stopBind, false)
  }

moveBind和stopBind來自于

  this.moveBind = this.move.bind(this)
  this.stopBind = this.stop.bind(this)

move方法,在鼠標(biāo)移動中根據(jù)記錄新的鼠標(biāo)位置來計算新的相對位置newPosLeft和newPosTop,并控制該值在合理范圍內(nèi)

  move(e) {
    if (!this.state || !this.state.el || !this.state.selectArea) {
      return
    }
    let selectArea = this.state.selectArea
    let newPosLeft = e.clientX- selectArea.left
    let newPosTop = e.clientY - selectArea.top
    // 控制移動范圍
    if (newPosLeft <= 0) {
      newPosLeft = 0
    } else if (newPosLeft > selectArea.maxMoveX) {
      newPosLeft = selectArea.maxMoveX
    }
    if (newPosTop <= 0) {
      newPosTop = 0
    } else if (newPosTop > selectArea.maxMoveY) {
      newPosTop = selectArea.maxMoveY
    }
    let elStyle = this.state.el.style
    elStyle.left = newPosLeft + "px"
    elStyle.top = newPosTop + "px"
  }

stop方法，移除事件監(jiān)聽，清除state,避免方法錯誤調(diào)用

  stop() {
    document.removeEventListener("mousemove", this.moveBind , false)
    document.removeEventListener("mousemove", this.resizeBind , false)
    document.removeEventListener("mouseup", this.stopBind, false)
    this.setState({...this.state, el: null, resizeArea: null, selectArea: null})
  }

裁剪選擇框

跟拖拽一樣，首先調(diào)用resizeStart方法，保存開始裁剪的鼠標(biāo)位置，裁剪框的尺寸和位置，添加關(guān)于resizeBind和stopBind的事件監(jiān)聽，注意，由于react的事件機(jī)制特點(diǎn)，需要使用stopPropagation來禁止事件冒泡，事件監(jiān)聽的第三個參數(shù)使用false是無效的。

  resizeStart = (e, type) => {
    e.stopPropagation()
    const el = e.target.parentElement
    let resizeArea = {
      posLeft: e.clientX,
      posTop: e.clientY,
      width: el.offsetWidth,
      height: el.offsetHeight,
      left: parseInt(el.style.left, 10),
      top: parseInt(el.style.top, 10)
    }
    this.setState({ ...this.state, resizeArea, el})
    this.resizeBind = this.resize.bind(this, type)
    document.addEventListener("mousemove", this.resizeBind, false)
    document.addEventListener("mouseup", this.stopBind, false)
  }

裁剪的方法，將裁剪分為兩種情況，一種是右側(cè)，下側(cè)和右下側(cè)的拉伸。另一種是左側(cè)，上側(cè)和左上側(cè)的拉伸。
第一種情況下，選擇框的位置是不會變的，只有尺寸會變，處理起來相對簡單。新的尺寸大小為原大小加上當(dāng)前的鼠標(biāo)的位置再減去開始拖拽處的鼠標(biāo)的位置，如果寬度或者高度有一個超標(biāo)了，則將尺寸設(shè)置為剛好到邊界的大小。均為超標(biāo)，設(shè)置為新的尺寸。
第二種情況下，選擇框的位置和大小同時會變，要同時控制尺寸和位置不超出邊界。

  resize(type, e) {
    if (!this.state || !this.state.el || !this.state.resizeArea) {
      return
    }
    let container = this.state.container
    const containerHeight = container.offsetHeight
    const containerWidth = container.offsetWidth
    const containerLeft = parseInt(container.style.left || 0, 10)
    const containerTop = parseInt(container.style.top || 0, 10)
    let resizeArea = this.state.resizeArea
    let el = this.state.el
    let elStyle = el.style
    if (type === "right" || type === "bottom") {
      let length
      if (type === "right") {
        length = resizeArea.width + e.clientX - resizeArea.posLeft
      } else {
        length = resizeArea.height + e.clientY - resizeArea.posTop
      }
      if (parseInt(el.style.left, 10) + length > containerWidth || parseInt(el.style.top, 10) + length > containerHeight) {
        const w = containerWidth - parseInt(el.style.left, 10)
        const h = containerHeight - parseInt(el.style.top, 10)
        elStyle.width = elStyle.height = Math.min(w, h) + "px"
      } else {
        elStyle.width = length + "px"
        elStyle.height = length + "px"
      }
    } else {
      let posChange
      let newPosLeft
      let newPosTop
      if (type === "left") {
        posChange = resizeArea.posLeft - e.clientX
      } else {
        posChange = resizeArea.posTop - e.clientY
      }
      newPosLeft = resizeArea.left - posChange
      // 防止過度縮小
      if (newPosLeft > resizeArea.left + resizeArea.width) {
        elStyle.left = resizeArea.left + resizeArea.width + "px"
        elStyle.top = resizeArea.top + resizeArea.height + "px"
        elStyle.width = elStyle.height = "2px"
        return
      }
      newPosTop = resizeArea.top - posChange
      // 到達(dá)邊界
      if (newPosLeft <= containerLeft || newPosTop < containerTop) {
        // 讓選擇框到圖片最左邊
        let newPosLeft2 = resizeArea.left -containerLeft
        // 判斷頂部會不會超出邊界
        if (newPosLeft2 < resizeArea.top) {
          // 未超出邊界
          elStyle.top = resizeArea.top - newPosLeft2 + "px"
          elStyle.left = containerLeft + "px"
        } else {
          // 讓選擇框到達(dá)圖片頂部
          elStyle.top = containerTop + "px"
          elStyle.left = resizeArea.left + containerTop - resizeArea.top + "px"
        }
      } else {
        if (newPosLeft < 0) {
          elStyle.left = 0;
          elStyle.width = Math.min(resizeArea.width + posChange - newPosLeft, containerWidth) + "px"
          elStyle.top = newPosTop - newPosLeft;
          elStyle.height = Math.min(resizeArea.height + posChange - newPosLeft, containerHeight) + "px"
          return;
        }
        if (newPosTop < 0) {
          elStyle.left = newPosLeft - newPosTop;
          elStyle.width = Math.min(resizeArea.width + posChange - newPosTop, containerWidth) + "px"
          elStyle.top = 0;
          elStyle.height = Math.min(resizeArea.height + posChange - newPosTop, containerHeight) + "px"
          return;
        }
        elStyle.left = newPosLeft + "px"
        elStyle.top = newPosTop + "px"
        elStyle.width = resizeArea.width + posChange + "px"
        elStyle.height = resizeArea.height + posChange + "px"
      }
    }
  }

結(jié)束

通過這些組件的編寫，感覺想要學(xué)好react，需要加深對this和事件模型的了解，這幾天在這上面踩了不少的坑。如果覺得這篇文章有幫助的話，歡迎star我的項目

云服務(wù)器 GPU云服務(wù)器圖片裁剪圖片裁剪比例圖片裁剪價格 PHP圖片裁剪

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/94355.html

發(fā)表評論

登陸后可評論

0條評論

Brenner

男|高級講師

我要關(guān)注我要私信

TA的文章

創(chuàng)建屬于自己的第一個.net項目

閱讀 2351·2021-11-25 09:43
LeetCode 劍指 Offer 輪轉(zhuǎn)數(shù)組轉(zhuǎn)旋轉(zhuǎn)字符串

閱讀 2864·2021-11-24 09:39
一個讓我很艸蛋的手機(jī)報表

閱讀 2926·2019-08-30 11:10
【JavaScript】DOM之樣式操作

閱讀 1130·2019-08-29 16:34
翻譯 | 編寫SVG的口袋指南（上）

閱讀 595·2019-08-29 13:25
vue 安裝遇到問題

閱讀 3358·2019-08-29 11:21
原生JS大揭秘—撩開this的面紗

閱讀 2861·2019-08-26 11:39
從零開始做Vue前端架構(gòu)（2）

閱讀 2394·2019-08-26 11:34

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

一個基于react的圖片裁剪組件

相關(guān)文章

自定義input上傳圖片組件

自定義input上傳圖片組件

自定義input上傳圖片組件

編寫一個頭像裁剪組件（一）

發(fā)表評論

0條評論

Brenner

男|高級講師

TA的文章

創(chuàng)建屬于自己的第一個.net項目

LeetCode 劍指 Offer 輪轉(zhuǎn)數(shù)組轉(zhuǎn)旋轉(zhuǎn)字符串

一個讓我很艸蛋的手機(jī)報表

【JavaScript】DOM之樣式操作

翻譯 | 編寫SVG的口袋指南（上）

vue 安裝遇到問題

原生JS大揭秘—撩開this的面紗

從零開始做Vue前端架構(gòu)（2）

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

一個基于react的圖片裁剪組件

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！