精华内容
下载资源
问答
  • cut 2.x基于vue和typescript开发的一款图片剪裁处理工具优点:原生、轻量、使用简单、功能全面、扩展性强目前功能:缩放、翻折、旋转、边缘校验、矩形剪裁、任意(椭)圆剪裁关于缩放:鼠标(鼠标滚轮缩放)、触屏(双指...

    vue-picture-cut 2.x

    基于vue和typescript开发的一款图片剪裁处理工具

    优点:原生、轻量、使用简单、功能全面、扩展性强

    目前功能:缩放、翻折、旋转、边缘校验、矩形剪裁、任意(椭)圆剪裁

    关于缩放:鼠标(鼠标滚轮缩放)、触屏(双指缩放)

    一、使用方法

    通过npm安装插件

    npm install vue-picture-cut

    在vue中使用

    1、在main.js中全局引用

    import Vue from 'vue';

    import 'vue-picture-cut/lib/vue-picture-cut.css';

    import VuePictureCut from 'vue-picture-cut';

    Vue.use(VuePictureCut);

    2、或者在.vue文件中单独引用

    import { VuePictureCut } from 'vue-picture-cut';

    export default {

    // ...

    components: {

    VuePictureCut

    },

    data () {

    return {

    src: null,

    blob: null,

    base64: null

    }

    },

    methods: {

    inputChange(e) {

    const file = e.target.files[0];

    this.src = URL.createObjectURL(file);

    },

    /**

    * @param blob BLOB对象

    * @param base64 base64字符串

    */

    cutChange({ blob, base64 }) {

    this.blob = blob;

    this.base64 = base64;

    }

    }

    // ...

    }

    @import "~vue-picture-cut/lib/vue-picture-cut.css";

    3、注意

    组件在使用时,宽高跟随父级标签,所以需要设置父级标签的宽高。

    二、API

    暴露的对象

    全局引入时

    import VuePictureCut from 'vue-picture-cut';

    Vue.use(VuePictureCut);

    此时会注册:VuePictureCut、VuePictureCutMask、VuePictureCutMenu三个组件。

    独立引用

    import {

    VuePictureCut,

    VuePictureCutMask,

    VuePictureCutMenu,

    Bezier,

    createAnimation,

    Tool,

    createUtils

    } from 'vue-picture-cut';

    组件:VuePictureCut、VuePictureCutMask、VuePictureCutMenu。 工具类:Bezier、createAnimation、Tool、createUtils。

    1、VuePictureCut组件

    slot插槽: default、menu

    使用:

    ref="pictureCut"

    :src="src"

    :magnification="magnification"

    :init-angle="initAngle"

    :msk-option="mskOption"

    :max-pixel="maxPixel"

    :encoder-options="encoderOptions"

    :format="format"

    :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,椭圆false

    resize: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插槽组件,是控制遮罩裁剪框相关的组件,使用它与不使用它效果一样。

    使用:

    :src="src"

    :magnification="magnification"

    :init-angle="initAngle"

    :rotate-control="rotateControl"

    :max-pixel="maxPixel"

    :encoder-options="encoderOptions"

    :format="format"

    :background-color="backgroundColor"

    @on-change="onChange"

    >

    :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。

    使用:

    :src="src"

    :magnification="magnification"

    :init-angle="initAngle"

    :rotate-control="rotateControl"

    :msk-option="mskOption"

    @on-change="cutChange"

    >

    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方法

    裁剪

    import { VuePictureCut, createUtils } from 'vue-picture-cut';

    export default {

    // ...

    components: {

    VuePictureCut

    },

    data () {

    return {

    utils: null,

    src: null,

    blob: null,

    base64: null

    }

    },

    mounted() {

    this.utils = createUtils(this.$refs['pictureCut']);

    },

    methods: {

    inputChange(e) {

    const file = e.target.files[0];

    this.src = URL.createObjectURL(file);

    },

    doCut() {

    const res = this.utils.cut();

    if (res) {

    this.blob = res.file; // BLOB对象

    this.base64 = res.src; // base64字符串

    }

    }

    }

    // ...

    }

    @import "~vue-picture-cut/lib/vue-picture-cut.css";

    包含方法

    cut(maxPixel?: number, encoderOptions?: number, format?: string): ClipResult | null

    描述:裁剪

    参数 maxPixel:导出图片的宽高中较长边的像素,不传时则依据实际图片大小自适应。

    参数 encoderOptions:压缩率

    参数 format:导出图片的格式'image/jpeg'、'image/png'等

    返回 ClipResult | null:略

    cut(opt?: { maxPixel?: number, encoderOptions?: number, format?: string }): ClipResult | null

    描述:裁剪

    参数 opt.maxPixel:导出图片的宽高中较长边的像素,不传时则依据实际图片大小自适应。

    参数 opt.encoderOptions:压缩率

    参数 opt.format:导出图片的格式'image/jpeg'、'image/png'等

    返回 ClipResult | null:略

    setMaskRound(isRound = true): void

    描述:设置裁剪框的形状。

    参数 isRound:true (圆形),false (矩形)。

    setMaskSize(w: number, h: number): void

    描述:设置剪裁框尺寸

    参数 w:比例宽

    参数 h:比例高

    setMaskSizeToOriginal (): void

    描述:按图片宽高比例设置剪裁框尺寸

    setMaskResize (resize = true): void

    描述:设置剪裁框是否可拖动改变大小

    参数 resize:略

    rotate (angle: number, animation = false): number | void

    描述:图片旋转

    参数 angle:逆时针角度

    参数 animation:是否进行动画

    返回 number | null:图片旋转后的逆时针角度

    rotateTo (angle: number, animation = false): void

    描述:图片旋转指定角度

    参数 angle:逆时针角度

    参数 animation:是否进行动画

    setFlipV(animation?: boolean): boolean | void

    描述:图片垂直翻转

    参数 animation:是否进行动画

    返回 boolean | null:和原图相比,是否翻转了,true (翻转),false (原始)。

    setFlipH(animation?: boolean): boolean | void

    描述:图片水平翻转

    参数 animation:是否进行动画

    返回 boolean | null:和原图相比,是否翻转了,true (翻转),false (原始)。

    setFlip (sV: boolean, sH: boolean, animation?: boolean): void

    描述:图片翻转

    参数 sV:垂直,true (翻转),false (原始)。

    参数 sH:水平,true (翻转),false (原始)。

    参数 animation:是否进行动画

    scale(zoom: number): void

    描述:图片缩放

    参数 zoom:缩放系数

    reset(): void

    描述:重置图片状态

    getOptions(): CutOptions | null

    描述:获取组件内部当前状态的参数。

    返回 CutOptions | null:略。

    8、 内部对象说明

    ...待编辑

    3、自定义扩展

    暂时可以参考src/App.vue和src/lib/views/vue-picture-cut-menu.vue

    3.1、自定义裁剪

    ...文档待编辑

    3.2、自定义菜单栏

    ...文档待编辑

    Ⅲ、希望大家都来用一下

    VuePictureCut 💗 you!

    展开全文
  • 它同样也支持在移动端的图片处理,它定义了诸多上传周期,你可以自由的进行流程控制。Githubhttps://github.com/Vanthink-UED/vue-core-image-upload安装npm install vue-core-image-upload --s...

    介绍

    vue-core-image-upload 是一款轻量级的 Vue.js 上传插件,它可以支持的图片的上传,裁剪,压缩。它同样也支持在移动端的图片处理,它定义了诸多上传周期,你可以自由的进行流程控制。

    Githubhttps://github.com/Vanthink-UED/vue-core-image-upload

    安装npm install vue-core-image-upload --save

    安装完成后,编辑源码

    class="btn btn-primary"

    :crop="false"

    @imageuploaded="imageuploaded"

    :data="data"

    :max-file-size="5242880"

    url="***" >

    import VueCoreImageUpload from 'core/vue-core-image-upload.vue'

    export default {

    components: {

    'vue-core-image-upload': VueCoreImageUpload,

    },

    data() {

    return {

    src: '***.png',

    }

    },

    methods: {

    imageuploaded(res) {

    if (res.errcode == 0) {

    this.src = res.data.src;

    }

    }

    }

    };

    基本属性

    Vue-core-image-upload 提供了很多可配置的选项,从而希望尽可能的满足开发者的需求。

    :class="['btn', 'btn-primary']"

    :crop="false"

    @imageuploaded="imageuploaded"

    :data="data"

    :max-file-size="5242880"

    url="***" >

    响应事件

    我们在上传的不同阶段指定了不同的派发事件,你可以绑定每个事件的响应方法,实现对于流程的控制。imageuploaded

    当图片上传完,会调用该事件绑定的函数,并且用户可以获取到服务端返回的数据。imagechanged

    当input框改变选择图片时候触发,会返回input的获取的图片数据imageuploading

    当图片上传过程中触发,你可以自定义你需要处理的内容比如显示加载动画等。errorhandle

    当图片上传发生错误的时候触发,会返回错误状态信息

    :class="['btn', 'btn-primary']"

    :crop="false"

    @imagechanged="imagechanged"

    @imageuploading="imageuploading"

    @imageuploaded="imageuploaded"

    :max-file-size="5242880"

    url="***.php" >

    methods: {

    imagechanged() {

    this.step += 1;

    },

    imageuploading() {

    this.step += 1;

    },

    imageuploaded(res) {

    this.step += 1;

    this.src = res.data.src;

    }

    }

    自定义组件样式

    你可以设置组件的class 以及自己编写子组件的形式来控制组件的显示的样子。

    :crop="false"

    @imageuploaded="imageuploaded"

    :data="data"

    :max-file-size="5242880"

    url="***.php" >

    裁剪图片

    你可以通过设置 crop,来实现图片的裁剪。你可以指定图片裁剪的宽高,以及它的最大宽度和高度这些参数。

    设置 cropRatio来限制裁剪图片的形状,需要字符串的格式(1:1 或者2:3这种比例形式),当然你可以设置为 auto 则不限制裁剪框的形状。

    设置图片裁剪后,批量上传将不再生效。

    图片裁剪完有两种选择,选择本地裁剪local或者服务端裁剪 server。本地裁剪

    你可以将 crop 设置为 local 来实现本地裁剪。本地裁剪完成后发送给服务端接口的图片便是已经裁剪好的图片。

    服务端裁剪

    服务端裁剪是指将原图片和裁剪的参数一起发给后端,方便服务端保存原图,以及对原图的其他操作,而服务端能够接收到post的参数如下:

    crop-ratio="1:1"

    :class="['btn', 'btn-primary']"

    crop="server"

    url="....php"

    extensions="png,gif,jpeg,jpg"

    text="Crop Image"

    @imageuploaded="crpoServerImageUploaded">

    调整图片

    你可以设置 resize 来进行图片的缩放。

    设置resize="local" 意味着图片的缩放将在本地进行。发给服务端的将会是大小调整完毕的后的图片。

    crop-ratio="1:1"

    class="btn btn-primary"

    resize="local"

    url="**.php"

    extensions="png,gif,jpeg,jpg"

    text="Resize Image"

    @imageuploaded="resizeLocalImageUploaded">

    上传多个文件multiple

    你可以使用 multiple 属性设置为true来实现多文件的上传。需要注意的是,你设置了该属性后,服务端收到文件上传的字段数据会是一个数组。multiple-size

    你可以使用multiple-size来限制图片的数量,你可以限制上传文件的数量。

    class="btn btn-primary"

    :crop="false"

    @imageuploaded="imageUploded"

    :max-file-size="5242880"

    :multiple="true"

    :multiple-size="4"

    url="***.php" >

    压缩图片

    设置compress的数值,你可以在上传之前进行图片的本地压缩。其中 compress 为 0 表示不压缩,数据越大,图片的质量越差,且最大值不能大于100。

    :class="['btn', 'btn-primary']"

    @imageuploaded="imageUploded"

    :max-file-size="5242880"

    compress="50" // 设置压缩比例

    url="***/upload" >

    向服务端发送数据

    你可以设置data 来将一些附带的数据发送给服务端。 当然你也可以将一些数据包含在 header 中传递过去,你只需要绑定到 header即可。

    展开全文
  • 它同样也支持在移动端的图片处理,它定义了诸多上传周期,你可以自由的进行流程控制。Githubhttps://github.com/Vanthink-UED/vue-core-image-upload安装npm install vue-core-image-upload --s...

    介绍

    vue-core-image-upload 是一款轻量级的 Vue.js 上传插件,它可以支持的图片的上传,裁剪,压缩。它同样也支持在移动端的图片处理,它定义了诸多上传周期,你可以自由的进行流程控制。

    Githubhttps://github.com/Vanthink-UED/vue-core-image-upload

    安装npm install vue-core-image-upload --save

    安装完成后,编辑源码

    class="btn btn-primary"

    :crop="false"

    @imageuploaded="imageuploaded"

    :data="data"

    :max-file-size="5242880"

    url="***" >

    import VueCoreImageUpload from 'core/vue-core-image-upload.vue'

    export default {

    components: {

    'vue-core-image-upload': VueCoreImageUpload,

    },

    data() {

    return {

    src: '***.png',

    }

    },

    methods: {

    imageuploaded(res) {

    if (res.errcode == 0) {

    this.src = res.data.src;

    }

    }

    }

    };

    基本属性

    Vue-core-image-upload 提供了很多可配置的选项,从而希望尽可能的满足开发者的需求。

    :class="['btn', 'btn-primary']"

    :crop="false"

    @imageuploaded="imageuploaded"

    :data="data"

    :max-file-size="5242880"

    url="***" >

    响应事件

    我们在上传的不同阶段指定了不同的派发事件,你可以绑定每个事件的响应方法,实现对于流程的控制。imageuploaded

    当图片上传完,会调用该事件绑定的函数,并且用户可以获取到服务端返回的数据。imagechanged

    当input框改变选择图片时候触发,会返回input的获取的图片数据imageuploading

    当图片上传过程中触发,你可以自定义你需要处理的内容比如显示加载动画等。errorhandle

    当图片上传发生错误的时候触发,会返回错误状态信息

    :class="['btn', 'btn-primary']"

    :crop="false"

    @imagechanged="imagechanged"

    @imageuploading="imageuploading"

    @imageuploaded="imageuploaded"

    :max-file-size="5242880"

    url="***.php" >

    methods: {

    imagechanged() {

    this.step += 1;

    },

    imageuploading() {

    this.step += 1;

    },

    imageuploaded(res) {

    this.step += 1;

    this.src = res.data.src;

    }

    }

    自定义组件样式

    你可以设置组件的class 以及自己编写子组件的形式来控制组件的显示的样子。

    :crop="false"

    @imageuploaded="imageuploaded"

    :data="data"

    :max-file-size="5242880"

    url="***.php" >

    裁剪图片

    你可以通过设置 crop,来实现图片的裁剪。你可以指定图片裁剪的宽高,以及它的最大宽度和高度这些参数。

    设置 cropRatio来限制裁剪图片的形状,需要字符串的格式(1:1 或者2:3这种比例形式),当然你可以设置为 auto 则不限制裁剪框的形状。

    设置图片裁剪后,批量上传将不再生效。

    图片裁剪完有两种选择,选择本地裁剪local或者服务端裁剪 server。本地裁剪

    你可以将 crop 设置为 local 来实现本地裁剪。本地裁剪完成后发送给服务端接口的图片便是已经裁剪好的图片。

    服务端裁剪

    服务端裁剪是指将原图片和裁剪的参数一起发给后端,方便服务端保存原图,以及对原图的其他操作,而服务端能够接收到post的参数如下:

    crop-ratio="1:1"

    :class="['btn', 'btn-primary']"

    crop="server"

    url="....php"

    extensions="png,gif,jpeg,jpg"

    text="Crop Image"

    @imageuploaded="crpoServerImageUploaded">

    调整图片

    你可以设置 resize 来进行图片的缩放。

    设置resize="local" 意味着图片的缩放将在本地进行。发给服务端的将会是大小调整完毕的后的图片。

    crop-ratio="1:1"

    class="btn btn-primary"

    resize="local"

    url="**.php"

    extensions="png,gif,jpeg,jpg"

    text="Resize Image"

    @imageuploaded="resizeLocalImageUploaded">

    上传多个文件multiple

    你可以使用 multiple 属性设置为true来实现多文件的上传。需要注意的是,你设置了该属性后,服务端收到文件上传的字段数据会是一个数组。multiple-size

    你可以使用multiple-size来限制图片的数量,你可以限制上传文件的数量。

    class="btn btn-primary"

    :crop="false"

    @imageuploaded="imageUploded"

    :max-file-size="5242880"

    :multiple="true"

    :multiple-size="4"

    url="***.php" >

    压缩图片

    设置compress的数值,你可以在上传之前进行图片的本地压缩。其中 compress 为 0 表示不压缩,数据越大,图片的质量越差,且最大值不能大于100。

    :class="['btn', 'btn-primary']"

    @imageuploaded="imageUploded"

    :max-file-size="5242880"

    compress="50" // 设置压缩比例

    url="***/upload" >

    向服务端发送数据

    你可以设置data 来将一些附带的数据发送给服务端。 当然你也可以将一些数据包含在 header 中传递过去,你只需要绑定到 header即可。

    展开全文
  • vue-svgicon 一个创建 svg 图标组件的工具 官方文档:https://github.com/MMF-FE/vue-svgicon 使用方式 安装 // 安装到全局 npm install vue-svgicon -g // 安装到项目 npm install vue-svgicon --save-dev ...

    vue-svgicon

    一个创建 svg 图标组件的工具

    官方文档:https://github.com/MMF-FE/vue-svgicon

    使用方式

    安装

    // 安装到全局
    npm install vue-svgicon -g
    
    // 安装到项目
    npm install vue-svgicon --save-dev
    

    使用 npm scripts配置图标解析和输出路径

    // package.json
    // 生成 svg 图标组件, -s: svg 源文件,-t: 图标组件生成路径
    {
        "scripts": {
        "svg": "vsvg -s ./src/icons/svg -t ./src/icons/components --ext ts --es6"
        }
    }
    

    全局样式

    首先,需要为 vue-svgicon 在全局写一些样式代码。推荐的代码如下:

    /* recommended css code for vue-svgicon */
    .svg-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    color: inherit;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    }
    
    .svg-fill {
    fill: currentColor;
    stroke: none;
    }
    
    .svg-up {
    /* 默认 */
    transform: rotate(0deg);
    }
    
    .svg-right {
    transform: rotate(90deg);
    }
    
    .svg-down {
    transform: rotate(180deg);
    }
    
    .svg-left {
    transform: rotate(-90deg);
    }
    

    在main.js中引入svgIcon组件并且全局注册 vue-svgicon 组件

    // main.js
    import Vue from 'vue'
    import App from './App.vue'
    import SvgIcon from 'vue-svgicon'
    
    // Default tag name is 'svgicon'
    Vue.use(SvgIcon, {
    tagName: 'svgicon'
    })
    
    new Vue({
    el: '#app',
    render: h => h(App)
    })
    

    执行下npm run svg命令

    在组件中使用图标组件

    <!-- App.vue -->
    <template>
        <div id="app">
            <p>
                <svgicon
                    name="404"
                    width="200"
                    height="200"
                    color="#42b983 #35495e"
                ></svgicon>
            </p>
        </div>
    </template>
    
    <script>
    // �使用之前需要引入生成的图标�
    import 'src/icons/components/404'
    
    export default {
        name: 'app',
        data() {
            return {
                msg: 'Welcome to Your Vue.js App'
            }
        }
    }
    </script>
    展开全文
  • 序:vue项目时候,我们要对图片进行懒加载处理,这个开发项目中就不需要自己去写了,因为比较方便使用vue lazyload进行处理,高效率开发 一. vue lazyload插件插件地址:...
  • 它同样也支持在移动端的图片处理,它定义了诸多上传周期,你可以自由的进行流程控制。Githubhttps://github.com/Vanthink-UED/vue-core-image-upload安装npm install vue-core-image-upload --s...
  • vue-picture-cut 2.x基于vue和typescript开发的一款图片剪裁处理工具 优点:原生、轻量、使用简单、功能全面、扩展性强 目前功能:缩放、翻折、旋转、边缘校验、矩形剪裁、任意(椭)圆剪裁 关于缩放:鼠标(鼠标滚轮...
  • 基于vue和typescript开发的一款图片剪裁处理工具 优点:原生、轻量、使用简单、功能全面、扩展性强 目前功能:缩放、翻折、旋转、边缘校验、矩形剪裁、任意(椭)圆剪裁 关于缩放:鼠标(鼠标滚轮缩放)、触屏(双指...
  • vue-picture-cut 2.x基于vue和typescript开发的一款图片剪裁处理工具 优点:原生、轻量、使用简单、功能全面、扩展性强 目前功能:缩放、翻折、旋转、边缘校验、矩形剪裁、任意(椭)圆剪裁 关于缩放:鼠标(鼠标滚轮...
  • 基于vue图片裁剪插件vue-cropper

    万次阅读 热门讨论 2018-09-28 10:30:46
    我在网上找了很多关于vue裁剪图片的文章,demo都太长了,实在是太长了。有些还都看不懂,最后还是用了个大佬的demo,但是项目实践过程中还是有问题没解决。先介绍吧。效果是下面这样的, 我这里采用了4:3的固定...
  •  对于vue项目而言,图片懒加载是一个常见的图片加载方案,可以优化用户体验,而vue-lazyload则是一个广泛使用的插件。  对于某些业务场景,我们需要监听图片加载失败事件,而后进行相应的处理,然而无论是官方文档...
  • 网上找了点教程,结合之前框架里就有的修改了一下,没做细节优化处理 demo 16:9的尺寸,自己可以修改 npm install vue-cropper 组件内使用 import { VueCropper } from 'vue-cropper' components: { VueCropper...
  • 它同样也支持在移动端的图片处理,它定义了诸多上传周期,你可以自由的进行流程控制。Githubhttps://github.com/Vanthink-UED/vue-core-image-upload安装npm install vue-core-image-upload --s...
  • 安装vue-directive-image-previewer插件 npm install vue-directive-image-previewer --save 在vue项目中的main.js中引入并注册 import VueDirectiveImagePreviewer from 'vue-directive-image-previewer' ...
  • 最近在开发一个批量展示图片的页面,图片的自适应排列是一个无法避免的问题在付出了许多头发的代价之后,终于完成了图片排列,并封装成组件,最终效果如下一、设计思路为了使结构清晰,我将图片列表处理成了二维数组...
  • 介绍vue-lazyload是一个基于Vue的延迟加载插件,用于延迟加载Vue组件或者图像。Githubhttps://github.com/hilongjw/vue-lazyload特点轻便,功能强大且易于使用处理任何图像类型加载图像时添加加载类同时支持Vue 1.0...
  • Vue.js移动端图片压缩插件localResizeIMG

    千次阅读 2018-11-21 11:49:37
      为了降低类似问题带来的影响,我们采用Vue2.0压缩图片插件localResizeIMG(lrz),压缩图片。   大体的思路:每次拍照或选择一张图片-然后压缩图片-预览上传。上传图片压缩插件是localResizeIMG , 这个插件的...
  • 更新记录1.0.0(2021-02-07)首次提交组件平台兼容性app微信小程序支付宝小程序百度小程序字节小程序QQ小程序快...Safari√√√√√√√√√实现朋友圈图片自适应排列说明本组件通常用于需要处理朋友圈或者类似qq空间...
  • 前言最近在开发一个批量展示图片的页面,图片的自适应排列是一个无法避免的问题在付出了许多头发的代价之后,终于完成了图片排列,并封装成组件,最终效果如下:1、设计思路为了使结构清晰,我将图片列表处理成了二...
  • vue常用插件

    2020-09-23 11:33:09
    better-scroll(页面平滑滚动) ...vant(ui组件库 可适用于移动端 ) element-ui (ui组件) dayjs (日期处理组件) ...vue-image-crop-upload(图片上传) vue table with tree grid (表格树) vue-json-excel
  • 这个插件Vue契合良好,使用起来比其他的诸如百度UEditor要方便很多,但是存在一个小问题就是Vue-Quill-Editor对于图片上传的处理,它是把图片转换为Base64格式然后上传到后台服务器的,这样做存在的问题就是当图片...
  • 它同样也支持在移动端的图片处理,它定义了诸多上传周期,你可以自由的进行流程控制。Githubhttps://github.com/Vanthink-UED/vue-core-image-upload安装npm install vue-core-image-upload --s...
  • 前端vue常用插件

    2019-10-23 18:14:23
    服务端渲染(SSR)预渲染:prerender-spa-...日期处理: dayjs cookie: js-cookie md5: js-md5 拖动:vuedraggable 树形结构:vue-org-tree 图片裁剪:cropperjs 文本复制:clipboard 模拟数据:mockjs ...
  • Vue插件汇总

    千次阅读 多人点赞 2019-09-03 23:19:03
    目录 一、UI组件及框架 二、滚动scroll组件 三、slider组件 四、编辑器 ...十一、图片处理 十二、提示 十三、进度条 十四、开发框架汇总 十五、实用库汇总 十六、服务端 十七、辅助工具 ...

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 237
精华内容 94
关键字:

vue图片处理插件

vue 订阅