Python图像变换

或您的用户上传图像资产到云形后,您可以通过动态URL提供这些资产动态URL中包含指令,告诉云形使用一组变换参数变换资产云中自动实现所有变换,变换资产在快速CDN向终端用户传递最优用户经验前自动优化

举例说,您可调整大小并裁剪,添加叠加图像,模糊或像素面孔,应用各种特效和滤镜并应用设置优化图像并按需交付图像

云端SDK简化变换URL生成,便于资产嵌入ython应用

上页:

• 交付变换图像
• 应用常用图像变换

评分本页 :

并见:Python视频转换

交付变换图像

可使用生成图像标签或直接URL构建指令交付图像

图像法

使用python视图可添加图片图像显示方法云化图类中方法生成全图像资源URL基于给定变换参数并添加图像标签到 HTML代码

CloudinaryImage("sample").image()

上方代码生成以下HTML图像标签

<img src="https://res.www.aaaalireno.com/demo/image/upload/sample">

请求中也可以包括变换参数,例如提供JPEG图像加宽400像素

CloudinaryImage("sample.jpg").image(width = 400, crop = "pad")

可直接添加变换图像显示方法(所有变换都归单平分结果URL源码,如上)或用变换参数化

CloudinaryImage("sample.jpg").image(
  transformation=[{"width": 400, "crop": "pad"}])

外加非转换参数图像显示方法如资产版本、配置参数和HTML5图像标签属性

• 上头版本化参数添加到交付URL资产版本.
• 配置参数在此指定置置全局性
• HTML5图像标签属性等值或类加到结果标签上

例举 :

CloudinaryImage("docs/casual").image(width=500, height=500, crop="fill", version="1573726751", cloud_name="demo", secure=True, alt="Casual Jacket")

编译为:

<img src="https://res.www.aaaalireno.com/demo/image/upload/c_fill,h_500,w_500/v1573726751/docs/casual" alt="Casual Jacket">

CloudinaryImage("sample.jpg").image(
  transformation=[{"raw_transformation":"w_400,c_pad"}])

链式变换

云化支持强变换连多重变换并列单项变换请求,例如裁剪图像并添加边框在某些情况下,你可能想对上一个变换请求执行额外变换要做到这一点,可使用链式变换

变换URL应用链式变换包括多变换构件每种变换组件应用前一组件的结果Python应用多项变换变换参数数组变换数组下示例优先裁剪原图像到一组自定义坐标并变换结果以填充130x100矩形

https://res.www.aaaalireno.com/demo/image/upload/c_crop,h_200,w_300,x_355,y_410/c_fill,h_100,w_130/brown_sheep.jpg

下例应用4链化变换:自定义裁剪300x200,填到130x100,旋转20度后缩放50%

https://res.www.aaaalireno.com/demo/image/upload/c_crop,h_200,w_300,x_355,y_410/c_fill,h_100,w_130/a_20/c_scale,w_0.5/brown_sheep.jpg

更多图像变换信息见应用常用图像变换.

直接URL构建

上头图像显示上文描述方法生成HTML图像标签在某些条件中,你可能想直接生成变换URL,不包含图像标签仅返回 URL, 或使用built_url方法云化图类或使用标准Python命令cloudinary.utils.cloudinary_url.以下是几个例子:

cloudinary.CloudinaryImage("sample.jpg").build_url(
  width = 100, height = 150, crop = 'fill')

# Output: "https://res.www.aaaalireno.com/demo/image/upload/c_fill,h_150,w_100/sample.jpg"

cloudinary.utils.cloudinary_url("sample_spreadsheet.xls", 
  resource_type = "raw")

# Output: "https://res.www.aaaalireno.com/demo/raw/upload/sample_spreadsheet.xls"

cloudinary.utils.cloudinary_url("sample.jpg", 
  width = 100, height = 150, crop = "fill")

# Output: "https://res.www.aaaalireno.com/demo/image/upload/c_fill,h_150,w_100/sample.jpg"

Django模板标签

使用Django时,可使用Django库ython标签嵌入django模板要初始化Django模板中的云标记,增加以下命令:

{% load cloudinary %}

下模板代码使用云化模板标签嵌入变换图像

{% cloudinary "sample.jpg" width=100 height=150 crop="fill" %}

本页所有代码样本使用cloudinary.CloudinaryImage,同样结果使用云化强哥模板标签模板标签限一级参数要指定复杂变换指令,你需要预定义Django类选项并用在Django模板代码中常量例举 :

def consts(request):
  return dict(
      ICON_EFFECTS = dict(
          format = "png",
          transformation = [
              dict(height=95, width=95, crop="thumb", gravity="face", radius=20),
              dict(angle=10),
          ]
      )
  )

{% cloudinary "sample.jpg" ICON_EFFECTS %}

应用常用图像变换

本节概述并举例说明下列常用图像变换特征,并链接到这些特征的更详细的文档

• 裁剪裁剪
• 转换为另一种图像格式
• 应用图像特效和滤镜
• 添加文本图像叠加
• 图像优化
• 响应图像设置

记住本节仅意在向您介绍使用Python图像变换基础知识

综合解释如何实现各种变换见图像变换.完整列表支持图像变换及其用法见变换URLAPI引用.

裁剪裁剪

变大小和/或裁剪图像有多种方法,并控制在裁剪期间保存的图像区

