更新记录

1.0.2（2025-06-06） 下载此版本

添加fontSize属性 增加拖拽实现文本缩放 修复文本换行矩形框问题

1.0.1（2025-06-05） 下载此版本

修改说明文档

1.0.0（2025-06-05） 下载此版本

• 图片编辑器

平台兼容性

uni-app

uni-app x

其他

ImgEditor 图片编辑器

uniapp 图片编辑器

安装

在插件市场导入uni_modules版本的即可，地址：https://ext.dcloud.net.cn/plugin?id=23745

基本用法

<yu-img-editor :data="dataList" :fontList="[]" :bgColor="['#209cff', '#68e0cf']"></yu-img-editor>

• 初始化数据格式

  <script>
  export default {
      data() {
          return {
              bg:'',
              dataList: [
                  {
                      type: 'text', //元素类型，text 文本 image 图片
                      text: 'Hello world', //文本内容
                      x: 60,      //元素x坐标
                      y: 60,      //元素x坐标
                      width: 90, //元素宽高
                      height: 30, //元素宽高
                      rotation: 45, //元素旋转角度
                      fontSize: 24,   //文本字体大小
                      lineHeight:1.5, //文本字体行高
                      fontStyle:'italic', //文本字体样式 italic/normal
                      fontWeight:'bold', //文本字体大小 bold/bolder/normal
                      fontFamily: 'Arial', //文本字体
                      color: '#fffb6d' //文本颜色
                  },
                  {
                      type: 'image',
                      path: '', //图片路径
                      x: 160,
                      y: 180,
                      width: 90, //元素宽高
                      height: 90, //元素宽高
                      rotation: 0
                  }
              ]
          }
      }
  }
  </script>

功能介绍

1. 该组件的功能主要是利用canvas画布来实现文本、图片的编辑，最后保存为图片。
2. 设置画布背景。
   • 可以修改背景颜色，包括纯色、渐变色，组件内部预设。
   • 可以修改背景图片，可通过上传设置，也可以通过 bgImgList 属性进行预设。
3. 设置文本
   • 可以设置文本内容、文本样式、文本旋转角度、文本字体大小
   • 可以选择不同字体，组件内部预设了常用字体(宋体、仿宋、黑体、楷体、微软雅黑)，可通过fontList自定义。
   • 1.0.2版本,考虑到字体包太大，组件内部预设太占空间，改成根据自己需要在项目中定义，通过fontList进行设置
   • 可以设置文本颜色，组件内部预设。
4. 调整元素位置
   • 图层(置顶、置底，上调一层，下调一层)
   • 位置(左对齐、右对齐、顶对齐、底对齐、水平对齐、垂直对齐)，都是相对与画布。
5. 画布元素
   • 选中 点击默认选中最上层
   • 移动 拖拽移动选中元素
   • 删除 点击删除图标可实现删除元素
   • 编辑 点击编辑图标可再次编辑元素属性
   • 旋转缩放 按住拖拽旋转缩放图标可以实现旋转缩放功能

Props

Events

API

感谢

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。