[发明专利]图像处理方法和装置

权利要求书

1.一种图像处理方法，其特征在于，包括：

获取前端界面容器中显示区域的第一宽高比和待显示的目标图像的第二宽高比，其中所述显示区域配置并显示画布；

比较所述第一宽高比与所述第二宽高比的大小；

如果所述第一宽高比大于所述第二宽高比，则配置所述画布的高度等于所述显示区域的高度，所述画布的宽度等于所述显示区域的高度与所述第二宽高比的乘积；

如果所述第一宽高比小于所述第二宽高比，则配置所述画布的宽度等于所述显示区域的宽度，所述画布的高度等于所述显示区域的宽度与所述第二宽高比的商；

将所述目标图像填充到配置后的画布中；

当鼠标处于所述画布上时，根据鼠标在前端界面的位置坐标、所述容器在所述前端界面上的坐标、所述目标图像的缩放倍数、以及所述目标图像在所述容器中的显示宽度和真实宽度之比、和所述目标图像在所述容器中的显示高度和真实高度之比，计算所述鼠标在所述目标图像中所在位置的像素坐标；

在所述前端界面的第一预设位置显示所述像素坐标。

2.根据权利要求1所述的方法，其特征在于，所述方法进一步包括：

当所述显示区域的宽度和/或高度发生变化时，返回执行所述获取前端界面容器中显示区域的第一宽高比和待显示的目标图像的第二宽高比的步骤，直至将所述目标图像填充到重新配置后的画布中。

3.根据权利要求1或2所述的方法，其特征在于，所述方法进一步包括：响应第一触发信号，对所述目标图像执行第一操作，所述第一操作至少包括：保持所述目标图像的第二宽高比不变在所述显示区域放大所述目标图像、保持所述目标图像的第二宽高比不变在所述显示区域缩小所述目标图像、在所述显示区域拖拽所述目标图像、复位所述目标图像或下载所述目标图像。

4.根据权利要求1或2所述的方法，其特征在于，所述像素坐标中的横坐标与所述鼠标在前端界面的位置坐标中的横坐标呈正相关关系，与所述容器在所述前端界面上的坐标中的横坐标、所述目标图像的缩放倍数、所述目标图像在所述容器中的显示宽度和真实宽度之比呈负相关关系；

所述像素坐标中的纵坐标与所述鼠标在前端界面的位置坐标中的纵坐标呈正相关关系，与所述容器在所述前端界面上的坐标中的纵坐标、所述目标图像的缩放倍数、所述目标图像在所述容器中的显示高度和真实高度之比呈负相关关系。

5.根据权利要求4所述的方法，其特征在于，将所述目标图像填充到配置后的画布中之后，所述方法还包括：

当鼠标位置处于所述画布上时，获取所述画布的绘图上下文，将所述鼠标位置在所述目标图像中所在位置的像素坐标、所述目标图像在所述容器中的显示宽度和真实宽度之比、以及所述目标图像在所述容器中的显示高度和真实高度之比输入所述绘图上下文的API接口getImageData函数，得到所述鼠标位置在所述目标图像中所在位置的像素值；

在所述前端界面的第二预设位置显示所述像素值。

6.一种图像处理方法，其特征在于，包括：

获取前端界面容器中显示区域的第一宽高比和待显示的目标图像的第二宽高比，其中所述显示区域配置并显示画布；

比较所述第一宽高比与所述第二宽高比的大小；

如果所述第一宽高比大于所述第二宽高比，则配置所述画布的高度等于所述显示区域的高度，所述画布的宽度等于所述显示区域的高度与所述第二宽高比的乘积；

如果所述第一宽高比小于所述第二宽高比，则配置所述画布的宽度等于所述显示区域的宽度，所述画布的高度等于所述显示区域的宽度与所述第二宽高比的商；

将所述目标图像填充到配置后的画布中；

当鼠标位置处于所述画布上时，获取所述画布的绘图上下文，将所述鼠标位置在所述目标图像中所在位置的像素坐标、所述目标图像在所述容器中的显示宽度和真实宽度之比、以及所述目标图像在所述容器中的显示高度和真实高度之比输入所述绘图上下文的API接口getImageData函数，得到所述鼠标位置在所述目标图像中所在位置的像素值；

在所述前端界面的第二预设位置显示所述像素值。