贝斯特游戏大厅官网入口

角SDK

最新更新:Jan-21-2024

本页深入介绍角前端框架库

小技巧

准备编码时直接跳到快速启动.

上页:

评分本页 :

概述

云端前端框架库提供图像生成功能和插件,用代码实现无缝整合

可能你还想知道

兴趣版本信息

想要学习架构

快速示例

示例显示变换URL使用@cloudinary/url-gen包并用agle

Angular

// In your app.component.ts use `@cloudinary/url-gen` to generate your transformations.

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

// Import the CloudinaryModule.
import {CloudinaryModule} from '@cloudinary/ng';

// Import the Cloudinary classes.
import {Cloudinary, CloudinaryImage} from '@cloudinary/url-gen';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, CloudinaryModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

export class AppComponent implements OnInit{
  img!: CloudinaryImage

  ngOnInit() {

    // Create and configure your Cloudinary instance.
    const cld = new Cloudinary({
      cloud: {
        cloudName: 'demo'
      }
    }); 

    // Use the image with public ID, 'front_face'.
    this.img = cld.image('front_face');

    // Apply the transformation.
    this.img
    .effect(sepia());  // Apply a sepia effect.

  }
}

Angular

<!-- In your view add the advanced-image component and pass your Cloudinary image.-->
<advanced-image [cldImg]="img"></advanced-image>

注解

不使用单机组件需要导入 CloudinaryModule内 程序模块取而代之

代码创建HTML交付前面.jpg图像Sepia效果应用

可同时应用多项变换链式变换提供更多有趣结果

URL

Angular

https://res.www.aaaalireno.com/demo/image/upload/c_thumb,g_face,h_150,w_150/r_20/e_sepia/l_cloudinary_icon/c_scale,w_50/o_60/e_brightness:90/fl_layer_apply,g_south_east,x_5,y_5/a_10/f_png/front_face

Open In Transformation Builder

裁剪150x150缩略图使用表情检测重力自动判定裁剪位置
圆角20像素半径
应用sepia效果
重叠云标识东南角图像(略加偏移)标识缩至50像素宽度,提高亮度和局部透明度(不透明度=60%)
旋转生成图像(包括叠加量)乘以10度
转换并用PNG格式提供图像(原上传图像为JPG)

深入了解变换

查看所有可能的变换变换URLAPI引用.
JavaScript所有变换动作和修饰词变换构建器引用.
更多例子图像显示并视频播放使用变换s-url-genv1.x库里

启动角

安装

安装云式avaScript和角包使用NPR打包管理器

npm i @cloudinary/url-gen @cloudinary/ng

配置

可指定配置参数用来创建交付URLs, 或使用a云化实例或图像/视频.

注解

指定配置参数 骆驼Case,例如 云化Name.

云性实例配置

如果要使用相同的配置提供所有媒体资产, 最好通过云形实例建立配置,例如:

Angular

// In your app.component.ts use `@cloudinary/url-gen` to set your configuration.

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

// Import the CloudinaryModule.
import {CloudinaryModule} from '@cloudinary/ng';

// Import the Cloudinary classes.
import {Cloudinary, CloudinaryImage} from '@cloudinary/url-gen';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, CloudinaryModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

export class AppComponent implements OnInit{
  img!: CloudinaryImage;

  ngOnInit() {

    // Create a Cloudinary instance, setting some Cloud and URL configuration parameters.
    const cld = new Cloudinary({
      cloud: {
        cloudName: 'demo'
      }
    });

    // cld.image returns a CloudinaryImage with the configuration set.
    this.img = cld.image('sample');

    // The URL of the image is: https://res.www.aaaalireno.com/demo/image/upload/sample
  }
}

Html

<!-- In your view add the advanced-image component and pass your Cloudinary image. -->
<advanced-image [cldImg]="img"></advanced-image>

注解

不使用单机组件需要导入 CloudinaryModule内 程序模块取而代之

可按需设置与云和URL有关的其他配置参数,例如,如果自定义域名并想生成安全URL

Angular


// Create a Cloudinary instance, setting some Cloud and URL configuration parameters.
const cld = new Cloudinary({
  cloud: {
    cloudName: 'demo'
  },
  url: {
    secureDistribution: 'www.example.com', 
    secure: true 
  }
});

// This creates a URL of the form: https://www.example.com/demo/image/upload/sample

资产实例配置

需要指定不同配置提供媒体资产时,可按图像/视频实例指定配置,例如:

Angular

// In your app.component.ts use `@cloudinary/url-gen` to set your configuration.

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

// Import the CloudinaryModule.
import {CloudinaryModule} from '@cloudinary/ng';

// Import the Cloudinary classes.
import {CloudinaryImage} from '@cloudinary/url-gen';
import {URLConfig} from '@cloudinary/url-gen';
import {CloudConfig} from '@cloudinary/url-gen';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, CloudinaryModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

export class AppComponent implements OnInit{
  img!: CloudinaryImage;

  ngOnInit() {

    // Set the Cloud configuration and URL configuration
    const cloudConfig = new CloudConfig({cloudName: 'demo'});
    const urlConfig = new URLConfig({secure: true});

    // Instantiate and configure a CloudinaryImage object.
    this.img = new CloudinaryImage('docs/shoes', cloudConfig, urlConfig);

    // The URL of the image is: https://res.www.aaaalireno.com/demo/image/upload/docs/shoes
  }
}

Html

<!-- In your view add the advanced-image component and pass your Cloudinary image.-->
<advanced-image [cldImg]="img"></advanced-image>

注解

不使用单机组件需要导入 CloudinaryModule内 程序模块取而代之

变换

上头@cloudinary/url-gen包简化变换URL生成并包含易嵌入资产特殊组件和指令

上头@cloudinary/url-gen包安装附加transformation-builder-sdk库依赖性处理URL转换生成部分

可使用变换构建器引用查找所有可用变换、语法和示例

了解更多使用变换资产@cloudinary/url-gen包见:

插件

云形三角库提供插件以最优方式实现网站媒体化并提升用户经验,

Video Player is loading.

Current Time 0:00

Duration 0:00

Loaded: 0%

Stream Type LIVE

Remaining Time 0:00

Next upNext up:

样本项目

试用代码探索者项目实例

错误

不幸有错误发送反馈