Vue-img-cutter is a simple and easy to use vue image clipping plug-in, supporting rotation, scaling, translation, fixed scale, fixed size, remote image clipping, with very little code to achieve the clipping function, you can also adjust parameters to suit your own business needs

Github:github.com/acccccccb/v…

Features:

  • Compatible with IE9+, MSEdge, Chrome, Firefox
  • Two presentation forms, inline or popover
  • Images can be rotated and zoomed
  • Cut in any proportion and size
  • Fixed proportion, size cutting
  • Support remote picture clipping and cross – domain Settings

Use:

Install the vue – img – cutter

npm install vue-img-cutter –save-dev

For use in projects

  • Add vue-img-Cutter to the page you want to use and register it as a component

    <script>
/ / introduction of the vue - img - cutter
import ImgCutter from 'vue-img-cutter'

export default {
    name: 'imgCutter'.data() {
       return{}},// Register vue-img-cutter as a component
    components:{
        ImgCutter
    }
}
</script>
Copy the code

  • Use the component in the page and bind the cutDown event to receive the selected image information

    <template>
   <div>// Use the component and bind the cutDown event<ImgCutter @cutDown="cutDown"></ImgCutter>
   </div>
</template>

<script>
import ImgCutter from 'vue-img-cutter'

export default {
    name: 'imgCutter'.data() {
       return{}},components:{
        ImgCutter
    },
    methods: {
       // Receive the selected image information through the cutDown event
       cutDown(event) {
           console.log(event)
       }
    }
}
</script>
Copy the code

    Component parameter options:

    attribute role type If required The default value
    isModal Whether popover mode is enabled Boolean no true
    showChooseBtn Whether to display the select picture button Boolean no true
    lockScroll Whether to lock page scrolling when pop-ups appear Boolean no true
    label Select the Picture button to display text String no Choose picture
    boxWidth Cutting tool width Number no 800
    boxHeight Cutting tool height Number no 400
    cutWidth Default clipping width Number no 200
    cutHeight Default clipping height Number no 200
    tool Whether to display toolbar Boolean no true
    toolBgc Toolbar background color String (example: “# FFF”) no ‘#fff’
    sizeChange Whether you can adjust the clipping box size Boolean no true
    moveAble Whether the clipping area position can be adjusted Boolean no true
    originalGraph Whether to crop the original image Boolean no false
    crossOrigin You need to configure the cross-domain function on the server Boolean no false
    crossOriginHeader Set cross-domain information (effective when crossOrigin is true) String no “
    rate Cropped picture width to height ratio String (example: “and”) no –
    WatermarkText Watermark text String no “
    WatermarkTextFont Watermark text font String no ’12px Sans-serif’
    WatermarkTextColor Watermark text color String no ‘#fff’
    WatermarkTextX Horizontal position of watermark text Number no 0.95
    WatermarkTextY Watermark text vertical position Number no 0.95
    smallToUpload If the clipping size is fixed and the image size is smaller than the clipping size, the file is returned without clipping Boolean no false
    saveCutPosition Whether to save the last clipping position and size Boolean no false
    scaleAble Whether the scroll wheel is allowed to zoom in and out of the picture Boolean no true

    Component custom slot options:

    Slot, role
    The open or openImgCutter Page to select the image button
    choose Select the picture button in the popover tool
    cancel Cancel button in popover tool
    confirm Ok button in popover tool
    ratio Popover toolbar: Width to height ratio button
    scaleReset Popup toolbar: Resets the zoom button
    turnLeft Popover toolbar: Rotate button to the left
    turnRight Popover toolbar: Rotate the button to the right
    reset Popover toolbar: Resets the rotation button
    flipHorizontal Popover toolbar: Flip horizontal button
    flipVertically Popover toolbar: Vertical flip button

    Component hook functions:

    The function name role type If required The return value
    cutDown Run the command after the screenshot is taken Function is Object
    error Execute when an error occurs Function no Error object
    onChooseImg Select the image and execute Function no Object
    onPrintImg Execute when drawing an image Function no Object
    onClearAll Empty canvas Function no null

    The cutDown event receives the information value of the selected image (return value) :

    attribute describe
    fileName The file name
    file File object of type file (some versions of IE may not return)
    blob File object of type BLOB (some versions of IE may not return)
    dataURL The URL of the file

Select the image and crop it to the desired size:Is determined,cutDownImage information obtained by the event: