https://github.com/jacobhsu/vue-croppa-upload

https://github.com/jacobhsu/vue-croppa-upload

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/jacobhsu/vue-croppa-upload
• Owner: JacobHsu
• Created: 2019-07-26T10:10:14.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T05:32:12.000Z (almost 2 years ago)
• Last Synced: 2024-04-10T16:05:30.552Z (9 months ago)
• Language: Vue
• Homepage: https://jacobhsu.github.io/vue-croppa-upload/
• Size: 2.22 MB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 24
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-croppa-upload

[Vue Croppa](https://zhanziyang.github.io/vue-croppa/#/) - A simple straightforward customizable image cropper

`npm install --save vue-croppa`  

## install

`$ vue create vue-croppa-upload`   

merge   

`$ cd vue-croppa-upload`    

`$ npm run serve`  

[![NPM](https://nodei.co/npm/gh-pages.png?downloads=true&stars=true)](https://nodei.co/npm/gh-pages/)  

> Publish files to a gh-pages branch on GitHub (or any other branch anywhere else).

`$ npm run deploy`

## study

[cropper.vue](https://github.com/zhanziyang/vue-croppa/blob/master/src/cropper.vue)  

##　Quick Start

[quick-start](https://zhanziyang.github.io/vue-croppa/#/quick-start)  

index.html

```html

```

main.js

```js

// If your build tool supports css module

import 'vue-croppa/dist/vue-croppa.css';

```

## Docs

[Appearance](https://zhanziyang.github.io/vue-croppa/#/customization)  

[Image Placeholder](https://zhanziyang.github.io/vue-croppa/#/demos) 

[Customization](https://zhanziyang.github.io/vue-croppa/#/customization)

Use the  `initial` slot. It's more flexible than the first method.  

NOTE: If the image resouce is not host on your site (under diffrent domain), you need to set  `crossOrigin="anonymous"`  

codepen [Vue Croppa Initial Image 1](https://codepen.io/zhanziyang/pen/mMOKXo)     

codepen [Vue Croppa remove file](https://codepen.io/zhanziyang/pen/RZKEbr) 

## Notes

前端canvas把url轉為base64，存在跨域問題

[canvas 圖片跨域（二）](https://blog.csdn.net/qq_37837134/article/details/80215617)

## Project setup

```

npm install

```

### Compiles and hot-reloads for development

```

npm run serve

```

### Compiles and minifies for production

```

npm run build

```

### Run your tests

```

npm run test

```

### Lints and fixes files

```

npm run lint

```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).