CN109299412A - 应用于web端的图片预处理方法 - Google Patents
应用于web端的图片预处理方法 Download PDFInfo
- Publication number
- CN109299412A CN109299412A CN201810973089.8A CN201810973089A CN109299412A CN 109299412 A CN109299412 A CN 109299412A CN 201810973089 A CN201810973089 A CN 201810973089A CN 109299412 A CN109299412 A CN 109299412A
- Authority
- CN
- China
- Prior art keywords
- picture
- canvas
- web terminal
- processed
- data
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 29
- 238000010422 painting Methods 0.000 claims abstract description 15
- 238000004321 preservation Methods 0.000 claims abstract description 6
- 238000009966 trimming Methods 0.000 claims description 10
- 230000000694 effects Effects 0.000 claims description 4
- 230000006835 compression Effects 0.000 claims description 2
- 238000007906 compression Methods 0.000 claims description 2
- 230000009286 beneficial effect Effects 0.000 abstract description 2
- 239000004744 fabric Substances 0.000 description 4
- 230000006399 behavior Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000007781 pre-processing 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 true CN109299412A (zh) | 2019-02-01 |
CN109299412B 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) |
Cited By (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111104631A (zh) * | 2019-11-30 | 2020-05-05 | 四川商通实业有限公司 | 一种Webp图片格式转换方法 |
CN111831945A (zh) * | 2020-07-13 | 2020-10-27 | 泰康保险集团股份有限公司 | 图片获取方法及装置 |
CN112269957A (zh) * | 2020-11-11 | 2021-01-26 | 北京联创信安科技股份有限公司 | 图片处理方法、装置、设备及存储介质 |
CN114549303A (zh) * | 2022-01-14 | 2022-05-27 | 北京百度网讯科技有限公司 | 图像显示、处理方法、装置、设备和存储介质 |
Citations (12)
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 |
US20120266061A1 (en) * | 2004-06-25 | 2012-10-18 | Apple Inc. | Procedurally Expressing Graphic Objects For Web Pages |
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 | 深圳英飞拓科技股份有限公司 | 一种图像绘制方法和装置 |
CN106775600A (zh) * | 2015-11-19 | 2017-05-31 | 北京国双科技有限公司 | HTML5 canvas画布的处理方法及装置 |
CN106997348A (zh) * | 2016-01-22 | 2017-08-01 | 腾讯科技(深圳)有限公司 | 一种数据绘制方法和装置 |
CN107239287A (zh) * | 2017-06-07 | 2017-10-10 | 福建中金在线信息科技有限公司 | 一种网页显示方法、装置、电子设备及存储介质 |
CN107450906A (zh) * | 2017-06-12 | 2017-12-08 | 积成电子股份有限公司 | 一种用能信息采集***配电接线图的绘制方法 |
-
2018
- 2018-08-24 CN CN201810973089.8A patent/CN109299412B/zh active Active
Patent Citations (12)
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 |
US20120266061A1 (en) * | 2004-06-25 | 2012-10-18 | Apple Inc. | Procedurally Expressing Graphic Objects For Web Pages |
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 | 阿里巴巴集团控股有限公司 | 页面生成方法及装置 |
CN106775600A (zh) * | 2015-11-19 | 2017-05-31 | 北京国双科技有限公司 | HTML5 canvas画布的处理方法及装置 |
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 | 福建中金在线信息科技有限公司 | 一种网页显示方法、装置、电子设备及存储介质 |
CN107450906A (zh) * | 2017-06-12 | 2017-12-08 | 积成电子股份有限公司 | 一种用能信息采集***配电接线图的绘制方法 |
Non-Patent Citations (4)
Title |
---|
ERIC SAUND ET AL.: "Perceptually-Supported Image Editing of Text and Graphics", 《PROCEEDINGS OF THE 16TH ANNUAL ACM SYMPOSIUM ON USER INTERFACE SOFTWARE AND TECHNOLOGY》 * |
PAVEL POKORNÝ: "Determining Traffic Levels in Cities Using Google Maps", 《2017 FOURTH INTERNATIONAL CONFERENCE ON MATHEMATICS AND COMPUTERS IN SCIENCES AND IN INDUSTRY》 * |
谷伟: "基于HTML5 Canvas的客户端图表技术研究", 《信息技术》 * |
黄亮: "基于WEB的多媒体信息在线编辑器研究", 《中国优秀硕士学位论文全文数据库 信息科技辑》 * |
Cited By (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111104631A (zh) * | 2019-11-30 | 2020-05-05 | 四川商通实业有限公司 | 一种Webp图片格式转换方法 |
CN111831945A (zh) * | 2020-07-13 | 2020-10-27 | 泰康保险集团股份有限公司 | 图片获取方法及装置 |
CN112269957A (zh) * | 2020-11-11 | 2021-01-26 | 北京联创信安科技股份有限公司 | 图片处理方法、装置、设备及存储介质 |
CN114549303A (zh) * | 2022-01-14 | 2022-05-27 | 北京百度网讯科技有限公司 | 图像显示、处理方法、装置、设备和存储介质 |
CN114549303B (zh) * | 2022-01-14 | 2023-10-20 | 北京百度网讯科技有限公司 | 图像显示、处理方法、装置、设备和存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN109299412B (zh) | 2022-04-05 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN109299412A (zh) | 应用于web端的图片预处理方法 | |
US9947119B2 (en) | User interface framework for viewing large scale graphs on the web | |
CN112771536B (zh) | 增强现实数字内容搜索和尺寸确定技术 | |
US8711147B2 (en) | Method and system for generating and displaying an interactive dynamic graph view of multiply connected objects | |
CN104394422A (zh) | 一种视频分割点获取方法及装置 | |
US20180061092A1 (en) | Tool for Creating and Editing Arcs | |
US20090044133A1 (en) | Updating Content Display Based on Cursor Position | |
WO2015078222A1 (zh) | 一种用于提供搜索结果的方法与设备 | |
CN103324436B (zh) | 一种任务处理方法及装置 | |
WO2017202294A1 (zh) | 图片动态展示方法、电子设备和存储介质 | |
US11657255B2 (en) | Controlling a neural network through intermediate latent spaces | |
WO2011156138A2 (en) | Adaptive image rendering and use of imposter | |
CN103472985A (zh) | 一种三维购物平台显示界面的用户编辑方法 | |
KR20160003683A (ko) | 시각화된 데이터를 상호작용에 기초하여 자동으로 조작하는 기법 | |
EP4198962A1 (en) | Systems and methods for interactively presenting a visible portion of a rendering surface on a user device | |
US20230386114A1 (en) | Web-based digital image editing in real time utilizing a latent vector stream renderer and an image modification neural network | |
CN107528897A (zh) | 一种云盘缩略图生成方法及装置 | |
JP2003348306A (ja) | ネットワーク上の高品質巨大映像伝送システム及びその伝送方法 | |
US9405446B1 (en) | Efficient and interactive presentation of item images | |
US10395412B2 (en) | Morphing chart animations in a browser | |
TW201312381A (zh) | 合成版面配置的視覺化及編輯 | |
US11132821B1 (en) | Providing graphical user interface tools for efficiently selecting handles in vector artwork on touch-based devices | |
CN111582418B (zh) | 一种ar虚拟说明书的滑动展示方法 | |
CN114827722A (zh) | 视频预览方法、装置、设备及存储介质 | |
CN114546311A (zh) | 用于智慧课堂的多显示终端投屏***和方法 |
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 |