Vue.jsSDK

本页深入介绍Vue.js前端框架库

概述

Cloudinary Vue.js前端框架库提供图像生成功能和插件,使用代码可实现无缝整合Vue.js应用

快速示例

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

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

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

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

开始与Vue.js

Vue.jsSDK安装配置视频教程

观看视频教程查看如何安装配置Vue.jsSDK

教程内容

安装

Cloudinary JavaScript和Vue.js包使用NPR打包管理程序

配置

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

云性实例配置

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

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

资产实例配置

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

变换

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

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

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

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

• Vue.js图像变换
• Vue.js视频转换

插件

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

样本项目

试用代码探索者项目实例

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