Newton's Programmatic Measurements

    vue-picture-cut

    2.0.17 • Public • Published

    vue-picture-cut 2.x

    npm download license

    English | 中文

    An image clipping tool based on vue and typescript.
    Advantage:It is original, light weight, simple to use, comprehensive function and strong expansibility
    Feature:Scale, flip, rotate, edge check, rectangle clip, ellipse clip
    About zoom: mouse (mouse wheel zoom), touch screen (double finger zoom)

    github homepage
    gitee homepage
    demo(github)
    demo(gitee)

    💩💩💩Version 0.x is here【This version has too many bugs and is no longer maintained】

    🚀 【Update Log】

    Ⅰ、Usage

    Install

    npm install vue-picture-cut

    Using in Vue

    1、Inmain.jsGlobal reference in

    import Vue from 'vue';
    import 'vue-picture-cut/lib/vue-picture-cut.css';
    import VuePictureCut from 'vue-picture-cut';
    
    Vue.use(VuePictureCut);

    2、Or use it alone in the .vue file

    <template>
      <div>
    	<input type="file" accept="image/*" @change="inputChange"/>
        <vue-picture-cut :src="src" @on-change="cutChange"/>
      </div>
    </template>
    
    <script>
      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 object
           * @param base64    Base64 string
           */
          cutChange({ blob, base64 }) {
            this.blob = blob;
            this.base64 = base64;
          }
        }
        // ...
      }
    </script>
    
    <style>
      @import "~vue-picture-cut/lib/vue-picture-cut.css";
    </style>

    3、Attention

    When components are used, the width and height follow the parent label, so it is necessary to set the width and height of the parent label.

    Ⅱ、API

    Exposed objects

    When importing globally

    import VuePictureCut from 'vue-picture-cut';
    Vue.use(VuePictureCut);

    This will register:VuePictureCutVuePictureCutMaskVuePictureCutMenuthree components。

    Separate using

    import {
      VuePictureCut,
      VuePictureCutMask,
      VuePictureCutMenu,
      Bezier,
      createAnimation,
      Tool,
      createUtils
    } from 'vue-picture-cut';

    Components:VuePictureCutVuePictureCutMaskVuePictureCutMenu。 Tools:BeziercreateAnimationToolcreateUtils

    1、VuePictureCut Components

    Slots: defaultmenu

    Using:

    /demo/demo1.html
    /demo/demo2.html

    <template>
      <vue-picture-cut
        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"
      />
    </template>

    Attribute:

    1. src
      type:string
      default:null
      describe:pictures linking
    2. magnification
      type:number
      default:1.5
      describe:Canvas drawing zoom rate,and the value is greater than 0,The higher the value, the higher the logical pixels drawn.
    3. initAngle
      type:number
      required:false
      describe:Initial rotation angle of loaded image
    4. maxPixel
      type:number
      required:false
      describe:Export the pixels on the longer side of the picture. When the value is not transferred, it is adaptive according to the actual image size.
    5. encoderOptions
      type:number
      required:false
      describe:Compression ratio of exported pictures. When the value is not transferred, it is calculated as 0.8, and the value range is 0 ~ 1.
    6. format
      type:string
      default:false
      describe:Format of exported picture. When no value is transferred, the export format is “image/jpeg”, and the value can be “image/png” and other browser supported formats.
    7. mskOption
      type:object
      default{ width: 1, height: 1, isRound: false, resize: true}
      describe
      width:{number} Crop box width ratio.
      height:{number} Crop box height ratio.
      isRound:{boolean} rectangle - true,ellipse - false.
      resize:{boolean} Can the crop box size be changed by dragging.
      color:{string} Mask color.
      borderColor:{string} Crop box color.
    8. rotateControl
      type:boolean
      default:false
      describe:Whether to display the rotation control.
    9. menuPosition
      type:string
      default:bottom
      describe:Location of menu bar. Value:top、bottom、left、right.
    10. menuThickness
      type:number
      required:false
      describe:When 'menuPosition' is equal to 'top' or 'bottom', it represents the height of the menu bar. When 'menuPosition' equals 'left' or 'right', it represents the width of the menu bar. The value is greater than 0. Hide menu bar when equal to 0.
    11. backgroundColor
      type:string
      required:false
      describe:The background color of the component.

    Event:

    1. onChange ({ blob, base64 }):Listen to the event that the picture is finally cropped and exported.
      blob:Export the Blob object of the picture, which can be used to upload the picture.
      base64:Export the Base64 string of the picture, which can be used to upload the picture.

    Method:

    1. this.$refs['pictureCut'].scale(zoom):Zoom picture
      zoom:The scale of the scaled size to the current size. The value is greater than 0. Between 0 and 1 is to reduce, and greater than 1 to enlarge.

    2、VuePictureCutMask Components

    VuePictureCutMask is the default slot component of VuePictureCut. It is related to the control mask crop box. Using it has the same effect as not using it.

    Using:

    /demo/demo3.html

    <template>
      <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-cut-mask
          :width="width"
          :height="height"
          :is-round="isRound"
          :resize="resize"
          :color="color"
          :border-color="borderColor"
        />
      </vue-picture-cut>
    </template>

    Attribute:

    1. width
      type:number
      default:1
      describe:Crop box width ratio.
    2. height
      type:number
      default:1
      describe:Crop box height ratio.
    3. isRound
      type:boolean
      default:false
      describe:rectangle - true,ellipse - false.
    4. resize
      type:boolean
      default:false
      describe:Can the crop box size be changed by dragging.
    5. color
      type:string
      required:false
      describe:Mask color.
    6. borderColor
      type:string
      required:false
      describe:Crop box color.

    3、VuePictureCutMenu Components

    Menu bar component, see demo for effect.

    Using:

    /demo/demo4.html
    /demo/demo5.html

    <template>
      <vue-picture-cut
        :src="src"
        :magnification="magnification"
        :init-angle="initAngle"
        :rotate-control="rotateControl"
        :msk-option="mskOption"
        @on-change="cutChange"
      >
        <vue-picture-cut-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"
        />
      </vue-picture-cut>
    </template>

    Attribute:

    1. cancel
      type:boolean
      default:false
      describe:Whether to display the 'cancel' button.
    2. maxPixel
      type:number
      required:false
      describe:Export the pixels on the longer side of the picture. When the value is not transferred, it is adaptive according to the actual image size.
    3. encoderOptions
      type:number
      required:false
      describe:Compression ratio of exported pictures. When the value is not transferred, it is calculated as 0.8, and the value range is 0 ~ 1.
    4. format
      type:string
      required:false
      describe:Format of exported picture. When no value is transferred, the export format is “image/jpeg”, and the value can be “image/png” and other browser supported formats.
    5. theme
      type:string
      default:'default'
      describe:Menu bar theme. Value:'default'、'dark'、'gray'.
    6. confirmName
      type:string
      default:'Ok'
      describe:Text for 'confirm' button.
    7. cancelName
      type:string
      default:'cancel'
      describe:Text for 'cancel' button.
    8. sizeAutoName
      type:string
      default:'auto'
      describe:Menu bar button text.
    9. sizeRawName
      type:string
      default:'raw'
      describe:Menu bar button text.
    10. menuRotateName
      type:string
      default:'Rotate'
      describe:Menu bar button text.
    11. root
      type:object
      required:If it is not used externally through slot mode, it must be passed.
      describe:The value is an instance of 'VuePictureCut'。

    Event:

    1. onChange ({ blob, base64 }):Listen to the event that the picture is finally cropped and exported.
      blob:Export the Blob object of the picture, which can be used to upload the picture.
      base64:Export the Base64 string of the picture, which can be used to upload the picture.

    2. onCancel ():Listen to 'cancel' button click event.

    4、Bezier Object

      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) Static attribute 'BEZIER',a key value pair, contains some default preset.
    key value describe
    linear [0.0, 0.0, 1.0, 1.0] Linear transition
    ease [0.25, 0.1, 0.25, 1.0] Smooth transition
    ease-in [0.42, 0, 1.0, 1.0] From slow to fast
    ease-out [0, 0, 0.58, 1.0] From fast to slow
    ease-in-out [0.42, 0, 0.58, 1.0] From slow to fast and then to slow
    (2) constructor

    setOptByString('ease') parameterless constructor that internally calls the a method.

    (3) Method
    name describe params return
    setOpt Set Bezier curve type. (arg: string , ParamsInterface = 'ease') Bezier itself.
    setOptByString Set Bezier curve type. BEZIER preset(arg = 'ease') Bezier itself.
    setOptByArr Set Bezier curve type. (x1: number, y1: number, x2: number, y2: number) Bezier itself.
    getPoint Returns the Y coordinate value corresponding to the X coordinate. (x: number) Between 0 and 1. Corresponding y coordinate.
    (4) Params ParamsInterface description.

    ParamsInterface is an array containing four number types.

    5、 createAnimation method

      import { createAnimation } from 'vue-picture-cut';
    
      const animation = createAnimation(option);

    'createAnimation' returns a 'Animation' object.

    (1) Params option
    key describe type value required default
    duration Animation duration in milliseconds. number —— false 1000
    timing Transition type of animation. string、number[] Bezier.BEZIER preset,or ParamsInterface false ease
    delay The delay time of the animation, in milliseconds. number —— false 0
    iteration The number of animation cycles, 'infinite' is infinite. number、string 'infinite' or positive integer false 0
    direction Does the animation reverse in the loop. string normal(default. Forward motion);reverse(Reverse operation);alternate(First forward, then reverse, and alternate);alternate-reverse(Reverse first, then forward, and alternate)。 false normal
    change Callback function, receive parameter x, X between 0 ~ 1, animation is processed here. Function —— false ——
    end Callback function, executed at the end of the animation. Function —— false ——
    (2) Animation object method
    name describe params return
    start Start animation. —— Animation itself.
    abort Abort animation. —— ——

    6、 Tool Object

      import { Tool } from 'vue-picture-cut';
    
      Tool.loadImg('http://xxx.xxx.xxx/xxx.jpg')
      .then(image => {
        // Image loaded successfully
        // image: Image Object
      }, image => {
        // Failed to load picture
      });
    Method

    ...Waiting for editing

    7、 createUtils method

    <template>
      <div>
    	<input type="file" accept="image/*" @change="inputChange"/>
        <vue-picture-cut ref="pictureCut" :src="src"/>
        <button @click="doCut">裁剪</button>
      </div>
    </template>
    
    <script>
      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 Object
                this.base64 = res.src;  // base64 string
            }
          }
        }
        // ...
      }
    </script>
    
    <style>
      @import "~vue-picture-cut/lib/vue-picture-cut.css";
    </style>
    Method
    1. cut(maxPixel?: number, encoderOptions?: number, format?: string): ClipResult | null
      describe:cut
      param maxPixel:Export the pixels on the longer side of the picture.
      param encoderOptions:Compression ratio of exported pictures.
      param format:Format of exported picture. When no value is transferred, the export format is “image/jpeg”, and the value can be “image/png” and other browser supported formats.
      return ClipResult | null:omit...

    2. cut(opt?: { maxPixel?: number, encoderOptions?: number, format?: string }): ClipResult | null
      describe:cut
      param opt.maxPixel:Export the pixels on the longer side of the picture.
      param opt.encoderOptions:Compression ratio of exported pictures.
      param opt.format:Format of exported picture. When no value is transferred, the export format is “image/jpeg”, and the value can be “image/png” and other browser supported formats.
      return ClipResult | null:omit...

    3. setMaskRound(isRound = true): void
      describe:Sets the shape of the crop box.
      param isRound:true (circular),false (rectangle).

    4. setMaskSize(w: number, h: number): void
      describe:Set clipping box size.
      param w:Crop box width ratio.
      param h:Crop box height ratio.

    5. setMaskSizeToOriginal (): void
      describe:Set clipping box size according to picture width height ratio.

    6. setMaskResize (resize = true): void
      describe:Can the crop box size be changed by dragging.
      param resize:omit...

    7. rotate (angle: number, animation = false): number | void
      describe:Pictures rotating.
      param angle:Counterclockwise angle.
      param animation:Do you want to show animation.
      return number | null:Anticlockwise angle of image after rotation.

    8. rotateTo (angle: number, animation = false): void
      describe:Rotate the picture at a specified angle.
      param angle:Counterclockwise angle.
      param animation:Do you want to show animation.

    9. setFlipV(animation?: boolean): boolean | void
      describe:Picture vertical flip
      param animation:Do you want to show animation.
      return boolean | null:Compared with the original image, whether it is flipped, true (flipped), false (original).

    10. setFlipH(animation?: boolean): boolean | void
      describe:Picture flip horizontally
      param animation:Do you want to show animation.
      return boolean | null:Compared with the original image, whether it is flipped, true (flipped), false (original).

    11. setFlip (sV: boolean, sH: boolean, animation?: boolean): void
      describe:Pictures flipping.
      param sV:Vertical,true (flipping),false (original)。
      param sH:Vorizontal,true (flipping),false (original)。
      param animation:Do you want to show animation.

    12. scale(zoom: number): void
      describe:Picture zoom.
      param zoom:The scale of the scaled size to the current size.

    13. reset(): void
      describe:Reset picture status.

    14. getOptions(): CutOptions | null
      describe:Gets the parameter of the current state inside the component.
      return CutOptions | null:omit...

    3、Custom extension

    For the time being, please refer to src/App.vue and src/lib/views/vue-picture-cut-menu.vue

    3.1、Custom crop

    ...Waiting for editing

    3.2、Customize the menu bar

    ...Waiting for editing

    三、Welcome

    VuePictureCut 💗 you!

    Install

    npm i vue-picture-cut

    DownloadsWeekly Downloads

    83

    Version

    2.0.17

    License

    MIT

    Unpacked Size

    3.61 MB

    Total Files

    56

    Last publish

    Collaborators

    • light-year