# lnlr-cropper

> 利用cropper制作图片截图插件

Latest version **0.1.2** (published 2018-01-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install lnlr-cropper
pnpm add lnlr-cropper
yarn add lnlr-cropper
bun add lnlr-cropper
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2018-01-31 |
| First published | 2018-01-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 12 |
| Known vulnerabilities | 0 (+22 in 4 direct dependencies) |
| Install scripts | no |
| Author | 雷洪飞 |
| Maintainers | lnlr |
| Keywords | angular, ng2, ng4, ng5, 截图, cropper, cropperjs |

## Links

- npm: https://www.npmjs.com/package/lnlr-cropper
- Repository: https://github.com/leihfei/ngx-cropper
- Homepage: https://github.com/leihfei/ngx-cropper#readme
- Issues: https://github.com/leihfei/ngx-cropper/issues
- npm.io page: https://npm.io/package/lnlr-cropper

## Dependencies (12)

- [rxjs](https://npm.io/package/rxjs.md) ^5.5.2
- [core-js](https://npm.io/package/core-js.md) ^2.4.1
- [zone.js](https://npm.io/package/zone.js.md) ^0.8.14
- [@angular/core](https://npm.io/package/@angular/core.md) ^5.0.0
- [@angular/http](https://npm.io/package/@angular/http.md) ^5.0.0
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^5.0.0
- [@angular/common](https://npm.io/package/@angular/common.md) ^5.0.0
- [@angular/router](https://npm.io/package/@angular/router.md) ^5.0.0
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^5.0.0
- [@angular/animations](https://npm.io/package/@angular/animations.md) ^5.0.0
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^5.0.0
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ^5.0.0

## Recent versions

- 0.1.2 (latest) — 2018-01-31
- 0.1.1 — 2018-01-31
- 0.0.9 — 2018-01-31
- 0.0.8 — 2018-01-31
- 0.0.7 — 2018-01-16

## README

# Ng4ImageCropper

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.6.3.

# 描述
利用cropper 制作图片截图插件

# 样式
![example](https://github.com/leihfei/ngx-cropper/raw/master/cropper-example.png)

# 使用
 npm install --save lnlr-cropper@latest

# 前提
  1. 安装jQuery 并能使用$
  2. 安装bootstrap
  3. 安装font-awesome 图标库
  4. 安装cropper 
  
  ```angular2html
  npm install --save-dev jquery
  npm install --save-dev bootstrap
  npm install --save-dev font-awesome
  npm install --save-dev croper
  
  引入js,css文件：
  "styles": [
          "styles.css",
          "../node_modules/font-awesome/scss/font-awesome.scss",
          "../node_modules/bootstrap/dist/css/bootstrap.min.css",
          "../node_modules/cropper/dist/cropper.css"
        ],
        "scripts": [
          "../node_modules/jquery/dist/jquery.min.js",
          "../node_modules/cropper/dist/cropper.min.js",
          "../node_modules/bootstrap/dist/js/bootstrap.min.js"
        ],
```

在appModule中引入
```angular2html
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {CropperModule} from 'lnlr-cropper/index';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CropperModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
```

在页面上使用
```angular2html

<app-lnlr-cropper [aspectRatio]="NaN" [srcImage]=""></app-lnlr-cropper>
```

在使用过过程中提供了点击勾勾之后会返回一个true,用于在使用时关闭对话框之类，并且数据会以base64的形式绑定到给定的数据中。


# 属性简介
  - cropBoxResizable  裁剪框大小调整
  - viewMode 裁剪视图模式
  - aspectRatio  图片裁剪比例  默认2/3
  - responsive  根据页面调整大小
  。。。。。。
  
  
###### 无api

---
_Source: https://npm.io/package/lnlr-cropper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._