已知数据来源坐标，计算其在图片上的定位问题

有时候会遇到关于图片上一些数据的定位问题，这个时候需要后台提供的数据有哪些呢？

1. 原图的宽（因为前端显示图片的时候会因为自适应，或者有图片缩放功能，所以原图的宽必须知道,记做pWidth）
2. 关于定位区域的坐标（记做 top,left,right,bottom）

接下来就是关于具体坐标的计算，我们生成一个红色的div框，来框出具体的坐标

1.定义一个div ，设置定位position:absolute，设置样式border:2px solid red
2.计算这个div的宽和高
宽 = right-left
高 = bottom-top
3.定位出div的左边距和上边距
左边距 = left(当前图片的宽/pWidth)
上边距 = top*(当前图片的宽/pWidth)
4.这样子这个矩形框就画出来了*

下面附上具体代码

let pWidth //原图的宽
let imgwidth = $('.xxx').find('img').css("width").split("px")[0]; //当前图片的宽
let str = "<div style='position:absolute;width:" + Number(rows.right - rows.left) * Number(imgwidth
 / pWidth) + "px;height:" + Number(rows.bottom - rows.top) * Number(imgwidth / pWidth) +
  "px;border:2px solid red;top:" + Number(rows.top) * Number(imgwidth / pWidth) + "px;left:" +
   Number(rows.left) * Number(imgwidth / this.set.width) + "px'></div>"
$('.xxx').append(str)