npm包florest使用教程

背景

在进行前端开发的时候，很多时候都需要用到图片；而随着互联网数据大规模的发展，图片处理也变得越来越复杂。florest是一款npm包能够与在线图片处理 API 集成，实现图像处理的目的。

安装

安装florest，打开终端，输入以下命令：

--- ------- -------

快速上手

智能裁剪

------ - --------- - ---- ----------

----- -------- ------ -
  ----- ------- - ----- ----------------
    ------- ---- -----
    ---------- ---- --------
    ---- --------------------------------
    ------ ----
    ------- ----
    ------ ----
  ---

  ---------------------
-

-------

智能变黑白

------ - --------- - ---- ----------

----- -------- ------ -
  ----- ------- - ----- ----------------
    ------- ---- -----
    ---------- ---- --------
    ---- -------------------------------
  ---

  ---------------------
-

-------

图片压缩

------ - ------------- - ---- ----------

----- -------- ---------- -
  ----- ------- - ----- ------------------------
    ------- ---- -----
    ---------- ---- --------
    ---- --------------------------------
    -------- --
  ---

  ---------------------
-

----------

API

SmartCrop.crop()

智能裁剪

----------------
  ------- ---
  ---------- ---
  ---- ---
  ------ ---
  ------- ---
  ------ --
---

参数

  • apiKey string：API Key
  • apiSecret string：API Secret
  • url string：图片 URL
  • width number：目标宽度
  • height number：目标高度
  • scale boolean：是否根据目标宽度和高度等比例缩放

返回值

-
  ----- ----
  ----- -
    ---- ---
    ------ ---
    ------- ---
    ---- ---
    ----- ---
    ------ ---
    ------- ---
    ------ ---
    ----- ---
    -------- ---
    ------- ---
    ---------- ---
    ------- --
  --
  -------- --------------
-

SmartGray.gray()

智能变黑白

----------------
  ------- ---
  ---------- ---
  ---- --
---

参数

  • apiKey string：API Key
  • apiSecret string：API Secret
  • url string：图片 URL

返回值

-
  ----- ----
  ----- -
    ---- ---
    ------- --
  --
  -------- --------------
-

SmartCompress.compress()

图片压缩

------------------------
  ------- ---
  ---------- ---
  ---- ---
  -------- --
---

参数

  • apiKey string：API Key
  • apiSecret string：API Secret
  • url string：图片 URL
  • quality number：图片质量（建议 60 ~ 80）

返回值

-
  ----- ----
  ----- -
    ---- ---
    ------- --
  --
  -------- --------------
-

总结

florest 是一款方便实用的 npm 包，可以与在线图片处理 API 集成，可以实现一些很有用的图片处理方法，希望大家在学习使用过程中能够有所收获。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600554df81e8991b448d2138

阅读全文

