CN112632442A - 一种基于Web图像分割功能与设计方法 - Google Patents

一种基于Web图像分割功能与设计方法 Download PDF

Info

Publication number
CN112632442A
CN112632442A CN202011567313.7A CN202011567313A CN112632442A CN 112632442 A CN112632442 A CN 112632442A CN 202011567313 A CN202011567313 A CN 202011567313A CN 112632442 A CN112632442 A CN 112632442A
Authority
CN
China
Prior art keywords
image
server
web
user
browser
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.)
Pending
Application number
CN202011567313.7A
Other languages
English (en)
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.)
Guangzhou Faisco Internet Technology Co ltd
Original Assignee
Guangzhou Faisco Internet 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 Guangzhou Faisco Internet Technology Co ltd filed Critical Guangzhou Faisco Internet Technology Co ltd
Priority to CN202011567313.7A priority Critical patent/CN112632442A/zh
Publication of CN112632442A publication Critical patent/CN112632442A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T7/00—Image analysis
    • G06T7/10—Segmentation; Edge detection
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2200/00—Indexing scheme for image data processing or generation, in general
    • G06T2200/24—Indexing scheme for image data processing or generation, in general involving graphical user interfaces [GUIs]

Abstract

本发明属于Web应用领域，涉及一种基于Web图像分割功能与设计方法，步骤为：1)用户在网络浏览器中点击上传图像按钮并发起请求；2)反向代理服务器对请求进行负载均衡，分发到相应的网页服务器；3)在网页服务器中调用上传接口把图像存储到存储服务器，存储完毕后网页服务器返回资源id到浏览器终端；4)浏览器根据返回结果进入图像编辑器；5)用户在浏览器终端的图像编辑器中对图像分割进行设置；6)用户在浏览器终端设置完毕后点击下载；7)下载请求发起，经过一系列处理后，把分割好的图像资源返回给用户。本发明则是在线进行图像分割，有效解决终端用户无需下载软件，并且能通过简单几步操作达到自定义分割图像的效果。

Description

