vue实现裁切图片同时实现放大、缩小、旋转功能
|
本篇文章主要介绍了vue实现裁切图片同时实现放大、缩小、旋转功能，分享给大家，具体如下： 实现效果：
效果图
大概原理：利用h5 FileReader 对象， 获取 然后给canvas 元素上加入对（mousedown）监听事件。 当用户鼠标左键在canvas按下时：
剩下的 放大、缩小 、 旋转 是对 canvas 对象的操作/坐标体系的操作。具体api详见mdn canvas 文档 代码dom.js {
if (typeof window) {
if (window.addEventListener) {
el.addEventListener(type,fn,false)
} else {
el.attachEvent(`on${type}`,fn)
}
}
}
export const off = ({el,fn}) => {
if (typeof window) {
if (window.addEventListener) {
el.removeEventListener(type,fn)
} else {
el.detachEvent(`on${type}`,fn)
}
}
}
export const once = ({el,fn}) => {
const hyFn = (event) => {
try {
fn(event)
}
finally {
off({el,fn: hyFn})
}
}
on({el,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)
}
} } 组件模板
{{scale}}
|
