npm 包 @atlaskit/media-editor 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前端开发人员在日常工作中，经常需要使用各种现成的 npm 包来加快开发效率。@atlaskit/media-editor 是一个非常实用的 npm 包，它为我们提供了相应的媒体编辑相关功能。

安装

首先，我们需要安装 @atlaskit/media-editor：

npm install @atlaskit/media-editor --save

引入并使用

在需要使用的页面中引入 @atlaskit/media-editor：

import { MediaEditor } from '@atlaskit/media-editor';

然后，在需要使用的地方，创建一个新的 MediaEditor 实例：

const mediaEditor = new MediaEditor({
  config: {
    ... // 配置项
  },
  container: document.querySelector('#media-editor-container'),
});

其中，config 是一个配置项对象，我们可以在其中设置一些参数，比如上传的文件类型、尺寸限制、是否显示某些控制按钮等等。container 是一个 DOM 元素，用于容纳媒体编辑器。

功能列表

@atlaskit/media-editor 可以提供以下功能：

媒体文件上传
照片编辑
图片裁剪
颜色调整
添加标签和贴纸
绘制线、圆、矩形等形状
插入文字
旋转和翻转
线性渐变（Pro 版本）

上传媒体文件

使用 uploadMedia 方法可以上传媒体文件：

mediaEditor.uploadMedia(file);

其中，file 是指上传的媒体文件。

照片编辑

使用 activateEdit 方法激活编辑模式：

mediaEditor.activateEdit();

使用 getEditState 方法获取编辑状态：

mediaEditor.getEditState();

使用 deactivateEdit 方法退出编辑模式：

mediaEditor.deactivateEdit();

图片裁剪

使用 activateCrop 方法激活裁剪模式：

mediaEditor.activateCrop();

使用 getCrop 方法获取裁剪状态：

mediaEditor.getCrop();

使用 deactivateCrop 方法退出裁剪模式：

mediaEditor.deactivateCrop();

颜色调整

使用 activateAdjust 方法激活颜色调整模式：

mediaEditor.activateAdjust();

使用 getAdjust 方法获取颜色调整状态：

mediaEditor.getAdjust();

使用 deactivateAdjust 方法退出颜色调整模式：

mediaEditor.deactivateAdjust();

添加标签和贴纸

使用 addLabel 方法添加标签：

mediaEditor.addLabel({
  ... // 标签属性
});

其中，标签属性包括：x、y、text、font、fontSize、color 等等。

使用 addSticker 方法添加贴纸：

mediaEditor.addSticker({
  ... // 贴纸属性
});

其中，贴纸属性包括：x、y、width、height、url 等等。

绘制形状

使用 addShape 方法绘制形状：

mediaEditor.addShape({
  ... // 形状属性
});

其中，形状属性包括：type、x、y、width、height、strokeColor、strokeWidth、fillColor 等等。

支持的形状类型有：line（线）、circle（圆）、rectangle（矩形）、triangle（三角形）、ellipse（椭圆）、polygon（多边形）。

插入文字

使用 addText 方法插入文字：

mediaEditor.addText({
  ... // 文字属性
});

其中，文字属性包括：x、y、text、font、fontSize、color 等等。

旋转和翻转

使用 rotate 方法旋转画布：

mediaEditor.rotate(deg);

其中，deg 是指旋转的角度。

使用 flip 方法翻转画布：

mediaEditor.flip(vertical, horizontal);

其中，vertical 和 horizontal 分别是指垂直和水平方向的翻转状态，可取值为 true 或 false。

线性渐变

线性渐变是 Pro 版本的功能，我们需要先购买并激活 Pro 版本。

使用 enablePro 方法激活 Pro 版本：

mediaEditor.enablePro();

然后，使用 addGradient 方法添加线性渐变：

mediaEditor.addGradient({
  ... // 渐变属性
});

其中，渐变属性包括：x1、y1、x2、y2、colors 等等。

总结

通过该教程，我们了解了 @atlaskit/media-editor 的使用方法，以及其中包括的各种功能。使用 @atlaskit/media-editor 可以加快开发速度，提高项目质量。如果需要进一步了解和使用该 npm 包，建议查阅官方文档和示例代码，以及参加社区活动。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5f7351d0a9b7065299ccbc2e

npm 包 @atlaskit/media-editor 使用教程

安装