在现如今的互联网时代，图片和视频的重要性越发显著，而如何处理这些多媒体资源成了前端工程师必备的技能之一。@cloudinary/angular 是一个npm包，它提供了现代化的图片和视频管理解决方案，它能够帮你完成图片转换、优化、裁剪、滤镜、字幕和视频转码等任务。
本文将详细介绍如何使用@cloudinary/angular npm包。
安装
在项目的根目录下，打开终端输入以下代码来安装@cloudinary/angular：
npm i @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，以及在回调中改变图片样式。
<div> <h1>Demo Application using Cloudinary</h1> <input type="button" value="Upload Image" (click)="upload()"/> </div> <div> <img src="{{imageData}}" alt="cloudinary-image" [clTransformation]="transformation"> </div>
代码解释
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
