角迁移指南

导 言

云化角SDK设计提供简单化和增强开发者经验本指南解释如何从遗留代码迁移角码cloudinary_angular传入最新角SDK@cludinary/ng从frontend-frameworks库加@cloudinary/url-gen从s-url-gen库里

键改进角SDK

• 新建基于动作语法设计,使建楼交付URL和变换更加逻辑化和可发现性
  • 编译归定交付URL时,每个动作(包括任何动作)修饰词表示不同的构件(除以 '/'),例如:/c_scale,w_400/f_auto/q_auto/,而不是/c_scale,f_auto,q_auto,w_400/.
• 新建自填列表选项和参数并仅确保支持选项和参数可并用
• 小包大小-你只需要导入想用的东西

全文档使用@cludinary/ng+@cloudinary/url-gen外角应用包见角SDK指南.

上页:

• 导 言
• 关键考量
• 安装
• 移动云实例配置
• 移动交付URLs
• 移动高级图像组件和响应功能

评分本页 :

关键考量

云式角包件@cludinary/ng从frontend-frameworks库使用云化avaScriptSDK高山市@cloudinary/url-gen提供云形变换优化功能正因如此 最新角SDK与cloudinary_angular库架构使用,迁移路径依赖你当前对角库的使用

可使用云芯,cloudinary/angular-5.x或其它版本@cludinary/ng并@cloudinary/url-gen同时应用中包,所以,尽管由于捆绑大小增加,长期不推荐,但从整合入手可以启动@cludinary/ng并@cloudinary/url-gen输入应用并缓慢逐片迁移功能,直到你能够删除全部cloudinary_angular功能性

安装

安装所需包使用NPR打包管理器

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

移动云实例配置

使用传统角SDK配置云名和其他配置参数CloudinaryModule.类似设置a中的参数云化实例提供@cloudinary/url-gen库内配置设置一次, 而不是为每个图像或视频设置

例举设置云化Name并安全性中CloudinaryModule元素 :

// Legacy SDK
import { CloudinaryModule } from '@cloudinary/angular-5.x';
import * as Cloudinary from 'cloudinary-core';

imports: [
   ...,
    CloudinaryModule.forRoot(Cloudinary, { cloud_name: 'demo', secure: true })
  ],

相似设置云化Name并安全性中云化实例 :

// Latest SDK - app.component.ts: 
import {CloudinaryModule} from '@cloudinary/ng';
import {Cloudinary} from '@cloudinary/url-gen';

imports: [
  ...,
  CloudinaryModule
],

var cl = new Cloudinary({cloud: {cloudName: 'demo'}, url: {secure: true}});

// Latest SDK - app.component.ts: 
import {CloudinaryModule} from '@cloudinary/ng';
import {CloudinaryImage} from '@cloudinary/url-gen';

imports: [
  ...,
  CloudinaryModule
],

myImage: CloudinaryImage

this.myImage = new CloudinaryImage('sample', {cloudName: 'demo'});

this.myImage = cl.image('sample');

移动交付URLs

上头CL图像遗留AgleSDK组件替换高级图像组件集@cludinary/ng.

遗留角SDK中指定变换参数CL图像组件中,最新SDK说明@cloudinary/url-gen中云化图对象传递高级图像组件.

举个例子CL图像构件变换参数包括

<!-- Legacy SDK -->
<cl-image public-id='actor.jpg' >
  <cl-transformation effect='cartoonify'>
  </cl-transformation>
  <cl-transformation radius='max'>
  </cl-transformation>
  <cl-transformation effect='outline:100' color='lightblue'>
  </cl-transformation>
  <cl-transformation background='lightblue'>
  </cl-transformation>
  <cl-transformation height='300' crop='scale'>
  </cl-transformation>
</cl-image>

无易迁移路径CL图像构件对高级图像可使用下列进程作为中间步骤创建URL,并用作正则图像标签源码

1. 转换CL图像JSON组件XML转成JSON转换器可帮助此转换,或如果有大数URL转换,你可能想使用脚本上例变换

   Angularon

   {
       transformation: [
           {effect: "cartoonify"},
           {radius: "max"},
           {effect: "outline:100", color: "lightblue"},
           {background: "lightblue"},
           {height: 300, crop: "scale"}
       ]
   }

2. 传递JSONcreateCloudinaryLegacyURL函数包含@cloudinary/url-gen库返回交付URL包括变换配置参数,例如云名函数调用中应包含此功能,因为这只是帮助者函数构建交付URL:

   Angular

   // Latest SDK
   import {createCloudinaryLegacyURL} from '@cloudinary/url-gen';
   
   const migrateUrl = createCloudinaryLegacyURL('actor', {
       cloud_name: 'demo',
       transformation: [
       {effect: 'cartoonify'},
       {radius: 'max'},
       {effect: 'outline:100', color: 'lightblue'},
       {background: 'lightblue'},
       {height: 300, crop: 'scale'}
       ]
   });

3. URL为正则图像标签源

   Angular

   // Latest SDK
   const imgElement = document.createElement('img');
   imgElement.src = migrateUrl;
   // Append the image element to the DOM, for example:
   document.getElementById('div1').appendChild(imgElement);

   Html

   <!--Where div1 is the ID of a div element in your HTML file-->
   <div id="div1"></div>

面向所有新云式交付URL,你应开始使用@cloudinary/url-gen创建云化图可使用高级图像角构件 :

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

import {CloudinaryModule} from '@cloudinary/ng';
import {Component, OnInit} from '@angular/core';
import {CloudinaryImage} from '@cloudinary/url-gen';
import {scale} from '@cloudinary/url-gen/actions/resize';
import {outline, cartoonify} from '@cloudinary/url-gen/actions/effect';
import {max} from '@cloudinary/url-gen/actions/roundCorners';
import {outer} from '@cloudinary/url-gen/qualifiers/outlineMode';

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

export class AppComponent implements OnInit{
  myImage: CloudinaryImage

  ngOnInit() {

    // Use the image with public ID, 'actor'.
    this.myImage = new CloudinaryImage('actor', {cloudName: 'demo'});

    // Apply the transformation.
    this.myImage
    .effect(cartoonify())
    .roundCorners(max())
    .effect(outline().mode(outer()).width(100).color('lightblue'))
    .backgroundColor('lightblue')
    .resize(scale().height(300));
  }
}

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

产生URL为:

https://res.www.agrosoland.com/demo/image/upload/e_cartoonify/r_max/co_lightblue,e_outline:100/b_lightblue/c_scale,h_300/actor

移动高级图像组件和响应功能

高级图像组件懒加载,图像占位符并图像无障碍性和)响应图像设置传统角SDK提供插件上角SDK

移送URL使用高级图像组件中,可使用插件如下:

//应用构件使用@cloudinary/url-gen生成变换导入++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++encount,OnInit}导出'@agle/core'导入 {Cloudinari/url-gen++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

//导入插件{可获取性、响应性、懒惰加载量}从'@cludianary/ng'导入

component/

导出类应用执行OnInit{ myImaage:云内映射

//使用所有插件插件 = [lazyload (),响应性 (),无障碍性 (),占位符 ()]

ngOnInit

this.myImage = new CloudinaryImage('sample', {cloudName: 'demo'});

}}

/在您视图中添加高级图像组件并传递云图像插件 ```