下例使用填充裁剪法生成并交付图像完全填充请求 250x250大小并保留原侧比使用面部检测重力确保图像中所有面部保留并居中

CloudinaryImage("family_bench.jpg").image(width=250, height=250, gravity="faces", crop="fill")

原创图像 填充刻面重力

也可以使用自动重力自动判定什么保留在裁剪中

CloudinaryImage("basketball_in_net.jpg").image(width=200, height=300, gravity="auto", crop="fill")

原创图像 填充重力a

细节重构和裁剪选项见大小裁剪图像.

转换为另一种图像格式

可基本以图像格式向云形传送图像三种主要方式转换并交付另一种格式:

• 指定图像公有标识并配有期望扩展
• 使用fack_format参数化
• 使用汽车fack_format指令云式为每个浏览器请求最优化格式提供图像

例举 :

1. gif格式提供.jpg文件
   Python

   cloudinary 1.x

   CloudinaryImage("sample.gif").image()

   Open In Transformation Builder
2. letCloudinary为每个浏览器选择最优格式举个例子,在 Chrome中,此图像可交付.avi或.web格式(取决于产品环境搭建):
   Python

   cloudinary 1.x

   CloudinaryImage("cloud_castle.jpg").image(transformation=[
     {'width': 350, 'crop': "scale"},
     {'fetch_format': "auto"}
     ])

   Open In Transformation Builder
   上方代码生成 URLf_aut参数 :
   URL

   https://res.www.aaaalireno.com/demo/image/upload/c_scale,w_350/f_auto/cloud_castle.jpg

更多细节见:

• 以不同格式发送图像
• 自动格式选择
• 提示和考量使用f_aut

应用图像特效和滤镜

从大选择图像特效、增强和滤镜中选择应用到图像可用效果包括各种色平衡级效果、色调、模糊性效果、像素化效果、锐化效果、自动改进效果、艺术滤波、图像和文本叠加效果、变形效果、轮廓、背景、阴影等

下方代码应用卡通效果、圆角效果和背景色效果

CloudinaryImage("actor.jpg").image(transformation=[
  {'effect': "cartoonify"},
  {'radius': "max"},
  {'effect': "outline:100", 'color': "lightblue"},
  {'background': "lightblue"},
  {'height': 300, 'crop': "scale"}
  ])

关于可用图像特效和滤镜详解见可视图像特效和增强.

添加文本图像叠加

可添加图像和文本为主图像叠加覆盖图像上可应用与所有图像相同的变换类型,并使用重力设置或x和y坐标控制重叠位置也可以对文本应用各种变换,如颜色、字体、大小、旋转等

举例说 下方代码覆盖一对情侣照片迭代照片使用面部检测调整色饱和度并应用维格特效果裁剪词爱添加成粉红色花式字体并旋转适配设计并添加气球图形外加最后图像裁剪和角角四舍五入

CloudinaryImage("coffee_cup.jpg").image(transformation=[
  {'width': 400, 'height': 250, 'gravity': "south", 'crop': "fill"},
  {'overlay': "nice_couple", 'width': "1.3", 'height': "1.3", 'gravity': "faces", 'flags': "region_relative", 'crop': "crop"},
  {'effect': "saturation:50"},
  {'effect': "vignette"},
  {'flags': "layer_apply", 'width': 100, 'radius': "max", 'gravity': "center", 'y': 20, 'x': -20, 'crop': "scale"},
  {'overlay': "balloon", 'height': 55},
  {'effect': "hue:-20", 'angle': 5},
  {'flags': "layer_apply", 'x': 30, 'y': 5},
  {'overlay': {'font_family': "Cookie", 'font_size': 40, 'font_weight': "bold", 'text': "Love"}, 'color': "#f08"},
  {'angle': 20, 'flags': "layer_apply", 'x': -45, 'y': 44},
  {'width': 300, 'height': 250, 'x': 30, 'crop': "crop"},
  {'radius': 60}
  ])

图像优化

默认时云式自动执行所有变换图像的某些优化还有一些附加特性使您能够进一步优化应用中使用的图像其中包括优化图像质量、格式和大小等

举个例子,你可以使用汽车值对fack_format并质量问题属性自动交付格式和质量图像,在满足质量水平要求的同时最小化文件大小下方应用这两个参数,结果产生351KBAVIF文件(Chrome),而不是1.4MBJPG质量无可见变化

CloudinaryImage("pond_reflect.jpg").image(quality="auto", fetch_format="auto")

深入审查多方法优化图像,见图像优化.

响应图像设置

响应式网络设计是一种设计网站向用户提供最优浏览经验的方法,而不论设备、视图大小、定向或分辨率如何查看它保证最优经验意味着避免发送高清晰度图像以调整客户端规模,并给小显示器用户带来显著带宽浪费取而代之的是,你应总是为每个设备提供右尺寸图像和屏幕尺寸

举个例子,你可确保每个用户接收图像大小和设备像素比汽车值对dpr并宽度属性。上头汽车值代之以客户端基于屏幕属性和视图港宽度的实际值

CloudinaryImage("myphoto").image(transformation=[
  {'dpr' : "auto", 'responsive' : True, 'width' : "auto", 'crop' : "scale", 'angle' : 20},
  {'effect' : "art:hokusai", 'border' : "3px_solid_rgb:00390b", 'radius' : 20}])

云化提供几种选项简化响应图像传递复杂性详细指南如何实施这些选项见响应图像.