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);
});