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

本篇文章主要介绍了vue实现裁切图片同时实现放大、缩小、旋转功能，分享给大家，具体如下：

实现效果：

裁切指定区域内的图片

旋转图片

放大图片

输出bolb 格式数据 提供给 formData 对象

效果图

大概原理：

利用h5 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 (type