应用于web端的图片预处理方法技术

本发明专利技术涉及图片预处理技术领域，解决了现有应用于web端的图片预处理方法对计算机性能消耗过大，导致操作时出现图片粘滞的问题。技术方案概括为：应用于web端的图片预处理方法，通过div盒子模型在web端显示待处理图片，web端根据对待处理图片进行的移动、裁剪、旋转及缩放操作，实时修改div盒子模型背景图片的显示位置数据、旋转数据或缩放比例数据并保存，并实时更新显示出操作后的待处理图片，经操作得到需要的图片后，利用canvas画布根据上述保存的div数据绘制需要的图片得到最终canvas画布对象再加以保存或上传。有益效果是：本发明专利技术节约了计算机性能，使得操作时图片不会粘滞。特别适用于在web端进行图片预处理。

【技术实现步骤摘要】
应用于web端的图片预处理方法
本专利技术涉及图片预处理
，特别涉及基于web端的图片预处理

技术介绍
目前应用于web端的图片预处理方法，在对图片的处理过程中采用canvas画布对图片进行重绘来跟随处理过程的变化，由于canvas画布在绘制时，每次都是绘制一整张画布，这样就导致在图片快速变化时非常消耗计算机性能，例如在快速移动图片时，canvas画布的重绘频率会达到毫秒级别，以毫秒级别的频率重绘canvas画布是十分消耗性能的，在这种情况下就会出现图片粘滞的现象，比如在快速移动图片时表现为图片不跟手、卡顿。
技术实现思路
本专利技术要解决现有应用于web端的图片预处理方法对计算机性能消耗过大，导致操作时出现图片粘滞现象的问题，提出一种应用于web端的图片预处理方法。为解决上述技术问题，本专利技术采用的技术方案是：应用于web端的图片预处理方法，包括以下步骤：步骤一、通过web端选择待处理图片，然后建立待处理图片的div盒子模型，将待处理图片作为div盒子模型的背景图片，并通过展示div盒子模型的背景图片在web端上显示出待处理图片；步骤二、根据输入设备的信号，对待处理图片进行缩放和/或旋转和/或移动和/或裁剪操作；步骤三、web端根据对待处理图片进行的移动和/或裁剪操作，实时修改div盒子模型背景图片的显示位置数据并保存，根据对待处理图片进行的旋转操作，实时修改div盒子模型背景图片的旋转数据并保存，根据对待处理图片进行的缩放操作，实时修改div盒子模型背景图片的缩放比例数据并保存，通过展示div盒子模型的背景图片在web端上实时更新显示出操作后的待处理图片；步骤四、若操作后的待处理图片不是需要的图片，则重复步骤二和步骤三继续进行操作，若操作后的待处理图片是需要的图片，则在确定后执行步骤五；步骤五、web端利用canvas画布根据待处理图片和步骤三中的显示位置数据进行绘制得到canvas画布对象，并根据步骤三中的旋转数据和缩放比例数据对得到的canvas画布对象进行旋转和缩放，得到最终效果与需要的图片完全一样的最终canvas画布对象；步骤六、将最终canvas画布对象保存到本地或上传到服务器。作为进一步优化，所述步骤六中将最终canvas画布对象上传到服务器的方法采用：将最终canvas画布对象转换成blob图片对象，然后将blob图片对象进行压缩并转码为base64或arrayBuffer数据上传至服务器，服务器保存base64或arrayBuffer数据并将数据存储地址返回给web端，web端根据该数据存储地址显示上传的图片。通过上述方法直接将最终canvas画布对象进行处理并上传到服务器，同时在web端预览上传到服务器中的图片，实现了图片预处理及上传的一站式操作，避免了在上传图片前还要先从本地选择文件，使得上传图片更加方便。作为进一步优化，所述步骤六中将最终canvas画布对象转换为图片格式保存到本地。将预处理得到的图片保存到本地，方便查看和使用。作为进一步优化，所述步骤二中的输入设备采用鼠标和/或键盘和/或触摸屏。采用目前常用的输入设备，用户操作起来熟练，对图片的预处理操作更快速。有益效果是：本专利技术进行的预处理操作是针对div盒子模型背景图片进行的，改变的是div盒子模型背景图片的位置信息，没有对待处理图片进行重新绘制，经过一系列操作得到需要的图片后再利用canvas画布进行绘制，极大的节约了计算机性能，避免了操作时出现图片粘滞现象，比如使得快速移动图片时不会卡顿和不跟手。本专利技术特别适用于在web端进行图片预处理。具体实施方式下面结合实施例进一步说明本专利技术的技术方案。本专利技术的技术方案是：应用于web端的图片预处理方法，包括以下步骤：步骤一、通过web端选择待处理图片，然后建立待处理图片的div盒子模型，将待处理图片作为div盒子模型的背景图片，并通过展示div盒子模型的背景图片在web端上显示出待处理图片；步骤二、根据输入设备的信号，对待处理图片进行缩放和/或旋转和/或移动和/或裁剪操作；步骤三、web端根据对待处理图片进行的移动和/或裁剪操作，实时修改div盒子模型背景图片的显示位置数据并保存，根据对待处理图片进行的旋转操作，实时修改div盒子模型背景图片的旋转数据并保存，根据对待处理图片进行的缩放操作，实时修改div盒子模型背景图片的缩放比例数据并保存，通过展示div盒子模型的背景图片在web端上实时更新显示出操作后的待处理图片；步骤四、若操作后的待处理图片不是需要的图片，则重复步骤二和步骤三继续进行操作，若操作后的待处理图片是需要的图片，则在确定后执行步骤五；步骤五、web端利用canvas画布根据待处理图片和步骤三中的显示位置数据进行绘制得到canvas画布对象，并根据步骤三中的旋转数据和缩放比例数据对得到的canvas画布对象进行旋转和缩放，得到最终效果与需要的图片完全一样的最终canvas画布对象；步骤六、将最终canvas画布对象保存到本地或上传到服务器。本专利技术所述的div盒子模型，其中div是层叠样式表中的定位技术，全称DIVision，即为划分，有时可以称其为图层，div块的布局采用嵌套方式，在本领域div嵌套也称为盒子模型。针对现有技术中存在的问题，上述步骤利用一个设置了背景图片的div盒子模型来代替canvas画布，因为div的拖动不需要重新绘制，只是位置的改变，即使以毫秒级的频率改变div的位置，其对计算机性能的消耗并不大，这样就解决了重复绘制canvas画布出现不跟手、卡顿的问题，最后在得到需要的图片后才使用canvas画布进行绘制。对上述各步骤进一步优化，步骤六中将最终canvas画布对象上传到服务器的方法可以采用：将最终canvas画布对象转换成blob图片对象，然后将blob图片对象进行压缩并转码为base64或arrayBuffer数据上传至服务器，服务器保存base64或arrayBuffer数据并将数据存储地址返回给web端，web端根据该数据存储地址显示上传的图片，通过上述方法直接将最终canvas画布对象进行处理并上传到服务器，同时在web端预览上传到服务器中的图片，实现了图片预处理及上传的一站式操作，避免了在上传图片前还要先从本地选择文件，使得上传图片更加方便。步骤六中还可以将最终canvas画布对象转换为图片格式保存到本地，将预处理得到的图片保存到本地，方便查看和使用。步骤二中的输入设备可以采用鼠标和/或键盘和/或触摸屏，采用目前常用的输入设备，用户操作起来熟练，对图片的预处理操作更快速。实施例一本例以预处理并上传图片为例具体说明。在本例中需要通过web端上传图片，首先通过web端从本地选择待处理图片，然后web端建立待处理图片的div盒子模型，将待处理图片作为div盒子模型的背景图片，并通过展示div盒子模型的背景图片在web端上显示出待处理图片；然后用户使用鼠标对待处理图片进行缩放和/或旋转和/或移动和/或裁剪操作，其中采用鼠标进行上述操作是现有技术，这里不再赘述；web端根据上述进行的缩放和/或旋转和/或移动和/或裁剪操作，对div盒子模型的相关数据进行更新，具体的是：web端根据对待处理图片进行的移动和/或裁剪操作，实时修本文档来自技高网...

