【翻译】借助SVG实现背景透明JPG图片

友情提醒,技术相关以为言论仅供参考。

翻译正文

我是个对自己颜值很自信的人,每天叫醒我起床的不是闹钟,也不是梦想,而是自己的颜值,每每想到我长得如此俊俏,都会从梦中笑醒。

但是,人在江湖飘,哪有不挨刀。

经常出入一些社交场合,难免和和其他的人和物一起照个相什么的。

如果和我合影的是迪丽热巴这样的美女也就算了,但经常在我左右的都是大老爷们,有时候,甚至还有其他完全不知形象为何物的汪科物种,此时我多希望照片中就我一个人,就像下面这样,只有一个美美的我。

美美的我

该死,直接框个框后面还露出了一双手,右侧还有半个汪星人的身子,完全就是麻子的脸——满是缺点了嘛。

好在我和外面那些只会用美图秀秀的芸芸粉黛不一样,我会真正的PS技术,看我,钢笔工具玩得溜溜的:

钢笔抠图

把我美好形象外的其他都是都抠图扣掉,啊哈,顿时世界就清爽了。

png抠图

但是,我发现了一件不太妙的事情,这左下角显示的PNG-24的尺寸-1013k,我去,那就几乎就是1M了啊,虽然说现在取消了漫游费,但是这个流量一点关系都没有啊,再美的照片如果加载不出来也是白搭啊。

不急,还有一种PNG-8格式,尺寸应该可以小一点,果不其然,少了差不多75%,厉害了我的图!

PNG8图片大小

但是,这毛到天际的效果是怎么回事?Oh, No! 这问题可比图片尺寸大严重多了,我宁可显示慢也不要显示出来一副麻子脸。

如果我保存为JPG格式呢?喔噢,尺寸更棒棒哒~

JPEG格式的尺寸截图

但是,背景不是透明的,不就意味着我只能假装在雪山度假吗?Oh, No! 天要绝我吗,请让我哭一会儿~

慢着,我突然灵光一闪!我们是不是可以使用代码模拟钢笔路径的剪裁效果呢?比方说使用前面多篇文章介绍过的clip-path属性,虽然说现在CSS只支持多边形剪裁,还不支持任意路径的剪裁,但是现在前端新宠SVG支持啊!

所以,我们只需要下面这两样东西就可以得到尺寸小而美靓照了:

  1. JPG图片
  2. 剪裁路径

第一步,图片SVG载入,例如:

<svg>
  <image xlink:href="/images/chris.jpg" x="0" y="0">
<svg>

第二步,把刚刚使用钢笔工具在勾勒的路径导出到Illustrator中:

路径导出

此时,我们就有了路径,然后就可以轻松导出为SVG啦!

AI中的路径示意

导出的路径代码示意如下:

导出的路径代码示意

然后,在SVG中使用<path>作为检查路径,放在<clipPath>中,同时,将此剪裁路径应用到我们的<image>元素上,如下:

<svg viewBox="0 0 921.17 1409.71">
  <defs>
    <clipPath id="chris-clip">
      <path d=" ... " />
    </clipPath>
  </defs>
  <image xlink:href="/images/chris.jpg" clip-path="url(#chris-clip)" x="0" y="0" width="921" height="1409">
<svg>

结果,当当当当~~

最终的效果gif演示

在任何背景下都美美的我就这样出来了。

唉,明早又是注定要被帅醒的一天,真是没办法。

啊~又被自己帅醒

(本篇完)

分享到:

标签: , , , , ,

赞助商推荐(我也要赞助)

想学到点真东西? ×
如果你有1~3年前端开发经验,不妨 ×
想找个师兄入门前端?不妨 ×
想快速入门前端? ×


发表评论(目前16 条评论)

  1. 遨游四海求其凰说道:

    难以置信地点进原文看了下,果然金哥你如今是这样的画风了啊。。

  2. 涤纶裤说道:

    鑫哥你什么时候改用苹果的系统了

  3. 大白说道:

    鑫哥有个问题是本来你PS里面的钢笔勾勒的图像是带杂边的,如果你用这个路径作为svg的clippath的话图片切割之后会有杂边或锯齿么?你最后的图片由于太小无法看清是否有杂边或锯齿,忘解答一下

  4. 风君子说道:

    请问博主首页的美女时钟代码是不允许调用的吗?新手求指点,谢谢

  5. bestRenekton说道:

    这风格。。。鱼哥不会是你自己写的吧

  6. peng说道:

    应该带上兼容性说明

  7. Pandamo说道:

    腋下和裤裆的演示暴露了

  8. jone说道:

    好像很厉害的样子,试一下

  9. cshenger说道:

    这翻译我还以为张老师自己说自己帅呢,and外国也有美图秀秀吗?666

  10. 我是名称说道:

    漫游费还没有取消。。不高兴【表情】

  11. meepo说道:

    最后图里拿的是肥皂吗

  12. 系心说道:

    哈哈哈哈哈哈厉害了,回头我也试试!

  13. 刘东奇说道:

    gay里gay气

  14. retro说道:

    small tips.

  15. imys说道:

    有意思