美文网首页
EzPP 0.2 发布,新增YAML布局渲染功能

EzPP 0.2 发布,新增YAML布局渲染功能

作者: 曹建峰 | 来源:发表于2020-08-25 08:28 被阅读0次
ezpp_slogan.cn.png

EzPP发布的0.2.1里面,
提供了其史上最强功能:Yaml布局渲染。

你可以把一个Yaml文件渲染为图片。
并且你的Yaml可以作为模版被复用。
你可以传递不同参数来生成不同的图片。

你可以用这个功能画Logo,画封面或者其他图片。
你又多了一个不装/卸掉Photoshop的理由。

渲染的例子

1. 入门例子:hello_ezpp

这个例子显示了使用ezpp的基本的渲染方法.

  1. 怎样使用 canvas。
  2. 如何使用"text"类元素。
  3. 如何通过filename属性自定义字体。
  4. 如何通过path属性自定义字体。

从命令行输入

ezpp render -i examples/render/hello_ezpp/hello.yaml

或者

ezpp render -i examples/render/hello_ezpp/hello_custom_font.yaml

examples/render/hello_ezpp/hello.yaml

# ezpp render -i examples/render/hello_ezpp/hello.yaml
canvas:
  width: 240
  height: 80
  color: "#f93"  # "#RGBA" or "#RRGGBBAA"

items:
- 
  type: "text"
  title: "Hello, EzPP"
  pos:
    x: "center"
    y: "center"
  font:
    path: "/System/Library/fonts/Monaco.dfont"
    # filename: "ZhenyanGB.ttf"
    size: 24
    color: "#543"

输出

FROM: examples/render/hello_ezpp/hello.yaml
TO: examples/render/hello_ezpp/hello.png
FROM: examples/render/hello_ezpp/hello_custom_font.yaml
TO: examples/render/hello_ezpp/hello_custom_font.png

结果:

hello.png
hello_custom_font.png

2. 使用参数的例子:params

这个例子展示了如何利用参数来重用你的 *.yaml 文件。

  1. 如何使用"image"类元素。
  2. 如何使用"shadow"类元素。
  3. 如何使用参数。

从命令行输入:

ezpp render -i examples/render/params/params.yaml  -a '{"icon":"logo_256x256.png","title":"Hello EzPP"}' -o examples/render/params/hello_ezpp.png

examples/render/params/params.yaml

# params defines
params: 
  - "title"
  - "icon"

canvas:
  width: 256
  height: 80
  color: "#f93" 

items:
-
  type: "image"
  filename: "__icon__" # params using
  pos:
    x: 16
    y: "center"
- 
  title: "__title__" # params using
  type: "text"
  visible: true
  pos:
    x: 96
    y: "center"
  font:
    path: "/System/Library/fonts/Monaco.dfont"
    size: 24
    color: "#543"
        
-
  type: "shadow"
  alpha: 0.1 # 0.0-1.0  shadow color is #000a

输出

FROM: examples/render/params/params.yaml
TO: examples/render/params/hello_ezpp.png

结果:

hello_ezpp.png

参数有力量!

你也可像这样创建一个 *.sh.

examples/render/params/render_params_demo.sh:

cd examples/render/params
ezpp render -i params.yaml -a '{"icon":"logo_64.png","title":"Hello"}' -o hello.png
ezpp render -i params.yaml -a '{"icon":"logo_64.png","title":"EzPP"}' -o ezpp.png
ezpp render -i params.yaml -a '{"icon":"logo_64.png","title":"Hello EzPP"}' -o hello_ezpp.png
cd ../../../

它将创建下列图片:

hello.png ezpp.png hello_ezpp.png

你还可以批量处理数据并自动调用 'ezpp render ***'.

3. 遮罩例子mask

这个例子展示了如何创建一个遮罩图层

  1. 如何使用"image"类元素。
  2. 如何使用"shadow"类元素。
  3. 如何使用"nested"类元素。
  4. 如何使用canvas的color属性。
  5. 如何使用canvas的antialias_size属性。

从命令行输入:

ezpp render -i examples/render/mask/mask.yaml 
ezpp render -i examples/render/mask/mask_antialias.yaml 

examples/render/mask/mask.yaml

canvas:
#...

items:
-
  type: "image"
#...
-
  type: "shadow"
  alpha: 0.1
  
