引言

Toast UI Image Editor 入门指南

项目介绍

项目快速启动

环境配置

要使用Toast UI Image Editor，首先确保你的开发环境已配置了Node.js和Vue CLI。

安装依赖

通过npm或yarn将该库添加到你的项目：

npm install @toast-ui/vue-image-editor

或

yarn add @toast-ui/vue-image-editor

引入并使用

在你的Vue组件中引入并注册ImageEditor组件：

<template>
  <div id="app">
    <TuiImageEditor ref="imageEditor" :options="editorOptions"></TuiImageEditor>
  </div>
</template>

Vue-fabric-editor：开源免费的图片编辑器

项目介绍

  • 二次开发简单、扩展便捷
  • 针对海报、图片编辑场景，基础功能完善
  • 简洁易用，交互方式直观
  • 扩展便捷，业务层使用Vue开发

技术选型

  • 底层使用Fabric.js，业界知名的Canvas工具库
  • 使用Vue3框架，提供更友好的入门曲线
  • 使用View UI Plus组件库，构建精致的用户界面

应用场景

  • 海报设计、封面设计、T恤设计
  • 奖状/工卡设计、电子价签设计、印章设计
  • 手机壁纸、PPT设计
  • 工业软件场景，如机房拓扑拓展、设备巡检图等

Vue照片时间设置

设置照片时间为2秒

操作步骤

  1. 打开VUE，点击底部拍摄图标。
  2. 点击导入，导入照片后在视频编辑页面点击要设置2秒的照片。
  3. 点击截取，拖动黄色选框，选择长度为2秒。
  4. 点击右上角保存即可。

从1秒变2秒

操作步骤

  1. 打开VUE，点击底部拍摄图标。
  2. 点击导入，导入照片后在视频编辑页面点击要设置2秒的照片。
  3. 点击截取，拖动黄色选框，选择长度为2秒。
  4. 点击右上角保存即可。

总结