uni-image-editor 1.0.0

package/README.md

@@ -0,0 +1,98 @@
+# uni-image-editor
+
+UniApp Vue2 图片编辑插件，支持图片裁剪、涂鸦、添加文字等功能。
+
+## 功能特性
+
+- 图片裁剪
+- 图片涂鸦（支持多种形状）
+- 添加文字
+- 撤销/重做操作
+- 清除编辑内容
+
+## 安装
+
+```bash
+npm install uni-image-editor
+```
+
+## 使用方法
+
+### 在 UniApp 项目中引入
+
+```vue
+<template>
+  <view>
+    <image-editor
+      ref="imageEditor"
+      :imgUrl="imageUrl"
+      @success="handleSuccess"
+      @cancel="handleCancel"
+    />
+  </view>
+</template>
+
+<script>
+import imageEditor from 'uni-image-editor';
+
+export default {
+  components: {
+    imageEditor
+  },
+  data() {
+    return {
+      imageUrl: 'https://example.com/image.jpg'
+    };
+  },
+  methods: {
+    handleSuccess(data) {
+      console.log('保存图片:', data);
+    },
+    handleCancel() {
+      console.log('取消编辑');
+    }
+  }
+};
+</script>
+```
+
+## API
+
+### Props
+
+| 参数 | 类型 | 说明 | 默认值 |
+| --- | --- | --- | --- |
+| imgUrl | String | 图片地址 | - |
+| toolConfigs | Array | 工具配置数组 | DEFAULT_TOOLS_CONFIGS |
+| canvasId | String | 画布ID | "image-editor-canvas" |
+| convertImgType | String | 图片转换类型 | CONVERT_IMG_NET_TO_LOCAL_TYPE.canvas |
+| maxTransparencyRate | Number | 最大透明度比率 | 5 |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| success | 保存图片时触发 | 图片数据对象 { imgData: { url, tempFilePath, width, height } } |
+| cancel | 取消编辑时触发 | - |
+
+### Methods
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| getEditorInsatcne | 获取编辑器实例 | - | 编辑器实例 |
+| confirm | 确认保存 | - | Promise |
+| cancel | 取消编辑 | - | - |
+| clear | 清除所有编辑 | - | - |
+| repeal | 撤销操作 | - | - |
+| redo | 重做操作 | - | - |
+
+## 注意事项
+
+- 仅支持 UniApp Vue2 项目
+- 依赖 UniApp 原生 API 进行图片处理
+- 使用时需要传入有效的 imgUrl
+- 在 H5 环境下，网络图片会被转换为 base64 格式
+
+## 许可证
+
+MIT

package/components/edit-graffiti-config.vue

