Package Exports

v-custom-crop
v-custom-crop/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (v-custom-crop) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Custom-Picture-Crop

A Picture(base64) custom shape clipping vue component.

Github Page Demo

Demo

Click to draw the border line.
Double click or click the complete button to finish.
Click the save button to get the picture.

PreviewPic

Install

npm i v-custom-crop

Usage

import vCustomCrop from "v-custom-crop";
Vue.use(vCustomCrop);

<custom-crop
        ref="crop"
        url: String  //Base64 Data
        proportion：Number  
        @out-picture：Function
        @close-custom： Function
        :newUrl.sync: String  //Base64 Data 
        :line-color: String
></custom-crop>

this.$refs['crop'].reset()
this.$refs['crop'].outPic()

Line Color

line-color = "orange";
line-color = "#FFA500";
line-color = "rgb(255,165,0)";
line-color = "rgba(255,165,0,1)";

Set position and size

<div class="canvas-container">
    <custom-crop></custom-crop>
</div>
<style>
    .canvas-container {
        width: '100px',
        height: '100px',
    }
</style>

Todo

Image custom crop(0.2.0)
- Custom border line style
- Custom canvas position
- Custom background color
Regular pattern clipping(0.3.0)
- Rectangular box clipping
- Clipping box for other shapes