【技术保护点】
1.应用于web端的图片预处理方法，其特征在于：包括以下步骤：步骤一、通过web端选择待处理图片，然后建立待处理图片的div盒子模型，将待处理图片作为div盒子模型的背景图片，并通过展示div盒子模型的背景图片在web端上显示出待处理图片；步骤二、根据输入设备的信号，对待处理图片进行缩放和/或旋转和/或移动和/或裁剪操作；步骤三、web端根据对待处理图片进行的移动和/或裁剪操作，实时修改div盒子模型背景图片的显示位置数据并保存，根据对待处理图片进行的旋转操作，实时修改div盒子模型背景图片的旋转数据并保存，根据对待处理图片进行的缩放操作，实时修改div盒子模型背景图片的缩放比例数据并保存，通过展示div盒子模型的背景图片在web端上实时更新显示出操作后的待处理图片；步骤四、若操作后的待处理图片不是需要的图片，则重复步骤二和步骤三继续进行操作，若操作后的待处理图片是需要的图片，则在确定后执行步骤五；步骤五、web端利用canvas画布根据待处理图片和步骤三中的显示位置数据进行绘制得到canvas画布对象，并根据步骤三中的旋转数据和缩放比例数据对得到的canvas画布对象进行旋转和缩放，得到最终效果与需要的图片完全一样的最终canvas画布对象；步骤六、将最终canvas画布对象保存到本地或上传到服务器。...

【技术特征摘要】
1.应用于web端的图片预处理方法，其特征在于：包括以下步骤：步骤一、通过web端选择待处理图片，然后建立待处理图片的div盒子模型，将待处理图片作为div盒子模型的背景图片，并通过展示div盒子模型的背景图片在web端上显示出待处理图片；步骤二、根据输入设备的信号，对待处理图片进行缩放和/或旋转和/或移动和/或裁剪操作；步骤三、web端根据对待处理图片进行的移动和/或裁剪操作，实时修改div盒子模型背景图片的显示位置数据并保存，根据对待处理图片进行的旋转操作，实时修改div盒子模型背景图片的旋转数据并保存，根据对待处理图片进行的缩放操作，实时修改div盒子模型背景图片的缩放比例数据并保存，通过展示div盒子模型的背景图片在web端上实时更新显示出操作后的待处理图片；步骤四、若操作后的待处理图片不是需要的图片，则重复步骤二和步骤三继续进行操作，若操作后的待处理图片是需要的图片，则在确定后执行步骤五；步骤五、web端利用canvas画布根据待处理图片和步骤三中的显示位置数...

【专利技术属性】
技术研发人员：戴德军，刘江东，詹伟，
申请(专利权)人：四川爱创科技有限公司，
类型：发明
国别省市：四川,51