@@ -0,0 +1,151 @@
+<!--
+ * @Author: msc 862078729@qq.com
+ * @Date: 2024-04-28 15:20:12
+ * @LastEditors: msc 862078729@qq.com
+ * @LastEditTime: 2024-05-06 16:48:35
+ * @FilePath: \code\components\image-editor\components\edit-graffiti-config.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <view class="edit-graffiti-config">
+    <view class="shape-pick config-pick flex-align-center">
+      <text class="shape-pick-text">形状:</text>
+      <view class="shape-pick-list flex-align-center">
+        <view
+          v-for="(item, index) in configs.shapes"
+          class="shape-pick-item"
+          :key="index"
+          @tap="pickShape(item.name)"
+        >
+          <i
+            :class="`iconfont ${item.icon}`"
+            :style="{
+              color: shape === item.name ? '#2979ff' : '#000000',
+            }"
+          />
+        </view>
+      </view>
+    </view>
+    <view class="color-pick config-pick flex-align-center">
+      <text class="color-pick-text">颜色:</text>
+      <view class="color-pick-list flex-align-center">
+        <view
+          v-for="item in configs.colors"
+          :key="item"
+          class="color-pick-item"
+          :class="{ 'active-color': color === item }"
+          :style="{ backgroundColor: item }"
+          @tap="pickColor(item)"
+        ></view>
+      </view>
+    </view>
+
+    <view class="rough-pick config-pick flex-align-center">
+      <text class="rough-pick-text">粗细:</text>
+      <view class="rough-pick-list flex-align-center">
+        <view
+          v-for="(item, index) in configs.roughs"
+          :key="index"
+          class="rough-pick-item"
+          @tap="pickRough(item)"
+          :style="{
+            backgroundColor: rough === item ? '#2979ff' : 'gray',
+            height: item + 'px',
+          }"
+        ></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "EditGraffitiConfig",
+  props: {
+    configs: {
+      type: Object,
+      default: () => ({}),
+    },
+    color: {
+      type: String,
+      default: () => "",
+    },
+    shape: {
+      type: String,
+      default: () => "",
+    },
+    rough: {
+      type: [Number, String],
+      default: () => "",
+    },
+  },
+  data() {
+    return {
+      // 涂鸦配置
+      graffitiConfig: {
+        color: "#000000", // 画笔颜色
+        size: 5, // 画笔大小
+      },
+    };
+  },
+  methods: {
+    pickShape(shape) {
+      this.$emit("update:shape", shape);
+    },
+    pickColor(color) {
+      this.$emit("update:color", color);
+    },
+    pickRough(rough) {
+      this.$emit("update:rough", rough);
+    },
+  },
+};
+</script>
+
+<style scope lang="scss">
+.edit-graffiti-config {
+  .flex-align-center {
+    display: flex;
+    align-items: center;
+  }
+  .config-pick {
+    margin: 20rpx 0;
+  }
+
+  .color-pick {
+    .color-pick-list {
+    }
+    .color-pick-item {
+      width: 30rpx;
+      height: 30rpx;
+      border-radius: 50%;
+      box-sizing: content-box;
+      margin-left: 39rpx;
+    }
+  }
+  .shape-pick {
+    color: #000000;
+    .shape-pick-list {
+    }
+    .shape-pick-item {
+      font-size: 36rpx;
+      margin-left: 34rpx;
+    }
+  }
+
+  .active-color {
+    transform: scale(1.5);
+  }
+
+  .rough-pick {
+    .rough-pick-list {
+    }
+    .rough-pick-item {
+      width: 44rpx;
+      background-color: gray;
+      margin-left: 28rpx;
+    }
+  }
+}
+</style>
+·

package/components/edit-text-config.vue

@@ -0,0 +1,112 @@
+<!--
+ * @Author: msc 862078729@qq.com
+ * @Date: 2024-04-28 15:20:12
+ * @LastEditors: msc 862078729@qq.com
+ * @LastEditTime: 2024-05-06 16:49:20
+ * @FilePath: \code\components\image-editor\components\text-config.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <view class="text-config">
+    <view class="color-pick config-pick flex-align-center">
+      <text class="color-pick-text">颜色:</text>
+      <view class="color-pick-list flex-align-center">
+        <view
+          v-for="item in configs.colors"
+          :key="item"
+          class="color-pick-item"
+          :class="{ 'active-color': color === item }"
+          :style="{ backgroundColor: item }"
+          @tap="pickColor(item)"
+        ></view>
+      </view>
+    </view>
+
+    <view class="size-pick config-pick flex-align-center">
+      <text class="size-pick-text">字号:</text>
+      <view class="size-pick-list flex-align-center">
+        <view
+          v-for="(item, index) in configs.sizes"
+          :key="index"
+          class="size-pick-item"
+          @tap="pickSize(item)"
+          :class="{ 'active-size': item === size }"
+          >{{ item }}</view
+        >
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "EditTextConfig",
+  props: {
+    configs: {
+      type: Object,
+      default: () => ({}),
+    },
+    color: {
+      type: String,
+      default: () => "",
+    },
+    size: {
+      type: [Number, String],
+      default: () => "",
+    },
+  },
+  data() {
+    return {
+      // 涂鸦配置
+    };
+  },
+  methods: {
+    pickSize(size) {
+      this.$emit("update:size", size);
+    },
+    pickColor(color) {
+      this.$emit("update:color", color);
+    },
+  },
+};
+</script>
+
+<style scope lang="scss">
+.text-config {
+  .flex-align-center {
+    display: flex;
+    align-items: center;
+  }
+  .config-pick {
+    margin: 20rpx 0;
+  }
+  .color-pick {
+    .color-pick-list {
+    }
+    .color-pick-item {
+      width: 30rpx;
+      height: 30rpx;
+      border-radius: 50%;
+      box-sizing: content-box;
+      margin-left: 39rpx;
+    }
+  }
+
+  .active-color {
+    transform: scale(1.5);
+  }
+
+  .active-size {
+    font-weight: 700;
+    color: #2979ff;
+  }
+  .size-pick {
+    .size-pick-list {
+      font-size: 24rpx;
+    }
+    .size-pick-item {
+      margin-left: 42rpx;
+    }
+  }
+}
+</style>