JavaScript 和 ES6
在这个过程你会发现,有很多 JS 知识点你并不能更好的理解为什么这么设计,以及这样设计的好处是什么,这就逼着让你去学习这单个知识点的来龙去脉,去哪学?第一,书籍,我知道你不喜欢看,我最近通过刷大厂面试题整理了一份前端核心知识笔记,比较书籍更精简,一句废话都没有,这份笔记也让我通过跳槽从8k涨成20k。
如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
:rotate-control=“rotateControl”
:menu-position=“menuPosition”
:menu-thickness=“menuThickness”
:background-color=“backgroundColor”
@on-change=“onChange”
/>
属性:
- src:
类型:string默认:null描述:图片链接
- magnification:
类型:number默认:1.5描述:画布绘制缩放率,取值大于0,取值越大绘制的逻辑像素越高
- initAngle:
类型:number必须:非必须描述:载入图片的初始旋转角度
- maxPixel:
类型:number必须:非必须描述:导出图片的宽高中较长边的像素,不传时则依据实际图片大小自适应。
- encoderOptions:
类型:number必须:非必须描述:导出图片的压缩率,不传时按0.8计算,取值范围0~1。
- format:
类型:string默认:false描述:导出图片的格式,不传时导出格式为“image/jpeg”,其值可以为“image/png”等浏览器支持格式。
- mskOption:
类型:object默认:{ width: 1, height: 1, isRound: false, resize: true}描述:width:number 裁剪框比例宽height:number 裁剪框比例高isRound:boolean 矩形true,椭圆falseresize:boolean 裁剪框大小是否可通过拖动改变大小color:string 遮罩颜色borderColor:string 裁剪框颜色
- rotateControl:
类型:boolean默认:false描述:是否显示旋转控件。
- menuPosition:
类型:string默认:bottom描述:菜单栏位置,取值:top、bottom、left、right。
- menuThickness:
类型:number必须:非必须描述:menuPosition取top、bottom时表示菜单栏高度,menuPosition取left、right时表示菜单栏高度宽度,取值大于0,等于0时隐藏菜单栏。
- backgroundColor:
类型:string必须:非必须描述:组件背景色。
事件:
- onChange ({ blob, base64 }):监听图片最终裁剪导出的事件
blob:导出图片的Blob对象,可用于图片上传base64:导出图片的base64字符串,可用于图片上传
方法:
- this.$refs[‘pictureCut’].scale(zoom):缩放图片
参数zoom:缩放后的尺寸和当前尺寸的比例,取值大于0,0到1之间缩小,大于1放大。
2、VuePictureCutMask组件
=====================
VuePictureCutMask是VuePictureCut默认slot插槽组件,是控制遮罩裁剪框相关的组件,使用它与不使用它效果一样。
使用:
/demo/demo3.html
<vue-picture-cut
:src=“src”
:magnification=“magnification”
:init-angle=“initAngle”
:rotate-control=“rotateControl”
:max-pixel=“maxPixel”
:encoder-options=“encoderOptions”
:format=“format”
:background-color=“backgroundColor”
@on-change=“onChange”
<vue-picture-mask
:width=“width”
:height=“height”
:is-round=“isRound”
:resize=“resize”
:color=“color”
:border-color=“borderColor”
/>
属性:
- width:
类型:number默认:1描述:裁剪框比例宽
- height:
类型:number默认:1描述:裁剪框比例高
- isRound:
类型:boolean默认:false描述:矩形true,椭圆false
- resize:
类型:boolean默认:false描述:裁剪框大小是否可通过拖动改变大小
- color:
类型:string必须:非必须描述:遮罩颜色
- borderColor:
类型:string必须:非必须描述:裁剪框颜色
3、VuePictureCutMenu组件
=====================
菜单栏组件,效果参见Demo。
使用:
/demo/demo4.html
/demo/demo5.html
<vue-picture-cut
:src=“src”
:magnification=“magnification”
:init-angle=“initAngle”
:rotate-control=“rotateControl”
:msk-option=“mskOption”
@on-change=“cutChange”
<vue-picture-menu
slot=“menu”
:cancel=“false”
:max-pixel=“maxPixel”
:encoder-options=“encoderOptions”
:format=“format”
:theme=“theme”
confirm-name=“Ok”
cancel-name=“Cancel”
size-auto-name=“auto”
size-raw-name=“raw”
menu-rotate-name=“Rotate”
@on-change=“onChange”
@on-cancel=“onCancel”
/>
属性:
- cancel:
类型:boolean默认:false描述:是否显示取消按钮。
- maxPixel:
类型:number必须:非必须描述:导出图片的宽高中较长边的像素,不传时则依据实际图片大小自适应。
- encoderOptions:
类型:number必须:非必须描述:导出图片的压缩率,不传时按0.8计算,取值范围0~1。
- format:
类型:string默认:false描述:导出图片的格式,不传时导出格式为“image/jpeg”,其值可以为“image/png”等浏览器支持格式。
- theme:
类型:string默认:'default’描述:菜单栏主题。取值:‘default’、‘dark’、‘gray’
- confirmName:
类型:string默认:'Ok’描述:确定按钮的文字
- cancelName:
类型:string默认:'cancel’描述:取消按钮的文字
- sizeAutoName:
类型:string默认:'auto’描述:菜单栏按钮文字
- sizeRawName:
类型:string默认:'raw’描述:菜单栏按钮文字
- menuRotateName:
类型:string默认:'Rotate’描述:菜单栏按钮文字
- root:
类型:object必须:不通过slot方式在外部使用时,必须传。描述:取值为VuePictureCut实例
事件:
- onChange ({ blob, base64 }):监听图片最终裁剪导出的事件,即点击确认按钮
blob:导出图片的Blob对象,可用于图片上传base64:导出图片的base64字符串,可用于图片上传
- onCancel ():监听点击取消按钮
4、Bezier对象
==========
import { Bezier } from ‘vue-picture-cut’;
const bezier = Bezier();
bezier.setOpt(Bezier.BEZIER[‘ease-in-out’]);
const y = bezier.getPoint(0.5);
console.log(y);
(1) 静态属性BEZIER,是一个键值对,包含一些预设值
=============================
键
值
说明
linear | [0.0, 0.0, 1.0, 1.0] | 线性过渡 |
ease | [0.25, 0.1, 0.25, 1.0] | 平滑过渡 |
ease-in | [0.42, 0, 1.0, 1.0] | 由慢到快 |
ease-out | [0, 0, 0.58, 1.0] | 由快到慢 |
ease-in-out | [0.42, 0, 0.58, 1.0] | 由慢到快再到慢 |
(2) 构造函数
========
一个无参的构造函数,内部调用了setOptByString(‘ease’)方法
(3) 方法
======
方法名
说明
参数
返回值
setOpt | 设置贝塞尔曲线类型 | (arg: string , ParamsInterface = 'ease') | Bezier对象本身 |
setOptByString | 设置贝塞尔曲线类型 | BEZIER预设值(arg = 'ease') | Bezier对象本身 |
setOptByArr | 设置贝塞尔曲线类型 | (x1: number, y1: number, x2: number, y2: number) | Bezier对象本身 |
getPoint | 返回x坐标对应的y坐标值 | (x: number) 0~1之间 | 对应y坐标,0~1之间 |
(4) 参数ParamsInterface说明
=======================
ParamsInterface为包含4个number类型的数组。
5、 createAnimation方法
====================
import { createAnimation } from ‘vue-picture-cut’;
const animation = createAnimation(option);
createAnimation会返回一个Animation对象
(1) 参数option
============
参数
说明
类型
可选值
必需
默认值
duration | 动画持续时间,单位毫秒 | number | —— | false | 1000 |
timing | 动画的过渡类型 | string、number[] | Bezier.BEZIER中的值,或者ParamsInterface类型 | false | ease |
delay | 动画的延迟时间,单位毫秒 | number | —— | false | 0 |
iteration | 动画循环次数,infinite为无限循环 | number、string | 'infinite'或正整数 | false | 0 |
direction | 动画在循环中是否反向运动 | string | normal(默认,正向运动);reverse(反向运行);alternate(先正向,后反向,并交替);alternate-reverse(先反向,后正向,并交替)。 | false | normal |
change | 回调函数,接收参数x,x在0~1之间,动画在这里处理 | Function | —— | false | —— |
end | 回调函数,动画结束时执行 | Function | —— | false | —— |
(2) Animation对象方法
=================
方法名
说明
参数
返回值
start | 开始动画 | —— | Animation对象本身 |
abort | 中止动画 | —— | —— |
6、 Tool对象
=========
import { Tool } from ‘vue-picture-cut’;
Tool.loadImg(‘http://xxx.xxx.xxx/xxx.jpg’)
.then(image => {
// 加载图片成功
// image为Image对象
}, () => {
// 加载图片失败
});
包含方法
====
- loadImg (src: string): Promise
描述:载入图片参数 src:图片的链接返回 Promise:略
- rotatePoint(x: number, y: number, angle: number): Point
描述:将一个点绕原点旋转angle度后,计算新的点的坐标参数 x:点的x坐标参数 y:点的y坐标参数 angle:旋转角度返回 Point:{x: number, y: number} 新的点
- clipBy (img: HTMLImageElement, width: number, height: number, showRect: RectFull, encoderOptions = 0.8, format = ‘image/jpeg’, pathDone?: PathDone): string
描述:根据坐标剪裁图像参数 img:Image对象参数 width:导出图片的宽度(px)参数 height:导出图片的高度(px)参数 showRect:RectFull对象参数 encoderOptions:压缩率参数 format:导出图片的格式’image/jpeg’、'image/png’等参数 pathDone:自定义路径的方法PathDone返回 String:base64
- clipByRound (img: HTMLImageElement, width: number, height: number, showRect: RectFull, encoderOptions = 0.8, format = ‘image/jpeg’): string
描述:根据坐标内切圆剪裁图像参数 img:略参数 width:略参数 height:略参数 showRect:略参数 encoderOptions:略参数 format:略返回 String:base64
- clipByMax (img: HTMLImageElement, max = 2000, encoderOptions = 1): ClipResult | void
描述:若图片宽或高大于max,则压缩图片参数 img:略参数 max:略参数 encoderOptions:略返回 ClipResult | void:返回ClipResult对象或undefined
- base64ToBlob (base64: string, format = ‘image/jpeg’): Blob | null
描述:将base64转Blob对象参数 base64:略参数 format:base64的格式返回 Blob | null:返回Blob对象或null
- getEllipseRectByRect(w: number, h: number, angle: number): Rect
描述:将一个正矩形的内切椭圆旋转angle度,计算该椭圆的外接正矩形。(假设矩形中心为原点)参数 w:初始正矩形宽参数 h:初始正矩形高参数 angle:逆时针旋转角度返回 Rect:返回Rect对象
- getRectByRect(w: number, h: number, angle: number): Rect
描述:将一个正矩形旋转angle度,计算该矩形的外接正矩形。(假设矩形中心为原点)参数 w:初始正矩形宽参数 h:初始正矩形高参数 angle:逆时针旋转角度返回 Rect:返回Rect对象
7、 createUtils方法
================
<input type=“file” accept=“image/*” @change=“inputChange”/>
<button @click=“doCut”>裁剪