CN109299412A - 应用于web端的图片预处理方法 - Google Patents

应用于web端的图片预处理方法 Download PDF

Info

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
Application number
CN201810973089.8A
Other languages
English (en)
Other versions
CN109299412B (zh
Inventor
戴德军
刘江东
詹伟
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Sichuan Ai Chuang Technology Co Ltd
Original Assignee
Sichuan Ai Chuang Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Sichuan Ai Chuang Technology Co Ltd filed Critical Sichuan Ai Chuang Technology Co Ltd
Priority to CN201810973089.8A priority Critical patent/CN109299412B/zh
Publication of CN109299412A publication Critical patent/CN109299412A/zh
Application granted granted Critical
Publication of CN109299412B publication Critical patent/CN109299412B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T3/00—Geometric image transformation in the plane of the image
    • G06T3/40—Scaling the whole image or part thereof
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T3/00—Geometric image transformation in the plane of the image
    • G06T3/60—Rotation of a whole image or part 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

Abstract

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

Description

应用于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端根据对待处理图片进行的移动和/或裁剪操作，实时修改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端的图片预处理方法，其特征在于：所述步骤二中的输入设备采用鼠标和/或键盘和/或触摸屏。
CN201810973089.8A 2018-08-24 2018-08-24 应用于web端的图片预处理方法 Active CN109299412B (zh)

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)

* Cited by examiner, † Cited by third party
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)

* Cited by examiner, † Cited by third party
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 积成电子股份有限公司 一种用能信息采集系统配电接线图的绘制方法

Patent Citations (12)

* Cited by examiner, † Cited by third party
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)

* Cited by examiner, † Cited by third party
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)

* Cited by examiner, † Cited by third party
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) 增强现实数字内容搜索和尺寸确定技术
US10460483B2 (en) Tool for creating and editing arcs
US8446411B2 (en) Adaptive image rendering and use of imposter
US8711147B2 (en) Method and system for generating and displaying an interactive dynamic graph view of multiply connected objects
WO2015078222A1 (zh) 一种用于提供搜索结果的方法与设备
US11657255B2 (en) Controlling a neural network through intermediate latent spaces
US20140325418A1 (en) Automatically manipulating visualized data based on interactivity
CN103472985A (zh) 一种三维购物平台显示界面的用户编辑方法
WO2018072386A1 (zh) 一种渲染方法及装置
US20220270310A1 (en) Web-based digital image editing in real time utilizing a latent vector stream renderer and an image modification neural network
CN112783398A (zh) 显示控制与交互控制方法、设备、系统及存储介质
CN107528897A (zh) 一种云盘缩略图生成方法及装置
US9405446B1 (en) Efficient and interactive presentation of item images
EP3332405A1 (en) Systems and methods for interactively presenting a visible portion of a rendering surface on a user device
CN105336001A (zh) 三维地图场景的漫游方法及装置
WO2022166595A1 (zh) 基于图片的视频生成方法、装置
CN101923564A (zh) 一种基于图片缓存提升网页呈现三维物体性能的方法
TW201312381A (zh) 合成版面配置的視覺化及編輯
CN115878935A (zh) 一种图表的局部刷新方法、系统、装置、设备及介质
US11132821B1 (en) Providing graphical user interface tools for efficiently selecting handles in vector artwork on touch-based devices
CN114827722A (zh) 视频预览方法、装置、设备及存储介质
CN114546311A (zh) 用于智慧课堂的多显示终端投屏系统和方法
CN111582418A (zh) 一种ar虚拟说明书的滑动展示方法

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