一种基于Web图像分割功能与设计方法
技术领域
本发明属于Web应用领域，涉及一种基于Web图像分割功能与设计方法。
背景技术
目前在支持图像分割功能的网站或者app中，仅支持按行或者列把图片平均分割若干份。对于某些场景的用户而言，需要不等份分割。有些专门的作图工具是能满足不等份分割的要求，但需要下载软件或者对小白用户而言操作成本过高。因此目前的平均分割方法有比较大的局限性。
上述缺陷是非常明显的。比如用户有需要自定义尺寸图像分割需求，目前是无法满足场景要求，或者说要下载ps等专门的作图软件才能满足需求；另外，对于一些小白用户而言，使用ps无疑是有一定的操作难度。
发明内容
本发明针对上述的问题，提供了一种基于Web图像分割功能与设计方法，即用户只需在本网站上传需要图像分割的图片，通过鼠标简单拖动分割线对图像进行分割尺寸设置，点击下载按钮便能按照用户设定的分割尺寸对图像进行分割。
为了达到上述目的，本发明采用的技术方案为，
一种基于Web图像分割功能与设计方法，步骤如下：
1)用户在网络浏览器web-brower终端点击上传图像按钮，由浏览器发起ajax请求；
2)反向代理服务器nginx对请求进行负载均衡，分发到相应的网页服务器resin；
3)在网页服务器resin中调用上传接口把图像存储到存储服务器storage-server，存储完毕后网页服务器resin返回资源id到浏览器终端；
4)浏览器根据返回结果进入图像编辑器；
5)用户在浏览器终端的图像编辑器中对图像分割要求进行设置；
6)用户在浏览器终端设置完毕后点击下载；
7)下载请求发起，经过反向代理服务器nginx、网页服务器resin和特征服务器feature-server一系列处理后，把分割好的图像资源返回给用户。
作为优选，所述存储服务器主要用于存储用户上传的图像。
作为优选，所述特征服务器主要处理图像分割逻辑。
作为优选，所述终端为给用户提供上传图片和用户设置分割规则的交互界面。
作为优选，所述步骤4)、5)、6)中的处理方式均采用弹窗的方式，其弹窗用于展示用户上传的图像，用户对图像设置自定义分割规则和提供下载按钮。
作为优选，所述步骤7)中的终端选择下载，则是通过后端服务器打包返回分割好的图像给用户。
与现有技术相比，本发明的优点和积极效果在于，
1、本发明则是在线进行图像分割；只需在本网站上传需要图像分割的图片，通过鼠标简单拖动分割线对图像进行分割尺寸设置，点击下载按钮便能按照用户设定的分割尺寸对图像进行分割；有效解决终端用户无需下载软件，并且能通过简单几步操作达到自定义分割图像的效果。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1为一种基于Web图像分割功能与设计方法中系统部分的架构图；
图2为一种基于Web图像分割功能与设计方法的流程图。
具体实施方式
为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和实施例对本发明做进一步说明。需要说明的是，在不冲突的情况下，本申请的实施例及实施例中的特征可以相互组合。
在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是，本发明还可以采用不同于在此描述的其他方式来实施，因此，本发明并不限于下面公开说明书的具体实施例的限制。
实施例1，本发明是提供一种基于Web图像分割功能与设计方法，主要分为上传图像、编辑图像、下载编辑后图像等几部分。
如图2所示，图像分割功能和设计方法，包括以下步骤：
S1、用户在网络浏览器web-brower终端点击上传图像按钮，由浏览器发起ajax请求；
S2、反向代理服务器nginx对请求进行负载均衡，分发到相应的网页服务器resin；
S3、在网页服务器resin中调用上传接口把图像存储到存储服务器storage-server，存储完毕后网页服务器resin返回资源id到浏览器终端；
S4、浏览器根据返回结果进入图像编辑器；
S5、用户在浏览器终端的图像编辑器中对图像分割要求进行设置；
S6、用户在浏览器终端设置完毕后点击下载；
S7、下载请求发起，经过反向代理服务器nginx、网页服务器resin和特征服务器feature-server一系列处理后，把分割好的图像资源返回给用户。
如图1所示，通过上述的描述，不难看出，本发明的方法中包括了网页浏览器web-browser、网页服务器web-server、反向代理服务器nginx、存储服务器storage-server及特征服务器feature-server四种重要的处理器。其网页浏览器web-browser层通过jQuery+网页布局样式div+设置布局格式css提供一键上传图像按钮；其反向代理服务器nginx对请求进行负载均衡；所述网页服务器web-server采用resin服务器，其特征服务器feature-server是用java编写的独立运行网络进程，其存储服务器storage-server是物理存储空间，由特征服务器feature-server通过特定接口对其进行访问，获取存储服务器storage-server指定资源，并使用python pillow库对图像进行分割。
以上所述，仅是本发明的较佳实施例而已，并非是对本发明作其它形式的限制，任何熟悉本专业的技术人员可能利用上述揭示的技术内容加以变更或改型为等同变化的等效实施例应用于其它领域，但是凡是未脱离本发明技术方案内容，依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化与改型，仍属于本发明技术方案的保护范围。

Claims (6)

1.一种基于Web图像分割功能与设计方法，其特征在于，步骤如下：
1)用户在网络浏览器web-brower终端点击上传图像按钮，由浏览器发起ajax请求；
2)反向代理服务器nginx对请求进行负载均衡，分发到相应的网页服务器resin；
3)在网页服务器resin中调用上传接口把图像存储到存储服务器storage-server，存储完毕后网页服务器resin返回资源id到浏览器终端；
4)浏览器根据返回结果进入图像编辑器；
5)用户在浏览器终端的图像编辑器中对图像分割要求进行设置；
6)用户在浏览器终端设置完毕后点击下载；
7)下载请求发起，经过反向代理服务器nginx、网页服务器resin和特征服务器feature-server一系列处理后，把分割好的图像资源返回给用户。
2.根据权利要求1所述的一种基于Web图像分割功能与设计方法，其特征在于，所述存储服务器主要用于存储用户上传的图像，步骤3。
3.根据权利要求2所述的一种基于Web图像分割功能与设计方法，其特征在于，所述特征服务器主要处理图像分割逻辑，步骤7。
4.根据权利要求3所述的一种基于Web图像分割功能与设计方法，其特征在于，所述终端为给用户提供上传图片和用户设置分割规则的交互界面，步骤1、4。
5.根据权利要求4所述的一种基于Web图像分割功能与设计方法，其特征在于，所述步骤4)、5)、6)中的处理方式均采用弹窗的方式，其弹窗用于展示用户上传的图像，用户对图像设置自定义分割规则和提供下载按钮。
6.根据权利要求5所述的一种基于Web图像分割功能与设计方法，其特征在于，所述步骤7)中的终端选择下载，则是通过后端服务器打包返回分割好的图像给用户。
CN202011567313.7A 2020-12-25 2020-12-25 一种基于Web图像分割功能与设计方法 Pending CN112632442A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011567313.7A CN112632442A (zh) 2020-12-25 2020-12-25 一种基于Web图像分割功能与设计方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011567313.7A CN112632442A (zh) 2020-12-25 2020-12-25 一种基于Web图像分割功能与设计方法

