贝斯特游戏大厅官网入口
菜单类

QuerySDK

最新更新时间:Jan-15-2024

概述

CloudinaryjQuerySDK提供简单而综合图像和视频上传、变换、优化和交付能力,用代码实现无缝整合jQuery应用

相关题目
本指南与最新发布版本相关云化avaScript库内有jQuery打包

细节前版本所有新特征和修正见变换.

上页:

评分本页 :

注解
描述云端jQuery前端库后端node.js库见 ode.js文档.

快速示例:变换

取下变换代码和图像

cloudinary-jquery 2.x
$.cloudinary.image("front_face.png", {secure: true, transformation: [
  {gravity: "face", height: 150, width: 150, crop: "thumb"},
  {radius: 20},
  {effect: "sepia"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon")},
  {effect: "brightness:90"},
  {opacity: 60},
  {width: 50, crop: "scale"},
  {flags: "layer_apply", gravity: "south_east", x: 5, y: 5},
  {angle: 10}
  ]})
Open In Transformation Builder
样本变换

相对简单代码在原创上显示所有下下文前面.jpg图像交付前

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

URL将包含在上述代码自动生成的图像标签中

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

以类似方式,你可以变换视频.

深入了解变换

快速示例:文件上传

下代码演示定义文件输入字段客户端图像或视频文件上传后初始化输入字段使用cloudinary_fileupload方法 :

Html
<input name="file" type="file" class="cloudinary-fileupload" data-cloudinary-field="image_id" 
   data-form-data="[upload-preset-and-other-upload-options-as-html-escaped-JSON-data]"></input>
Js
$(document).ready(function() {
    $("input.cloudinary-fileupload[type=file]").cloudinary_fileupload();
});

QuerySDK特征

安装

使用打包管理程序安装jQuery库

# For NPM:   
npm install jquery
npm install cloudinary-jquery-file-upload

# For Bower: 
bower install cloudinary-jquery --save

可选性-- save参数保存依赖duper.json文件.

搭建

开工内含jQuery

html页面中包含文件 :

Html
<script src="[folder-path]/jquery/dist/jquery.js" type="text/javascript"></script>
// the following files only need to be included in order to support client-side uploading
<script src="[folder-path]/blueimp-file-upload/js/vendor/jquery.ui.widget.js" type="text/javascript"></script>
<script src="[folder-path]/blueimp-file-upload/js/jquery.iframe-transport.js" type="text/javascript"></script>
<script src="[folder-path]/blueimp-file-upload/js/jquery.fileupload.js" type="text/javascript"></script>
<script src="[folder-path]/cloudinary-jquery-file-upload/cloudinary-jquery-file-upload.js" type="text/javascript"></script>
// [folder-path] is the mapping to the resources in your web application

二叉置云配置参数

云化jQuery库使用你至少需要配置云名.可额外定义数选配置参数相关时贝斯特游戏大厅官网入口可编程媒体中查找您的配置证书机牌板云台

注解
  • 客户端大多数功能实施不需要认证,所以只需要您的认证云名华府市需要待配置而非API密钥或密钥API秘密从不公开客户端,所以,如果你想使用签名上传或生成交付签名服务器端代码使用后端SDKs.
  • 因后向兼容性原因,默认可选值安全性配置参数虚伪.现代应用推荐配置安全性参数切换真实性保证变换URL总生成HTTPS

云化jQuery主类实例CloudinaryJQuery中,原创为.Cloudi.设置配置参数可按程序或按云法调用或全局使用云法处理配置方法,例如:

Js
$.cloudinary.config({ cloud_name: 'sample', secure: true});

样本项目

下样本项目展示动态HTML页面使用CloudinaryjQuery插件(Ruby后端项目内)执行浏览器直接上传,包括上传进度和图像预览高级变换

相册样本项目

并见:

反馈发送