最近有个业务需求:校对图片文本信息,如下图所示,当鼠标点击文本中某一行的时候,文本上会显示对应行图片同时左侧会显示对应位置的画框。

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



使用CSS的clip-path实现图片剪切效果的更多相关文章

  1. 用JavaScript实现图片剪切效果

    学会如何获取鼠标的坐标位置以及监听鼠标的按下.拖动.松开等动作事件,从而实现拖动鼠标来改变图片大小. 还可以学习css中的clip属性. 一.CSS实现图片不透明及裁剪效果. 图片剪切三层结构 1.第 ...

  2. CSS技巧!鼠标经过图片抖动效果

    把代码加到style.css(模板的主css里面): /**图片抖动**/ img:hover{-webkit-animation: tada 1s .2s ease both;-moz-animat ...

  3. 图片上传,图片剪切jquery.imgareaselect

    ---恢复内容开始--- <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  4. 图片剪切之Croppic插件

    前几天做图片上传时需要进行图片的剪切和缩放,上网查找时找到了这个插件.样式很好看,功能也很OK.但是网上都是php进行后台处理图片的例子,然后只好慢慢琢磨C#的处理.插件地址是:http://www. ...

  5. CSS元素:clip属性作用说明

    clip属性是一个比较有用的属性,但往往在实际应用中,并不多见,介绍的也很少.应用clip属性需要注意的两点: 一.clip属性必须和定位属性postion一起使用才能生效. 二.clip裁切的计算坐 ...

  6. layui+croppers完成图片剪切上传

    不多说直接上代码: 前台代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" / ...

  7. CSS裁剪clip

    × 目录 [1]定义 [2]RECT [3]应用 前面的话 CSS裁剪clip这个属性平时用的不多,但其实它并不是CSS3的新属性,很早就开始出现了.本文将介绍关于clip属性的相关知识 定义 一个绝 ...

  8. 超出区域文字显示为省略号或者剪切效果——CSS的生僻操作

    每门语言总有那么一些不太常用,却又不可或缺的语法操作.下面说一下,在HTML文件中,如何设置用 "省略号" 和 "剪切" 代替大量文字的效果. 以下是HTML的 ...

  9. android 7.0以上共享文件(解决调用系统照相和图片剪切出现的FileUriExposedException崩溃问题)

    在android7.0开始试共享“file://”URI 将会导致引发 FileUriExposedException. 如果应用需要与其他应用共享私有文件,则应该使用 FileProvider, F ...

随机推荐

  1. 数组的翻转(非reverse)

    var arr = [1, 5, 8, 9, 6, 3]; var arr2 = []; while (arr.length) { var temp = arr.pop(); arr2.push(te ...

  2. C++编程指南续(10-11)

    十.类的继承与组合 对象(Object)是类(Class)的一个实例(Instance).如果将对象比作房子,那么类就是房子的设计图纸.所以面向对象设计的重点是类的设计,而不是对象的设计. 对于C++ ...

  3. hash相关

    转译☞:https://www.cs.rice.edu/~as143/COMP441_Spring17/scribe/lect4.pdf 1 大规模图片检索问题 基于树模型的算法在分类跟聚类中很受欢迎 ...

  4. Tensorflow学习笔记No.10

    多输出模型 使用函数式API构建多输出模型完成多标签分类任务. 数据集下载链接:https://pan.baidu.com/s/1JtKt7KCR2lEqAirjIXzvgg 提取码:2kbc 1.读 ...

  5. 侧边栏js样式代码

    <!-- menu html --> <div class="container"> <div class="menu-wrap optis ...

  6. 20201203-5 批量发送 email【】

    1-1 批量发送 email 1 from openpyxl import load_workbook 2 import smtplib 3 from email.mime.text import M ...

  7. 二、TestNG的Hello World

    创建第一个TestNG的例子 1.创建一个TestNG的类 选择项目路径"右键"--NEW--Other 选择TestNG cLass(如果没有这个选项是testng没有配置成功) ...

  8. python序列(七)序列操作的常用内置函数

    1.len(列表):返回:列表中的元素个数,同样适用于元组.字典.集合.字符串等. max(列表).min(列表):返回列表中的最大或最小元素同样适用于元组.字典.集合.range对象等. sum(列 ...

  9. Spring0-前言序

    Spring的简介 一般情况下我们说的Spring是指SpringFramework,而SpringFramework实际上只是Spring家族中的一个分支而已,这在下一章会介绍 Spring实际上也 ...

  10. Future.get(并发之从任务中产生返回值)

    import java.util.ArrayList; import java.util.List; import java.util.concurrent.Callable; import java ...