-
  type: "nested" # Just like a inline yaml file
  pos:
    x: 48
    y: "center"
  canvas:
    width: 204
    height: 72 
    antialias_size: 4 # 1,2,4,8,16 antialias range,The bigger the slower
    color: "#0006" # "#RGB6" means alpha = 6/16
  items:      
  - 
    type: "text"
    title: "EzPP"
    pos:
      x: "center"
      y: "center"
    font:
      path: "/System/Library/fonts/Monaco.dfont"
      size: 32
      color: "#543"

输出

FROM: examples/render/mask/mask.yaml
TO: examples/render/mask/mask.png
FROM: examples/render/mask/mask_antialias.yaml
TO: examples/render/mask/mask_antialias.png

结果:

mask.png mask_antialias.png

这是遮罩,是那个嵌套元素渲染出来的


mask_text.png

4. slogan

这个例子显示了使用ezpp的进阶的渲染方法.

  1. 如何使用"image"类元素。
  2. 如何使用"shadow"类元素。
  3. 如何使用"import"类元素来重用你的.yaml文件。

从命令行输入:

ezpp render -i examples/render/slogan/ezpp_slogan.yaml          

examples/render/slogan/ezpp_slogan.yaml

#...
items:
-
  type: "import"
  filename: "ezpp_slogan_top.yaml"
  pos:
    x: 0
    y: 0
#...

输出

FROM: examples/render/slogan/ezpp_slogan.yaml
TO: examples/render/slogan/ezpp_slogan.png

结果就是EzPP的slogan:

ezpp_slogan

最后这个例子yaml比较多,可以看源码:
https://github.com/ovotop/ezpp/tree/master/examples/render/slogan

其他功能:

改格式:

目前可以改的格式主要是3个 PNG,JPG,WEBP

修改格式 原图JPG 改格式为WEBP
文件名 lego_mc_l.jpg lego_mc_l.webp
大小 203k 109k

图片编辑:

原图 修改后
原图 毛玻璃
原图 改颜色
原图192x192 改为64x64
文本:"EzPP" 根据文本创建的图标
原图 投影后

其中改颜色功能可以指定颜色值如“#3399ff”,
也可以修改色相[0,360)、亮度[-1.0,1.0]、饱和度[0,1.0]

投影功能中,只有一个背景干净的图,就可以投出45度角的阴影效果。

图片批处理

-i不但支持单一文件还支持目录
例如:
已有文件目录

jianshu
├── ezpp_slogan.cn_256x128.png
├── ezpp_slogan_256x128_frosted.png
├── logo_256x256.png
└── logo_blue_hsv_v(-0.5).png

在命令行中输入

ezpp resize -i jianshu -r -s "75%"

输出:

on_size_parsed(jianshu, None, True, 75%)
resize: (256, 256)->(192, 192)
from:   /Volumes/user/cjf/w/py/ezpp/docs/jianshu/logo_256x256.png
to:     /Volumes/user/cjf/w/py/ezpp/docs/jianshu/logo_256x256_192x192.png
resize: (256, 128)->(192, 96)
from:   /Volumes/user/cjf/w/py/ezpp/docs/jianshu/ezpp_slogan_256x128_frosted.png
to:     /Volumes/user/cjf/w/py/ezpp/docs/jianshu/ezpp_slogan_256x128_frosted_192x96.png
resize: (256, 256)->(192, 192)
from:   /Volumes/user/cjf/w/py/ezpp/docs/jianshu/logo_blue_hsv_v(-0.5).png
to:     /Volumes/user/cjf/w/py/ezpp/docs/jianshu/logo_blue_hsv_v(-0.5)_192x192.png
resize: (256, 128)->(192, 96)
from:   /Volumes/user/cjf/w/py/ezpp/docs/jianshu/ezpp_slogan.cn_256x128.png
to:     /Volumes/user/cjf/w/py/ezpp/docs/jianshu/ezpp_slogan.cn_256x128_192x96.png

修改后目录中的文件

jianshu
├── ezpp_slogan.cn_256x128.png
├── ezpp_slogan.cn_256x128_192x96.png
├── ezpp_slogan_256x128_frosted.png
├── ezpp_slogan_256x128_frosted_192x96.png
├── logo_256x256.png
├── logo_256x256_192x192.png
├── logo_blue_hsv_v(-0.5).png
└── logo_blue_hsv_v(-0.5)_192x192.png

官网

https://github.com/ovotop/ezpp

安装:

EzPP 需要python3 环境,安装只需要一行命令。

pip3 inatall ezpp

相关文章

网友评论

      本文标题:EzPP 0.2 发布,新增YAML布局渲染功能

      本文链接:https://www.haomeiwen.com/subject/fdkajktx.html