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

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

旋轉圖片

放大圖片

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

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

掛載對 window 對象mousemove事件 ---> 獲取 鼠標移動x,y距離.從而操作 canvas里的圖像的位置移動。

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

剩下的 放大、縮小 、 旋轉 是對 canvas 對象的操作/坐標體系的操作。具體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})
    }
    // 最后一個
    export const fbTwice = ({fn, time = 300}) => {
        let [cTime, k] = [null, null]
        // 獲取當前時間
        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 () => {
            // 當前時間
            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()
            })
        }
    }
    

組件模板

項目代碼（https://github.com/L6zt/vuesrr）