Uppy 图像编辑器

图像编辑器。旨在与 Dashboard UI 一同使用。

何时使用？

当你想允许用户裁剪、旋转、缩放和翻转添加到 Uppy 中的图片时。

安装

npm


npm install @uppy/core @uppy/dashboard @uppy/image-editor

yarn


yarn add @uppy/core @uppy/dashboard @uppy/image-editor

CDN

谨慎

该捆绑包包含了大部分的 Uppy 插件，因此这种方法不建议在生产环境中使用，因为当您可能只使用少数几个插件时，您的用户却需要下载所有插件。
但在加速开发环境方面，这可能会很有帮助，所以不妨在开始时使用它来提速。


<!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v3.27.3/uppy.min.css" rel="stylesheet">

<!-- 2. Initialize -->
<div id="uppy"></div>

<script type="module">
    import { Uppy, Dashboard, ImageEditor } from "https://releases.transloadit.com/uppy/v3.27.3/uppy.min.mjs"
    const uppy = new Uppy()
    uppy.use(Dashboard, { target: '#uppy', inline: true })
    uppy.use(ImageEditor)
</script>

使用


import Uppy from "@uppy/core";
import Dashboard from "@uppy/dashboard";
import ImageEditor from "@uppy/image-editor";

import "@uppy/core/dist/style.min.css";
import "@uppy/dashboard/dist/style.min.css";
import "@uppy/image-editor/dist/style.min.css";

new Uppy()
  .use(Dashboard, { inline: true, target: "#dashboard" })
  .use(ImageEditor);

API

选项

如果你想在添加图片后自动打开图像编辑器，请参阅 autoOpen Dashboard 选项。

`id`

此插件的唯一标识符（ string，默认值：'ImageEditor' ）。

`quality`

编辑/裁剪后生成的 Blob 的质量（ number，默认值：0.8 ）。

`cropperOptions`

图像编辑器使用出色的 Cropper.js。cropperOptions 将直接传递给 Cropper，因此可以期望与他们的 README 中相同的值，增加了 croppedCanvasOptions，它将被传递给 getCroppedCanvas 。

`actions`

显示操作按钮（ Object 或 boolean ）。

如果你想隐藏所有操作，向其传递 false。默认情况下，所有操作都是可见的。或者单独启用/禁用它们：


{
  revert: true,
  rotate: true,
  granularRotate: true,
  flip: true,
  zoomIn: true,
  zoomOut: true,
  cropSquare: true,
  cropWidescreen: true,
  cropWidescreenVertical: true,
}

`locale:


export default {
  strings: {
    revert: "恢复",
    rotate: "旋转",
    zoomIn: "放大",
    zoomOut: "缩小",
    flipHorizontal: "水平翻转",
    aspectRatioSquare: "裁剪为正方形",
    aspectRatioLandscape: "裁剪为横屏（16:9）",
    aspectRatioPortrait: "裁剪为竖屏（9:16）",
  },
};

事件

你可以使用 on 和 once 来监听这些事件。

`file-editor:start`

当调用 selectFile(file) 时发出。


uppy.on("file-editor:start", (file) => {
  console.log(file);
});

`file-editor:complete`

file-editor:complete

在调用 save(blob) 后触发。


uppy.on("file-editor:complete", (updatedFile) => {
  // 更新后的文件信息将被打印到控制台
  console.log(updatedFile);
});

`file-editor:cancel`

当调用 uninstall 或放弃当前图片编辑更改时触发。


uppy.on("file-editor:cancel", (file) => {
  // 文件信息将被打印到控制台
  console.log(file);
});

Uppy 图像编辑器

何时使用？

安装

使用

API

选项

id

quality

cropperOptions

actions

`locale:

事件

file-editor:start

file-editor:complete

file-editor:cancel

在本文档中