https://github.com/candyframework/canvas-image-cropper

https://github.com/candyframework/canvas-image-cropper

Last synced: 22 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/candyframework/canvas-image-cropper
• Owner: candyframework
• Created: 2022-06-01T02:03:27.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2022-06-01T02:04:17.000Z (about 4 years ago)
• Last Synced: 2025-01-16T07:54:39.842Z (over 1 year ago)
• Language: JavaScript
• Size: 163 KB
• Stars: 0
• Watchers: 6
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# canvas-image-cropper

JavaScript image cropper based on canvas

![preview](./demo/preview.png)

# 安装

```

npm install canvas-image-cropper

```

# 使用

```



var canvasImageCropper = new CanvasImageCropper({

    canvasWidth: 500,

    canvasHeight: 500,

    maskStyle: 'rgba(0, 0, 0, .6)',

    clipWidth: 200,

    clipHeight: 200

});

canvasImageCropper.render(document.getElementById('container'), './foo.jpg');

```

# 参数说明

```

canvasWidth  -- canvas 的大小 图片绘制宽度不会超过这个值

canvasHeight  -- canvas 的大小 图片绘制高度不会超过这个值

maskStyle  -- 遮罩样式

clipWidth  -- 裁剪像素大小

clipHeight  -- 裁剪像素大小

```

# API

1. 获取裁剪坐标

```

canvasImageCropper.getClipPosition()

{ x: 0, y: 0, width: 200, height: 200 }

```

2. 获取裁剪区 base64 数据

```

canvasImageCropper.getPreview()

```