猜你喜欢

  • npm 包 mg-mysql-connector 使用教程

    npm 包 mg-mysql-connector 使用教程 什么是 mg-mysql-connector mg-mysql-connector 是一个用于在 Node.js 应用中连接 MySQL 数...

    2 年前
  • npm 包 normalizr-postprocess 使用教程

    前言 在前端开发中，我们常常需要处理并转化前端数据。而使用 normalizr-postprocess 包，可以对数据进行归一化处理，以及针对特殊需求进行后处理，使数据更加规范易懂。

    2 年前
  • npm 包 `opinionated` 使用教程

    前言 npm 是 Node.js 社区的包管理工具，相信前端工程师们都很熟悉。本篇文章主要介绍一个重要的 npm 包——opinionated，并分享如何使用它来创建一个完整的前端项目。

    2 年前
  • npm 包 detect-arguments 使用教程

    前言 在前端编程过程中，我们经常需要编写函数并传入参数。但是有时候我们不知道传入的参数是否符合我们所期望的类型和范围。这时可以使用 npm 包 detect-arguments 来进行参数类型检测和范...

    2 年前
  • npm 包 dustup 使用教程

    在前端开发过程中，我们经常需要使用模板引擎来进行前后端数据的交互和渲染。dustup 是一个轻量的、高性能的 JavaScript 模板引擎，支持多种语言和平台，具有灵活的功能和易于使用的 API。

    2 年前
  • npm 包 jquery.oddeven.js 使用教程

    npm 包 jquery.oddeven.js 使用教程 jQuery.oddeven.js 是一个基于 jQuery 的 JavaScript 库，可以帮助前端开发者方便的实现奇偶行样式效果。

    2 年前
  • npm 包 ng-orm 使用教程

    在前端开发中，数据管理和操作是一个很重要的环节。为了简化复杂的数据操作，很多前端开发者会借助一些工具和框架来实现。其中，ng-orm 是一个基于 Angular 的 ORM 框架，可以帮助开发者更加高...

    2 年前
  • npm 包 toki-method-proxy 使用教程

    前言 在前端开发中，我们常常会遇到业务中需要使用的一些复杂逻辑或函数，这些函数往往需要传递很多参数，而且还要考虑回调函数嵌套等问题。为了解决这些问题，我们可以使用 npm 包 toki-method-...

    2 年前
  • npm 包 css-aspect-ratio 使用教程

    在前端开发中，我们常常需要控制 HTML 中某元素的宽高比例。传统实现这一功能的方式有很多，比如使用 padding 和 absolute 定位等方法。然而，在日常开发中，我们可能经常碰到这样一种需求...

    2 年前
  • npm 包 immigration-mysql 使用教程

    简介 immigration-mysql 是使用 Node.js 连接 MySQL 数据库的 npm 包。它提供了一种准确、简便、高效的方式来操作 MySQL 数据库。

    2 年前
  • npm 包 table-cli 使用教程

    作为前端工程师，经常需要展示数据。而表格是展示数据的最常用方式之一。表格不仅能展示简单的数据，还能给使用者提供一些交互操作。但是手动写表格代码很麻烦，重复工作多且易出错。

    2 年前
  • npm 包 @nylira/vue-countdown 使用教程

    在前端开发过程中，倒计时组件是一个必不可少的组件，而@nylira/vue-countdown是一个非常实用的倒计时组件。 本篇文章将介绍如何使用@nylira/vue-countdown包，让你能够...

    2 年前
  • npm 包 listium-clipboard 使用教程

    在前端开发中，经常会遇到需要复制文本或内容的情况，而且复制的方式也有多种多样，可以通过点击按钮、右键菜单、快捷键等操作来实现。为了方便开发者实现复制功能，npm 社区提供了一个名为 listium-c...

    2 年前
  • npm 包 modgen 使用教程

    随着前端开发的普及，npm 成为我们常用的一个包管理工具。而 modgen 是一个可用于自动生成模块的 npm 包。在本文中，我们将详细介绍 modgen 的使用方式，以及如何在开发中利用它来提高效率...

    2 年前
  • npm 包 mola-cli 使用教程

    什么是 mola-cli mola-cli 是一款基于 Node.js 和 npm 的前端脚手架工具，可以快速生成前端项目模板和模块，提高开发效率。该工具支持构建各种前端框架（如 React、Vue、...

    2 年前
  • npm 包 nine-pebbles 使用教程

    介绍 nine-pebbles 是一款基于 React 和 Ant Design 的 UI 组件库，旨在为开发者提供一个高度可定制的 UI 组件，使得开发者能够快速构建美观、高效的 Web 应用。

    2 年前
  • npm包typechecked使用教程

    什么是type-checked？ 在前端开发中，我们会使用很多第三方库，而有时候这些库的使用可能会带来一些问题，特别是在类型检查方面。这时候，type-checked就可以派上用场了。

    2 年前
  • npm 包 jszip-cli 使用教程

    什么是 jszip-cli jszip-cli 是一个基于 jszip 的命令行工具，可以进行 ZIP 文件的创建、压缩、解压缩等操作。它是一个 npm 包，可以轻松安装和使用。

    2 年前
  • npm 包 roboto-no-svg 使用教程

    在前端开发中，使用合适的字体是非常重要的。Roboto 是一种非常常见的字体，同时也是一种非常适合移动设备的字体。然而，Roboto 的原始版本包含了很多 SVG 图像，这会导致加载性能下降。

    2 年前
  • npm 包 test-pixel 使用教程

    在前端开发中，我们经常需要进行像素级的测试。这时候，就可以利用 test-pixel 这个 npm 包来实现。本文将介绍 test-pixel 的使用方法，并提供一些使用示例。

    2 年前

相关推荐

    暂无文章