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

最近有個業務需求：校對圖片文本信息，以下圖所示，當鼠標點擊文本中某一行的時候，文本上會顯示對應行圖片同時左側會顯示對應位置的畫框。

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

二、只顯示切圖部分：去除空白部分
簡單點，有些問題我們想簡單點~~~哈哈哈，直接使用一個父級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)`;