网页端图像固定拉伸方法、装置、计算机设备及存储介质制造方法及图纸

本发明专利技术公开了一种网页端图像固定拉伸方法、装置、计算机设备及存储介质，涉及基架运维技术领域。该网页端图像固定拉伸方法包括：网页端获取目标图像的宽度、高度、左定值、右定值以及旋转角度；网页端接收拉伸指令，基于目标图像的宽度、高度、左定值、右定值以及旋转角度，根据拉伸指令确定拉伸后目标图像的中心点，其中，拉伸后目标图像的中心点与拉伸后目标图像在无旋转角度时的中心点的坐标相同；网页端根据拉伸后目标图像的中心点，确定拉伸后目标图像的宽度、高度、左定值和右定值，并在显示界面上展示拉伸后的目标图像。采用该网页端图像固定拉伸方法能够实现网页端图像的固定拉伸。

Fixed drawing method, device, computer equipment and storage medium of web image

【技术实现步骤摘要】
网页端图像固定拉伸方法、装置、计算机设备及存储介质
本专利技术涉及基架运维
，尤其涉及一种网页端图像固定拉伸方法、装置、计算机设备及存储介质。
技术介绍
目前，在网页端实现图像的固定拉伸仍然是个问题(其中，固定拉伸是指在图像拉伸过程中图像存在固定不动的点，例如在拖动图像左上角顶点时，图像的右下角的顶点固定不动)，原因是网页端浏览器上绘制图像的原理所造成的。浏览器绘制图像的原理是先把图像当成无旋转角度的矩形图像，根据其宽高、左定值和右定值在浏览器文档中绘制出来，若图像有旋转角度，再基于绘制后的图像中心点做旋转，最后再呈现给用户。该整个流程都是在毫秒级别下完成，如果按照网页端浏览器上绘制图像的原理，将无法有效实现图像的固定拉伸。
技术实现思路
有鉴于此，本专利技术实施例提供了一种网页端图像固定拉伸方法、装置、计算机设备及存储介质，用以解决目前网页端无法实现图像固定拉伸的问题。第一方面，本专利技术实施例提供了一种网页端图像固定拉伸方法，包括：网页端获取目标图像的宽度、高度、左定值、右定值以及旋转角度；网页端接收拉伸指令，基于所述目标图像的宽度、高度、左定值、右定值以及旋转角度，根据所述拉伸指令确定拉伸后所述目标图像的中心点，其中，拉伸后所述目标图像的中心点与拉伸后所述目标图像在无旋转角度时的中心点的坐标相同；网页端根据拉伸后所述目标图像的中心点，确定拉伸后所述目标图像的宽度、高度、左定值和右定值；网页端根据拉伸后所述目标图像的宽度、高度、左定值、右定值以及所述旋转角度重新绘制所述目标图像，在显示界面上展示拉伸后的所述目标图像。如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述网页端获取目标图像的宽度、高度、左定值、右定值以及旋转角度，包括：网页端向网页服务器发起图像参数获取请求，其中，所述图像参数获取请求包括所述目标图像的图像标识，所述图像参数包括所述目标图像的宽度、高度、左定值、右定值以及旋转角度；网页端通过所述网页服务器对所述图像参数获取请求的响应，根据所述图像标识在所述网页服务器中查找所述目标图像的图像参数，通过所述网页服务器对所述目标图像的图像参数的发送，获取所述目标图像的宽度、高度、左定值、右定值以及旋转角度。如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述拉伸指令包括光标起始坐标和光标停止坐标，所述基于所述目标图像的宽度、高度、左定值、右定值以及旋转角度，根据所述拉伸指令确定拉伸后所述目标图像的中心点，包括：基于所述目标图像的宽度、高度、左定值、右定值，根据所述旋转角度确定目标图像的顶点坐标；将所述光标起始坐标与所述目标图像的顶点坐标进行匹配，将匹配成功的所述目标图像的顶点坐标作为目标拉伸顶点坐标；确定对角顶点坐标，其中，所述对角顶点坐标为与所述目标拉伸顶点坐标为对角关系的顶点坐标；计算得到经过所述目标拉伸顶点坐标和所述对角顶点坐标的目标直线；过所述光标停止坐标，作与所述目标图像的宽所在直线相平行的第一直线，以及作与所述目标图像的高所在直线相平行的第二直线，得到所述第一直线、第二直线与所述目标直线的两个候选交点；计算所述两个候选交点的坐标到所述光标起始坐标的欧式距离，取欧式距离大的候选交点作为目标交点；取所述目标交点的坐标和所述对角顶点坐标的中点作为拉伸后所述目标图像的中心点。如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，网页端根据拉伸后所述目标图像的中心点，确定拉伸后所述目标图像的宽度、高度、左定值和右定值，包括：网页端根据所述旋转角度确定所述目标交点在无旋转角度时的坐标；网页端计算坐标转换后的所述目标交点和拉伸后所述目标图像的中心点的横坐标之间差值的绝对值，作为第一绝对值，将所述第一绝对值乘以2后得到拉伸后所述目标图像的宽度；网页端计算坐标转换后的所述目标交点和拉伸后所述目标图像的中心点的纵坐标之间差值的绝对值，作为第二绝对值，将所述第二绝对值乘以2后得到拉伸后所述目标图像的高度；网页端对坐标转换后的所述目标交点的坐标和所述对角顶点坐标之间横坐标的大小进行比较，将横坐标小的点的横坐标确定为左定值，将横坐标大的点的横坐标确定为右定值。如上所述的方面和任一可能的实现方式，进一步提供一种实现方式，所述网页端根据拉伸后所述目标图像的宽度、高度、左定值、右定值以及所述旋转角度重新绘制所述目标图像，包括：网页端根据拉伸后目标图像的宽度、高度、左定值、右定值在浏览器文档中绘制无旋转角度的矩形图像；网页端采用所述旋转角度，以所述拉伸后所述目标图像的中心点为旋转中心对所述矩形图像进行绘制。第二方面，本专利技术实施例提供了一种网页端图像固定拉伸装置，包括：图像参数获取模块，用于网页端获取目标图像的宽度、高度、左定值、右定值以及旋转角度；中心点确定模块，用于网页端接收拉伸指令，基于所述目标图像的宽度、高度、左定值、右定值以及旋转角度，根据所述拉伸指令确定拉伸后所述目标图像的中心点，其中，拉伸后所述目标图像的中心点与拉伸后所述目标图像在无旋转角度时的中心点的坐标相同；拉伸后图像参数确定模块，用于网页端根据拉伸后所述目标图像的中心点，确定拉伸后所述目标图像的宽度、高度、左定值和右定值；绘制模块，用于网页端根据拉伸后所述目标图像的宽度、高度、左定值、右定值以及所述旋转角度重新绘制所述目标图像，在显示界面上展示拉伸后的所述目标图像。第三方面，一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述网页端图像固定拉伸方法的步骤。第四方面，本专利技术实施例提供了一种计算机可读存储介质，包括：计算机程序，所述计算机程序被处理器执行时实现上述网页端图像固定拉伸方法的步骤。在本专利技术实施例中，首先网页端获取目标图像的宽度、高度、左定值、右定值以及旋转角度，以确定目标图像的图像参数，便于实时根据图像参数对目标图像大小进行调整；接着网页端接收用户输入的拉伸指令，基于目标图像的宽度、高度、左定值、右定值以及旋转角度，根据拉伸指令确定拉伸后目标图像的中心点，其中，拉伸后目标图像的中心点与拉伸后目标图像在无旋转角度时的中心点的坐标相同，通过优先确定拉伸后目标图像的中心点，能够保证拉伸后目标图像在旋转前后的中心点不变，使得拉伸后目标图像能够在拉伸时实现某些点的固定不动；然后网页端根据拉伸后目标图像的中心点，确定拉伸后目标图像的宽度、高度、左定值和右定值，再根据拉伸后目标图像的宽度、高度、左定值、右定值以及旋转角度重新绘制目标图像，在显示界面上展示拉伸后的目标图像，能够使网页端浏览器绘制时先以目标图像的中心点为参考点进行绘制，使得采用该方法重新绘制目标图像时能够实现目标图像的固定拉伸。【附图说明】为了更清楚地说明本专利技术实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而本文档来自技高网...

