从豆瓣图书热门榜看Power BI图像批量裁剪

wujunmin

发布于 2024-03-21 12:53:01

790

发布于 2024-03-21 12:53:01

文章被收录于专栏：wujunminwujunmin

豆瓣有多个分类的图书热门榜单，如下图所示。

放大其中一个，可以看到封面图的细节-图片进行了圆角裁剪。但如果你从豆瓣下载原始封面图，会发现图片不是圆角的。

在很多Power BI场景都需要用到图片（可能是本地图片或者URL）。这引发一个思考，如何在Power BI批量对图片进行裁剪？以下是Power BI模拟豆瓣的裁剪效果：

配套资料知识星球提供

以下是菱形裁剪效果：

DAX可以用来裁剪图片。

在原始图片保持不变的情况下，我们可以通过DAX语句的变化随意对图片凹造型。原理是把图片（无论是Base64还是URL）包裹在SVG中。

对上方的图片如下度量值进行处理：

SVG.菱形裁剪 = 
"<svg viewbox='0 0 80 120'
    xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
    <defs>
    <pattern id='wujunmin" & SELECTEDVALUE('榜单'[名次]) & "' patternUnits='userSpaceOnUse' width='80' height='120'>
        <image xlink:href='" & SELECTEDVALUE('榜单'[封面]) & "'  x='0' y='0' width='80' height='120'/>
    </pattern>
    </defs>
    <path d='M40,0 L80,60 40,120 0,60Z'
        stroke='white' stroke-width='1' fill='url(#wujunmin" & SELECTEDVALUE('榜单'[名次]) & "' />
</svg>"

image引用图像URL，包裹在pattern中，下方的path为菱形，对path施加前面定义的pattern。这里菱形可以是别的形状。

需要注意的是，如果图像来源是网络URL，这种方式仅可以使用HTML Content之类的第三方视觉对象展示。如果图像是本地图片转Base64，内置表格矩阵也可以展示。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2024-03-21，如有侵权请联系 cloudcommunity@tencent.com 删除