JavaScriptSDK

本页深入介绍avaScriptSDK

概述

云端JavaScriptSDK提供简单而综合图像视频转换、优化和交付能力,用代码实现无缝整合JavaScript或JS基础框架应用

快速示例

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

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

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

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

启动avaScriptSDK

使用前端框架时直接跳转到相关开始docs:

• 启动角
• 开始反应
• 开始与Vue.js

JavaScript不使用上述框架之一时,可按下段指令安装和搭建

JavaScriptSDK安装配置视频教程

观看视频教程查看如何安装配置avaScriptSDK

安装

安装@cloudinary/url-gen包使用NPR打包管理器

配置

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

云性实例配置

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

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

资产实例配置

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

构建环境

某些构建环境需要附加配置

• 滚动+VanillaJS安装使用@rollup/node-resolve.
• 下js+VanillaJS安装使用moxystudio/next-compile-node-modules或其他类似解决办法
• 类型Script+Webpack集模块解析法 节点中TSConfig文件.

变换

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

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

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

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

• JavaScript图像变换
• JavaScript视频转换

插件

上头@cloudinary/html包自frontend-frameworks服务提供插件以最优方式实现网站媒体化并提升用户经验,

样本项目

试用代码探索者项目实例

• JavaScript插件
• 编译不同图像转换示例
• 编译各种视频转换实例
• 相册应用