【技术保护点】
1.一种网页端图像固定拉伸方法，其特征在于，所述方法包括：/n网页端获取目标图像的宽度、高度、左定值、右定值以及旋转角度；/n网页端接收拉伸指令，基于所述目标图像的宽度、高度、左定值、右定值以及旋转角度，根据所述拉伸指令确定拉伸后所述目标图像的中心点，其中，拉伸后所述目标图像的中心点与拉伸后所述目标图像在无旋转角度时的中心点的坐标相同；/n网页端根据拉伸后所述目标图像的中心点，确定拉伸后所述目标图像的宽度、高度、左定值和右定值；/n网页端根据拉伸后所述目标图像的宽度、高度、左定值、右定值以及所述旋转角度重新绘制所述目标图像，在显示界面上展示拉伸后的所述目标图像。/n

【技术特征摘要】
1.一种网页端图像固定拉伸方法，其特征在于，所述方法包括：
网页端获取目标图像的宽度、高度、左定值、右定值以及旋转角度；
网页端接收拉伸指令，基于所述目标图像的宽度、高度、左定值、右定值以及旋转角度，根据所述拉伸指令确定拉伸后所述目标图像的中心点，其中，拉伸后所述目标图像的中心点与拉伸后所述目标图像在无旋转角度时的中心点的坐标相同；
网页端根据拉伸后所述目标图像的中心点，确定拉伸后所述目标图像的宽度、高度、左定值和右定值；
网页端根据拉伸后所述目标图像的宽度、高度、左定值、右定值以及所述旋转角度重新绘制所述目标图像，在显示界面上展示拉伸后的所述目标图像。


