摘要：當(dāng)用戶鼠標(biāo)左鍵在按下時(shí)掛載對(duì)對(duì)象事件獲取鼠標(biāo)移動(dòng)距離從而操作里的圖像的位置移動(dòng)。掛載對(duì)對(duì)象事件，清除事件的綁定。同時(shí)該事件觸發(fā)后會(huì)被刪除剩下的放大縮小旋轉(zhuǎn)是對(duì)對(duì)象的操作坐標(biāo)體系的操作。

裁切指定區(qū)域內(nèi)的圖片

旋轉(zhuǎn)圖片

放大圖片

輸出bolb 格式數(shù)據(jù) 提供給 formData 對(duì)象

利用h5 FileReader 對(duì)象， 獲取 “上傳到瀏覽器的文件” ，文件形式 為base64形式， 把 base64 賦給canvas的上下文。
然后給canvas 元素上加入對(duì)（mousedown）監(jiān)聽事件。 當(dāng)用戶鼠標(biāo)左鍵在canvas按下時(shí)：

掛載對(duì) window 對(duì)象mousemove事件 ---> 獲取 鼠標(biāo)移動(dòng)x,y距離.從而操作 canvas里的圖像的位置移動(dòng)。

掛載對(duì) window 對(duì)象mouseup 事件， 清除 mousemove事件的綁定。（同時(shí)該事件觸發(fā)后會(huì)被刪除）

剩下的 放大、縮小 、 旋轉(zhuǎn) 是對(duì) canvas 對(duì)象的操作/坐標(biāo)體系的操作。具體api詳見mdn canvas 文檔

dom.js

export const on = ({el, type, fn}) => {
         if (typeof window) {
             if (window.addEventListener) {
                 el.addEventListener(type, fn, false)
            } else {
                 el.attachEvent(`on${type}`, fn)
            }
         }
    }
    export const off = ({el, type, fn}) => {
        if (typeof window) {
            if (window.addEventListener) {
                el.removeEventListener(type, fn)
            } else {
                el.detachEvent(`on${type}`, fn)
            }
        }
    }
    export const once = ({el, type, fn}) => {
        const hyFn = (event) => {
            try {
                fn(event)
            }
             finally  {
                off({el, type, fn: hyFn})
            }
        }
        on({el, type, fn: hyFn})
    }
    // 最后一個(gè)
    export const fbTwice = ({fn, time = 300}) => {
        let [cTime, k] = [null, null]
        // 獲取當(dāng)前時(shí)間
        const getTime = () => new Date().getTime()
        // 混合函數(shù)
        const hyFn = () => {
            const ags = argments
            return () => {
                clearTimeout(k)
                k = cTime =  null
                fn(...ags)
            }
        }
        return () => {
            if (cTime == null) {
                k = setTimeout(hyFn(...arguments), time)
                cTime = getTime()
            } else {
                if ( getTime() - cTime < 0) {
                    // 清除之前的函數(shù)堆 ---- 重新記錄
                    clearTimeout(k)
                    k = null
                    cTime = getTime()
                    k = setTimeout(hyFn(...arguments), time)
                }
            }}
    }
    export  const contains = function(parentNode, childNode) {
        if (parentNode.contains) {
            return parentNode != childNode && parentNode.contains(childNode)
        } else {
            return !!(parentNode.compareDocumentPosition(childNode) & 16)
        }
    }
    export const addClass = function (el, className) {
        if (typeof el !== "object") {
            console.log("el is not elem")
            return null
        }
        let  classList = el["className"]
        classList = classList === "" ? [] : classList.split(/s+/)
        if (classList.indexOf(className) === -1) {
            classList.push(className)
            el.className = classList.join(" ")
        } else {
            console.warn("warn className current")
        }
    }
    export const removeClass = function (el, className) {
        let classList = el["className"]
        classList = classList === "" ? [] : classList.split(/s+/)
        classList = classList.filter(item => {
            return item !== className
        })
        el.className =     classList.join(" ")
    }
    export const delay = ({fn, time}) => {
        let oT = null
        let k = null
        return () => {
            // 當(dāng)前時(shí)間
            let cT = new Date().getTime()
            const fixFn = () => {
                k = oT = null
                fn()
            }
            if (k === null) {
                oT = cT
                k = setTimeout(fixFn, time)
                return
            }
            if (cT - oT < time) {
                oT = cT
                clearTimeout(k)
                k = setTimeout(fixFn, time)
            }
        
        }
    }
    export  const Event = function () {
       // 類型
       this.typeList = {}
    }
    Event.prototype.on = function ({type, fn}){
        if (this.typeList.hasOwnProperty(type)) {
            this.typeList[type].push(fn)
        } else {
            this.typeList[type] = []
            this.typeList[type].push(fn)
        }
    }
    Event.prototype.off = function({type, fn})  {
       if (this.typeList.hasOwnProperty(type)) {
             let list = this.typeList[type]
          let index = list.indexOf(fn)
          if (index !== -1 ) {
                 list.splice(index, 1)
          }
          
       } else {
            console.warn("not has this type")
       }
    }
    Event.prototype.once = function ({type, fn}) {
       const fixFn = () => {
            fn()
            this.off({type, fn: fixFn})
       }
       this.on({type, fn: fixFn})
    }
    Event.prototype.trigger = function (type){
        if (this.typeList.hasOwnProperty(type)) {
            this.typeList[type].forEach(fn => {
                fn()
            })
        }
    }
    

組件模板

項(xiàng)目代碼（https://github.com/L6zt/vuesrr）