npm 包 @cloudinary/angular 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 @cloudinary/angular 使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

在现如今的互联网时代，图片和视频的重要性越发显著，而如何处理这些多媒体资源成了前端工程师必备的技能之一。@cloudinary/angular 是一个npm包，它提供了现代化的图片和视频管理解决方案，它能够帮你完成图片转换、优化、裁剪、滤镜、字幕和视频转码等任务。

本文将详细介绍如何使用@cloudinary/angular npm包。

安装

在项目的根目录下，打开终端输入以下代码来安装@cloudinary/angular：

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

注册 Cloudinary

如果还没有 Cloudinary 账号，需要注册一个开发账号，网址为https://cloudinary.com/users/register/free。然后转到控制面板，找到 API 环节，在其中找到 cloud_name、api_key 和 api_secret 三个关键信息。

组件设置

在使用@cloudinary/angular时，需要先设置UplopadWidgetOptions和ImageTransformationOptions组件。

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

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

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

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

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

视图设置

下面是一个简单的HTML和TypeScript Angular组件，它演示了如何在Web应用程序中使用Cloudinary图片上传和管理。该组件将图片从本地、Url、照相机、Facebook、Dropbox、Instagram 和Shutterstock上传到Cloudinary，以及在回调中改变图片样式。

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

代码解释

import { Component } from '@angular/core'; 其中@angular/core是angular 轻量级的一个开发核心库，用于进一步编写组件。
import { Cloudinary } from '@cloudinary/angular-5.x'; 告诉 JavaScript 需要从 @cloudinary/angular-5.x 导入 Cloudinary，它可以轻松管理和分享图片和视频。
import copy from 'copy-to-clipboard'; 为了使用插件copy-to-clipboard，安装后并且在此处导入。
public uploader: UploadWidgetOptions 该组件类定义了 uploader and transformation,通过该组件能够上传多媒体资源，并对每一个资源进行修改，除去默认值。
public imageData: string | null = null 主要是为了预测网站图片大小，而赋予值null值。
constructor(private cloudinary: Cloudinary) { } 使用私有的Cloudinary属性，所以必须在构造函数中引入Cloudinary。

图片上传方法

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

这个方法主要作用是让用户在前端UI界面上点击 Upload Image，然后打开图片管理器，它将上传您所选择的图片路径及地址。其中使用Image Transformation Options样式修改图片长宽和效果，则使用 clTransformation将transformation属性传递给img标记。

小结

通过本篇文章的介绍，可以看出@cloudinary/angular插件的使用方法简单，实现了多媒体资源的优化、管理，相比原生API，更加灵活、高效。有了@cloudinary/angular插件，处理图片就不再是一个烦人的问题了。相信这篇文章可以为大家提供一些指导和借鉴的意义，帮助各位优化图片管理，改善Web应用程序性能。

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