# image-editor-unique

**Repository Path**: windheartyolo/image-editor-unique

## Basic Information

- **Project Name**: image-editor-unique
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-07-29
- **Last Updated**: 2024-08-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# image-editor-unique
## 图片裁剪插件

使用uniapp开发工具HBuilderX工具。组件代码在components目录中。直接复制使用。


### 平台支持：
1. 支持H5平台
3. 其他平台暂未测试兼容性未知

### 支持功能：
1. 包含裁剪功能，滤镜和调整正在开发
2. 自定义缩放(以画布中心为基准缩放)
3. 自定义旋转角度，步长(以画布中心为圆心旋转)
4. 自定义裁剪框尺寸，样式
5. 提供获取图片BASE64编码的方法。



### 属性说明

| 属性名 | 类型 | 默认值 | 说明 |
|:---|:---|:---|:---|
| canvasWidth               | String        |                               | 组件画布的宽度 |
| canvasHeight              | String        |                               | 组件画布的宽高度 |
| canvasBackgroundImage     | String        |                               | 画布背景图片 |
| canvasBackgroundColor     | String        |                               | 画布背景颜色 |
| editorImage               | String        |                               | 画布中编辑的图片路径 |
| GridLineColor             | String        | #78B6F5                       | 裁剪框颜色 |
| GridLineWidth             | Number        | 5                             | 裁剪框外边线宽度 |
| dashLineWidth             | Number        | 5                             | 裁剪框内虚线宽度 |
| dashLineArray             | Array         | [10,20] //[长度, 间隔+长度]    | 裁剪框内虚线宽度 |
| maxImageScaleRange        | Object        | {min:1,max:100,divisor:10}    | 图片最大缩放比例范围 |
| isShowToolBar             | Boolean       | true                          | 控制是否显示工具栏 |
| isShowImageName           | Boolean       | true                          | 控制是否显示图片名称 |
| topToolBarScaleStep       | Number        | 0.1                           | 用于控制顶部工具栏图标，放大、缩小的步长 |



### 事件说明

| 事件名 | 说明 | 类型 |
|:---|:---|:---|
| imageEditorSaveImage           | 保存图片事件      | Function     |



### 外部方法说明

| 方法名 | 说明 | 类型 |
|:---|:---|:---|
| initCanvas                        | 初始化画布              | Function     |
| changeImageRotate                 | 改变图片旋转角度         | Function     |
| changeImageScale                  | 改变图片缩放比例         | Function     |
| setImagePath                      | 设置编辑的图片路径       | Function     |
| getCutImage                       | 获取编辑后的图片         | Function     |
| saveBase64AsImage                 | 将编辑后的图片保存到本地  | Function     |
| setImageEditorImageName           | 设置编辑图片的名称       | Function     |



### 基本用法
```
<template>
	<view style="display: flex; justify-content: center;">
		<image_editor_unique ref="imageEditorRef"  
				canvasWidth="600" canvasHeight="400" style="margin-top: 10px;"
				@imageEditorSaveImage="handleSaveImage"></image_editor_unique>
		<view style="height: 100px;"></view>
	</view>	
</template>

<script setup>
	
	import {onLoad , onReady} from "@dcloudio/uni-app"
	import { ref } from "vue";
	import image_editor_unique from "@/components/image-editor-unique/image-editor-unique.vue"
	
	//用于操作image_editor
	const imageEditorRef = ref(null)
	
	//处理保存图片方法
	const handleSaveImage = (e)=>{
		// console.log(e)
		imageEditorRef.value.saveBase64AsImage(null, "111.png")
	}
	
	//在使用组件的页面onReady生命周期中调用组件的外部方法initCanvas
	onReady(()=>{
		//设置图片路径
		imageEditorRef.value.setImagePath("/common/images/banner1.jpg")
		//设置图片名称
		imageEditorRef.value.setImageEditorImageName("editorImage.jpg")
		//初始化画布
		imageEditorRef.value.initCanvas()
	})
		
</script>

<style lang="scss" scoped>
	
</style>
```



### 演示

![](/readme_assets/demo3.gif)

### 使用说明

1.建议在页面onReady生命周期中设置图片后初始化一下画布，可以保证页面布局成功渲染从而获取到正确的画布坐标。(个人理解又不到位的地方还望指正)