人物图片的局部显示

人物图片的局部显示

介绍

公司项目中需要做一个人脸识别（展示任务图片人脸区域的模块），经过技术谈论。由算法人员那边提供一个接口给出人脸在图片中的位置，大致包括，大图的脸轮廓，每个脸轮廓上的眼睛、嘴巴，眉毛，鼻子的位置（以每张图片到每个位置的像素点返回）大致展示如下

技术方案

1. canvas局部画
2. 直接通过css控制部分区域显示

• 由于时间关系，和后期人员的维护，选用css方案

重要实现部分

图片需完整放进图片框中

图片需要完整放进盒子中，一般图片要不就宽>高,要不就宽<高,项目设计搞给的盒子是宽>高,假设图片是属于第二种，图片高度更改为盒子的高度，图片的宽度按照高度之比等比缩小

缩略图中显示个人脸颊

缩略图中的个人脸颊是通过放大图片和定位图片的位置来实现的
首先是一个固定的盒子，项目中为 90 * 98

之后是设定显示个人脸颊盒子大小，先设宽度为外围盒子的宽度，其高度为外围盒子的宽度（90）和接口返回脸颊的宽度之比 * 接口返回脸颊的高度，以这个高度和外围的盒子相比，如大，则宽度设为外围盒子的高度（98）和接口返回脸颊的高度之比 * 接口返回脸颊的高度，改盒子和外围盒子居中对齐，并设为overflow: 'hidden'


最后是放大图片和定位图片达到局部显示的效果。图片放大是：原图 * 外围盒子的宽度（90）和接口返回脸颊的宽度之比, 定位的距离为是left为接口返回的各个脸颊left * 外围盒子的宽度（90）和接口返回脸颊的宽度之比， top为 接口返回的各个脸颊top * 外围盒子的宽度（90）和接口返回脸颊的宽度之比

大图中的线框和点

直接按照接口返回的数据进行描点（需注意需要按比例来）