最近有個業務需求：校對圖片文本信息，如下圖所示，當鼠標點擊文本中某一行的時候，文本上會顯示對應行圖片同時左側會顯示對應位置的畫框。
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：去除切圖外的空白區域
如上圖，可以看出已切出行信息，但是依然是原圖的大小，切除外的部分顯示空白。但我實際想要的其實就只有那剪切的一行，那么如何把其余空白的大部分去除呢？
- 首先將切圖顯示在想在的位置上：添加位移(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)`;
2.25日 優化一波
上面的方法對於單行文字是比較友好的，但是對於大的圖片，scale顯示0.5還是大，所以最近設置了一個兼容了大圖片的方法，下面的方法更nice~
let scale = (type && type === "graph" && w > 500) ? 0.3 : 0.5;;
let imgStyle = `clip-path: polygon(${x}px ${y}px, ${x + w}px ${y}px, ${x + w}px ${y + h}px, ${x}px ${y + h}px, ${x}px ${y}px); transform: translate(-${x}px, -${y}px);`
let divStyle = `width: ${w}px; height: ${h}px; transform: scale(${scale}); transform-origin:0 0; overflow: hidden`;
let wrapperStyle = `width: ${w * scale}px; height: ${h * scale}px; overflow: hidden`;
imagesArr.push(`<div class="comparison-picture" style="${wrapperStyle}"><div style="${divStyle}"><img src="${self.fileUrl}" style="${imgStyle}"></div></div>`)