2.根据权利要求1所述的方法，其特征在于，所述网页端获取目标图像的宽度、高度、左定值、右定值以及旋转角度，包括：
网页端向网页服务器发起图像参数获取请求，其中，所述图像参数获取请求包括所述目标图像的图像标识，所述图像参数包括所述目标图像的宽度、高度、左定值、右定值以及旋转角度；
网页端通过所述网页服务器对所述图像参数获取请求的响应，根据所述图像标识在所述网页服务器中查找所述目标图像的图像参数，通过所述网页服务器对所述目标图像的图像参数的发送，获取所述目标图像的宽度、高度、左定值、右定值以及旋转角度。


3.根据权利要求1所述的方法，其特征在于，所述拉伸指令包括光标起始坐标和光标停止坐标，所述基于所述目标图像的宽度、高度、左定值、右定值以及旋转角度，根据所述拉伸指令确定拉伸后所述目标图像的中心点，包括：
基于所述目标图像的宽度、高度、左定值、右定值，根据所述旋转角度确定目标图像的顶点坐标；
将所述光标起始坐标与所述目标图像的顶点坐标进行匹配，将匹配成功的所述目标图像的顶点坐标作为目标拉伸顶点坐标；
确定对角顶点坐标，其中，所述对角顶点坐标为与所述目标拉伸顶点坐标为对角关系的顶点坐标；
计算得到经过所述目标拉伸顶点坐标和所述对角顶点坐标的目标直线；
过所述光标停止坐标，作与所述目标图像的宽所在直线相平行的第一直线，以及作与所述目标图像的高所在直线相平行的第二直线，得到所述第一直线、第二直线与所述目标直线的两个候选交点；
计算所述两个候选交点的坐标到所述光标起始坐标的欧式距离，取欧式距离大的候选交点作为目标交点；
取所述目标交点的坐标和所述对角顶点坐标的中点作为拉伸后所述目标图像的中心点。


4.根据权利要求3所述的方法，其特征在于，所述网页端根据拉伸后所述目标图像的中心点，确定拉伸后所述目标图像的宽度、高度、左定值和右定值，包括：
网页端根据所述旋转角度确定所述目标交点在无旋转角度时的坐标；
网页端计算坐标转换后的所述目标交点和拉伸后所述目标图像的中心点的横坐标之间差值的绝对值，作为第一绝对值，将所述第一绝对值乘以2后得到拉伸后所述目标图像的宽度；
网页端计算坐标转换后的所述目标交点和拉伸后所述目标图像的中心点的纵坐标之间差值的绝对值，作为第二绝对值，将所述第二绝对值乘以2后得到拉伸后所述目标图像的高度；
网页端对坐标转换后的所述目标交点的坐标和所述对角顶点坐标之间横坐标的大小进行比较，将横坐标小的点的横坐标确定为左定值，将横坐标大的点的横坐标确定为右定值。


5.根据权利要求1所述的方法，其特征在于，所述网页端根据拉伸后所述目标图像的宽度、高度、左定值、右定值以及所述旋转角度重新绘制所述目标图像，包括：
网页端根据拉伸后目标图像的宽度、...

【专利技术属性】
技术研发人员：李清鹏，
申请(专利权)人：平安科技深圳有限公司，
类型：发明
国别省市：广东;44