使用CSS的clip-path實現圖片剪下效果

webhmy發表於2021-01-12
CSS

最近有個業務需求：校對圖片文字資訊，如下圖所示，當滑鼠點選文字中某一行的時候，文字上會顯示對應行圖片同時左側會顯示對應位置的畫框。

clip-path

今天要說的主題是：如何剪下原圖中的部分圖片？（前提是後端已經傳給了我們對應行在圖片上的位置）面對這種需求有多種解決方案，可以用canvas的drawImage的API，也可以用svg來實現。但是總感覺這樣會有點小題大作了，所以想完全使用CSS來實現。於是開始一番調研，找到了我們們今天要說的主角：
clip-path 屬性，關於它的使用方法，網上搜一搜一大堆，具體使用引數可參考這篇文章：
https://css-tricks.com/almanac/properties/c/clip-path/

clip-path：直譯過來就是裁剪路徑，使用SVG或形狀定義一個HTML元素的可見區域的方法。

這裡直接根據介面返回的x,y,w,h 引數使用polygon的方法進行切圖

imgStyle = `clip-path: polygon(${x}px ${y}px, ${x + w}px ${y}px, ${x + w}px ${y + h}px, ${x}px ${y + h}px);`


問題1：去除切圖外的空白區域

如上圖，可以看出已切出行資訊，但是依然是原圖的大小，切除外的部分顯示空白。但我實際想要的其實就只有那剪下的一行，那麼如何把其餘空白的大部分去除呢？

  1. 首先將切圖顯示在想在的位置上：新增位移(translate)屬性
imgStyle = `clip-path: polygon(${x}px ${y}px, ${x + w}px ${y}px, ${x + w}px ${y + h}px, ${x}px ${y + h}px); transform: translate(-${x}px, -${y}px);`


2、只顯示切圖部分：去除空白部分
簡單點，有些問題我們們想簡單點~~~哈哈哈，直接使用一個父級div包裹img標籤，給div設定寬高即可！


問題2： 原圖很大寬高很大，切出來的圖也就很大怎麼辦？

雖然現在顯示的是一行圖片了，但是因為我們使用的原圖很大，切出來的圖片顯示的很大，想變小一點，這時候就又需要結合css的縮放（scale）和位移(translate)屬性了~

divStyle = `width: ${w}px; height: ${0.5 * h}px; transform: scale(0.5) translate(-${0.5 * w}px, -${0.25 * h}px)`;


相關文章