vue如何实现裁切图片同时实现放大、缩小、旋转功能

这篇文章将为大家详细讲解有关vue如何实现裁切图片同时实现放大、缩小、旋转功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联-专业网站定制、快速模板网站建设、高性价比伊美网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式伊美网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖伊美地区。费用合理售后完善，十余年实体公司更值得信赖。

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

vue实现裁切图片同时实现放大、缩小、旋转功能，分享给大家，具体如下：

实现效果：

裁切指定区域内的图片
旋转图片
放大图片
输出bolb 格式数据提供给 formData 对象

效果图

vue如何实现裁切图片同时实现放大、缩小、旋转功能

大概原理：

利用h6 FileReader 对象，获取 “上传到浏览器的文件” ，文件形式为base64形式，把 base64 赋给canvas的上下文。

然后给canvas 元素上加入对（mousedown）监听事件。当用户鼠标左键在canvas按下时：

挂载对 window 对象mousemove事件 ---> 获取鼠标移动x,y距离.从而操作 canvas里的图像的位置移动。
挂载对 window 对象mouseup 事件，清除 mousemove事件的绑定。（同时该事件触发后会被删除）

剩下的放大、缩小、旋转是对 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()
    // 混合函数
    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) {
          // 清除之前的函数堆 ---- 重新记录
          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()
      })
    }
  }

组件模板

NEWS

网站建设资讯

vue如何实现裁切图片同时实现放大、缩小、旋转功能

vue是什么