Publications (1)

Publication Number Publication Date
CN112632442A true CN112632442A (zh) 2021-04-09

Family

ID=75325378

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011567313.7A Pending CN112632442A (zh) 2020-12-25 2020-12-25 一种基于Web图像分割功能与设计方法

Country Status (1)

Country Link
CN (1) CN112632442A (zh)

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2008120517A1 (ja) * 2007-03-29 2008-10-09 Sapience Corporation 画像表示更新方法およびサーバ・クライアントシステム並びに描画操作エコーバックスクリプト
CN102054285A (zh) * 2010-12-31 2011-05-11 上海为舟网络科技有限公司 在线动态图像编辑系统
US20140075335A1 (en) * 2012-09-11 2014-03-13 Lucid Software, Inc. Image editing and sharing
CN105094563A (zh) * 2015-08-11 2015-11-25 成都视达科信息技术有限公司 一种图片裁剪方法及裁剪系统
CN109194716A (zh) * 2018-08-06 2019-01-11 深圳市华讯方舟太赫兹科技有限公司 一种处理请求的方法、系统、服务器及存储装置

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2008120517A1 (ja) * 2007-03-29 2008-10-09 Sapience Corporation 画像表示更新方法およびサーバ・クライアントシステム並びに描画操作エコーバックスクリプト
CN102054285A (zh) * 2010-12-31 2011-05-11 上海为舟网络科技有限公司 在线动态图像编辑系统
US20140075335A1 (en) * 2012-09-11 2014-03-13 Lucid Software, Inc. Image editing and sharing
CN105094563A (zh) * 2015-08-11 2015-11-25 成都视达科信息技术有限公司 一种图片裁剪方法及裁剪系统
CN109194716A (zh) * 2018-08-06 2019-01-11 深圳市华讯方舟太赫兹科技有限公司 一种处理请求的方法、系统、服务器及存储装置

Similar Documents

Publication Publication Date Title
US10762282B2 (en) Content rendering
US9330077B2 (en) Dynamic image generation for customizable user interfaces
CN111611518B (zh) 基于Html5的可视化展示页面自动发布方法及系统
US20150278171A1 (en) Single page application authoring in a content management system
US20200097719A1 (en) Converting a captured image of a layout to a structured document template
CN110750664B (zh) 图片的显示方法及装置
WO2018126899A1 (zh) 一种视频界面显示方法及装置
CN110609965A (zh) 一种页面显示方法、装置和存储介质
CN113411664B (zh) 基于子应用的视频处理方法、装置和计算机设备
CN112256990A (zh) 一种图像处理方法及装置、计算机可读存储介质
US20240007701A1 (en) Continuing video playback when switching from a dynamic page to a non-dynamic page
CN111857700A (zh) 一种模板化营销活动发布方法及其系统
CN112308939B (zh) 图像生成方法及装置
CN117093386B (zh) 页面截图方法、装置、计算机设备和存储介质
JP7248802B2 (ja) 動的コンポーネントを有するビデオのレンダリング
CN113282852A (zh) 编辑网页的方法和装置
US20230050263A1 (en) Systems and Methods of Generating a Website
CN107688650A (zh) 一种web页面生成方法和装置
CN112632442A (zh) 一种基于Web图像分割功能与设计方法
CN113419806B (zh) 图像处理方法、装置、计算机设备和存储介质
CN115170700A (zh) 基于Flutter框架实现CSS动画的方法、计算机设备及存储介质
CN112799552A (zh) 一种推广图片分享方法、装置和存储介质
CN116991506B (zh) 一种网页渲染方法、装置、终端和存储介质
CN114827113B (zh) 一种网页访问方法及装置
CN116150519A (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
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20210409