开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情

图片

支持的图片类型包括但不限于：Gif,JPG,PNG,SVG 等等。

语法

slide.addImage(OPTIONS)

在PptxGenJS中，图片可以是网上的图片，可以是本地的图片，也可以是Base64的图片这3种。如果是引用网上和本地的图片，要使用 path 属性，如下：

// 引用网上的图片
slide.addImage({path:'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg'})
// 引用本地的图片
slide.addImage({ path: "images/chart_world_peace_near.png" });

path属性相当于 <img> 标签的 src 属性一样。

如果是使用Base64的形式引入图片的话，要是用 data 属性，如下：

slide.addImage({ data: "image/png;base64,iVtDafDrBF[...]=" });

path属性和data属性两者是互斥且必填的，也就是说两者你必须选择其中一个来使用。

引入本地图片的注意事项

引入本地图片的最常遇到的一个问题就是：图片的路径，很多时候我们不管怎么尝试路径都没能成功让图片显示出来，这个时候我们可以尝试使用过 import 来帮助我们导入图片。

比如说在文件开头，我们先把要用的图片import进来，如下：

import pic1 from '../../images/pic1.png' // 导入图片

然后直接赋值给 path 属性即可，如下：

s.addImage({
    path: pic1,
    ...xywh(1,1,1,1)
});

这样就可以解决图片的路径问题啦。

图片的属性

图片有以下属性，可以让我们操作引入的图片：

• altText：占位文本
• flipH：水平翻转
  • 布尔值，默认为false；
• flipV：垂直翻转
  • 布尔值，默认为false；
• hyperlink：超链接
  • 对象，拥有url或者slide属性二者之一，url跳转到网页，slide跳转到页面；
• rotate：旋转
  • 数值，0-359的范围；
• rounding：图片圆角
  • 布尔值。默认为false；
• transparency：可见度
  • 图片的透明度，取值范围是0-100，默认为0，表示完全可见；

除了上面常用的属性之外，还有 sizing/placeholder 等属性可以在官方文档中查看。