CN109299412B - 应用于web端的图片预处理方法 - Google Patents
应用于web端的图片预处理方法 Download PDFInfo
- Publication number
- CN109299412B CN109299412B CN201810973089.8A CN201810973089A CN109299412B CN 109299412 B CN109299412 B CN 109299412B CN 201810973089 A CN201810973089 A CN 201810973089A CN 109299412 B CN109299412 B CN 109299412B
- Authority
- CN
- China
- Prior art keywords
- picture
- processed
- data
- box model
- div
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000007781 pre-processing Methods 0.000 title claims abstract description 27
- 238000000034 method Methods 0.000 title claims abstract description 25
- 238000005520 cutting process Methods 0.000 claims abstract description 11
- 238000013500 data storage Methods 0.000 claims description 8
- 230000000694 effects Effects 0.000 claims description 4
- 230000009286 beneficial effect Effects 0.000 abstract description 2
- 238000005457 optimization Methods 0.000 description 3
- 238000006243 chemical reaction Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T3/00—Geometric image transformations in the plane of the image
- G06T3/40—Scaling of whole images or parts thereof, e.g. expanding or contracting
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T3/00—Geometric image transformations in the plane of the image
- G06T3/60—Rotation of whole images or parts thereof
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T9/00—Image coding
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T2210/00—Indexing scheme for image generation or computer graphics
- G06T2210/22—Cropping
Landscapes
- Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Theoretical Computer Science (AREA)
- Multimedia (AREA)
- Processing Or Creating Images (AREA)
- Image Processing (AREA)
- Editing Of Facsimile Originals (AREA)
Abstract
本发明涉及图片预处理技术领域,解决了现有应用于web端的图片预处理方法对计算机性能消耗过大,导致操作时出现图片粘滞的问题。技术方案概括为:应用于web端的图片预处理方法,通过div盒子模型在web端显示待处理图片,web端根据对待处理图片进行的移动、裁剪、旋转及缩放操作,实时修改div盒子模型背景图片的显示位置数据、旋转数据或缩放比例数据并保存,并实时更新显示出操作后的待处理图片,经操作得到需要的图片后,利用canvas画布根据上述保存的div数据绘制需要的图片得到最终canvas画布对象再加以保存或上传。有益效果是:本发明节约了计算机性能,使得操作时图片不会粘滞。特别适用于在web端进行图片预处理。
Description
技术领域
本发明涉及图片预处理技术领域,特别涉及基于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端根据对待处理图片进行的移动和/或裁剪操作,实时修改div盒子模型背景图片的显示位置数据并保存,根据对待处理图片进行的旋转操作,实时修改div盒子模型背景图片的旋转数据并保存,根据对待处理图片进行的缩放操作,实时修改div盒子模型背景图片的缩放比例数据并保存;并且通过展示div盒子模型的背景图片在web端上实时更新显示出操作后的待处理图片;
待处理图片经过上述缩放和/或旋转和/或移动和/或裁剪操作后,用户判断操作后的待处理图片是否是用户需要的图片,若操作后的待处理图片不是需要的图片,则重复上述缩放和/或旋转和/或移动和/或裁剪操作,直到满足用户的需求,若操作后的待处理图片是需要的图片,则用户在web端点击上传按钮进行确定,确定后进行下述转化上传过程。
web端根据div的显示位置数据确定canvas画布绘制待处理图片的起止位置,然后利用canvas画布根据待处理图片和起止位置进行绘制得到canvas画布对象,并根据div的旋转数据和缩放比例数据对得到的canvas画布对象进行旋转和缩放,就得到了最终效果与需要的图片完全一样的最终canvas画布对象;然后将最终canvas画布对象转换成blob图片对象,然后将blob图片对象进行压缩并转码为base64数据上传至服务器,服务器保存base64数据并将数据存储地址返回给web端,web端根据该数据存储地址显示出上传的图片。
实施例二
本例以预处理并保存图片为例具体说明。
本例与实施例一相比不同之处在于:得到需要的图片后,用户在web端点击保存按钮进行确定,确定后再选择保存路径及保存格式,选择完成后web端利用canvas画布绘制出最终canvas画布对象,然后将最终canvas画布对象转换成jpg等选定的图片格式文件并存储到选定的存储路径下。
Claims (4)
1.应用于web端的图片预处理方法,其特征在于:包括以下步骤:
步骤一、通过web端选择待处理图片,然后建立待处理图片的div盒子模型,将待处理图片作为div盒子模型的背景图片,并通过展示div盒子模型的背景图片在web端上显示出待处理图片;
步骤二、根据输入设备的信号,对待处理图片进行缩放和/或旋转和/或移动和/或裁剪操作;
步骤三、web端根据对待处理图片进行的移动和/或裁剪操作,实时修改div盒子模型背景图片的显示位置数据并保存,根据对待处理图片进行的旋转操作,实时修改div盒子模型背景图片的旋转数据并保存,根据对待处理图片进行的缩放操作,实时修改div盒子模型背景图片的缩放比例数据并保存,通过展示div盒子模型的背景图片在web端上实时更新显示出操作后的待处理图片;
步骤四、若操作后的待处理图片不是需要的图片,则重复步骤二和步骤三继续进行操作,若操作后的待处理图片是需要的图片,则在确定后执行步骤五;
步骤五、web端利用canvas画布根据待处理图片和步骤三中的显示位置数据进行绘制得到canvas画布对象,并根据步骤三中的旋转数据和缩放比例数据对得到的canvas画布对象进行旋转和缩放,得到最终效果与需要的图片完全一样的最终canvas画布对象;
步骤六、将最终canvas画布对象保存到本地或上传到服务器。
2.如权利要求1所述的应用于web端的图片预处理方法,其特征在于:所述步骤六中将最终canvas画布对象上传到服务器的方法采用:将最终canvas画布对象转换成blob图片对象,然后将blob图片对象进行压缩并转码为base64或arrayBuffer数据上传至服务器,服务器保存base64或arrayBuffer数据并将数据存储地址返回给web端,web端根据该数据存储地址显示上传的图片。
3.如权利要求1所述的应用于web端的图片预处理方法,其特征在于:所述步骤六中将最终canvas画布对象转换为图片格式保存到本地。
4.如权利要求1所述的应用于web端的图片预处理方法,其特征在于:所述步骤二中的输入设备采用鼠标和/或键盘和/或触摸屏。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810973089.8A CN109299412B (zh) | 2018-08-24 | 2018-08-24 | 应用于web端的图片预处理方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810973089.8A CN109299412B (zh) | 2018-08-24 | 2018-08-24 | 应用于web端的图片预处理方法 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN109299412A CN109299412A (zh) | 2019-02-01 |
CN109299412B true CN109299412B (zh) | 2022-04-05 |
Family
ID=65165553
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201810973089.8A Active CN109299412B (zh) | 2018-08-24 | 2018-08-24 | 应用于web端的图片预处理方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN109299412B (zh) |
Families Citing this family (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111104631B (zh) * | 2019-11-30 | 2023-06-20 | 四川商通实业有限公司 | 一种Webp图片格式转换方法 |
CN111831945A (zh) * | 2020-07-13 | 2020-10-27 | 泰康保险集团股份有限公司 | 图片获取方法及装置 |
CN112269957A (zh) * | 2020-11-11 | 2021-01-26 | 北京联创信安科技股份有限公司 | 图片处理方法、装置、设备及存储介质 |
CN114549303B (zh) * | 2022-01-14 | 2023-10-20 | 北京百度网讯科技有限公司 | 图像显示、处理方法、装置、设备和存储介质 |
Citations (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US6396500B1 (en) * | 1999-03-18 | 2002-05-28 | Microsoft Corporation | Method and system for generating and displaying a slide show with animations and transitions in a browser |
CN102866886A (zh) * | 2012-09-04 | 2013-01-09 | 北京航空航天大学 | 一种基于Web的算法动画可视化开发系统 |
CN103455571A (zh) * | 2013-08-19 | 2013-12-18 | 小米科技有限责任公司 | 网页中的图片显示方法、装置及终端 |
CN104598103A (zh) * | 2014-12-30 | 2015-05-06 | 北京奇虎科技有限公司 | 一种页面中处理图形的方法和装置 |
CN105868201A (zh) * | 2015-01-20 | 2016-08-17 | 阿里巴巴集团控股有限公司 | 页面生成方法及装置 |
CN106027608A (zh) * | 2016-05-05 | 2016-10-12 | 武汉斗鱼网络科技有限公司 | 一种图片上传方法、客户端及服务器 |
CN106648508A (zh) * | 2016-12-02 | 2017-05-10 | 深圳英飞拓科技股份有限公司 | 一种图像绘制方法和装置 |
CN106997348A (zh) * | 2016-01-22 | 2017-08-01 | 腾讯科技(深圳)有限公司 | 一种数据绘制方法和装置 |
CN107239287A (zh) * | 2017-06-07 | 2017-10-10 | 福建中金在线信息科技有限公司 | 一种网页显示方法、装置、电子设备及存储介质 |
Family Cites Families (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US8239749B2 (en) * | 2004-06-25 | 2012-08-07 | Apple Inc. | Procedurally expressing graphic objects for web pages |
CN106775600A (zh) * | 2015-11-19 | 2017-05-31 | 北京国双科技有限公司 | HTML5 canvas画布的处理方法及装置 |
CN107450906B (zh) * | 2017-06-12 | 2020-07-31 | 积成电子股份有限公司 | 一种用能信息采集系统配电接线图的绘制方法 |
-
2018
- 2018-08-24 CN CN201810973089.8A patent/CN109299412B/zh active Active
Patent Citations (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US6396500B1 (en) * | 1999-03-18 | 2002-05-28 | Microsoft Corporation | Method and system for generating and displaying a slide show with animations and transitions in a browser |
CN102866886A (zh) * | 2012-09-04 | 2013-01-09 | 北京航空航天大学 | 一种基于Web的算法动画可视化开发系统 |
CN103455571A (zh) * | 2013-08-19 | 2013-12-18 | 小米科技有限责任公司 | 网页中的图片显示方法、装置及终端 |
CN104598103A (zh) * | 2014-12-30 | 2015-05-06 | 北京奇虎科技有限公司 | 一种页面中处理图形的方法和装置 |
CN105868201A (zh) * | 2015-01-20 | 2016-08-17 | 阿里巴巴集团控股有限公司 | 页面生成方法及装置 |
CN106997348A (zh) * | 2016-01-22 | 2017-08-01 | 腾讯科技(深圳)有限公司 | 一种数据绘制方法和装置 |
CN106027608A (zh) * | 2016-05-05 | 2016-10-12 | 武汉斗鱼网络科技有限公司 | 一种图片上传方法、客户端及服务器 |
CN106648508A (zh) * | 2016-12-02 | 2017-05-10 | 深圳英飞拓科技股份有限公司 | 一种图像绘制方法和装置 |
CN107239287A (zh) * | 2017-06-07 | 2017-10-10 | 福建中金在线信息科技有限公司 | 一种网页显示方法、装置、电子设备及存储介质 |
Non-Patent Citations (2)
Title |
---|
Perceptually-Supported Image Editing of Text and Graphics;Eric Saund et al.;《Proceedings of the 16th annual ACM symposium on User interface software and technology》;20031102;183-192 * |
基于HTML5 Canvas的客户端图表技术研究;谷伟;《信息技术》;20130925;第37卷(第9期);107-110 * |
Also Published As
Publication number | Publication date |
---|---|
CN109299412A (zh) | 2019-02-01 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN109299412B (zh) | 应用于web端的图片预处理方法 | |
US11392575B2 (en) | Techniques for collapsing views of content items in a graphical user interface | |
US11954313B2 (en) | Browsing and selecting content items based on user gestures | |
US11210115B2 (en) | Data visualization user interface with summary popup that includes interactive objects | |
AU2008284179B2 (en) | Updating content display based on cursor position | |
US8711152B2 (en) | Animation control apparatus, animation control method, and non-transitory computer readable recording medium | |
EP3155507B1 (en) | Storage system user interface with floating file collection | |
US20090083655A1 (en) | Method and tool for virtual desktop management | |
US11494965B2 (en) | Hand drawn animation motion paths | |
US11734805B2 (en) | Utilizing context-aware sensors and multi-dimensional gesture inputs to efficiently generate enhanced digital images | |
US9105094B2 (en) | Image layers navigation | |
US20130093782A1 (en) | Color Selection and Chart Styles | |
TW201445421A (zh) | 基於互動自動地操縱視覺化資料 | |
CN106919301A (zh) | 壁纸预览方法和系统以及壁纸更换方法和系统 | |
US10304225B2 (en) | Chart-type agnostic scene graph for defining a chart | |
US11086498B2 (en) | Server-side chart layout for interactive web application charts | |
US10395412B2 (en) | Morphing chart animations in a browser | |
JP2011014076A (ja) | 情報処理装置、文書拡大表示方法、プログラム及び記録媒体 | |
US11132821B1 (en) | Providing graphical user interface tools for efficiently selecting handles in vector artwork on touch-based devices | |
US9613395B2 (en) | Operation chart rescaling | |
CN107665107A (zh) | 图表的多屏交互方法及装置、存储介质、移动设备 | |
US11908493B2 (en) | Single clip segmentation of media | |
KR101037130B1 (ko) | 플래시 콘텐츠 제작 방법 및 이를 수행하기 위한 플러그 인 프로그램이 기록된 기록매체 | |
CN110941374B (zh) | 一种多显示器显示鹰眼图的方法、设备、介质、装置 | |
US20230205393A1 (en) | Dynamic visualization of an object tracked by an object tracking system in a graphical user interface |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |