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

webhmy發表於2021-01-12

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

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)`;


相關文章