CN108153767A - 一种网页自动上传图片的方法和系统 - Google Patents
一种网页自动上传图片的方法和系统 Download PDFInfo
- Publication number
- CN108153767A CN108153767A CN201611104224.2A CN201611104224A CN108153767A CN 108153767 A CN108153767 A CN 108153767A CN 201611104224 A CN201611104224 A CN 201611104224A CN 108153767 A CN108153767 A CN 108153767A
- Authority
- CN
- China
- Prior art keywords
- picture
- picture element
- unit
- webpage
- rendering
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 20
- 238000012216 screening Methods 0.000 claims abstract description 23
- 238000009877 rendering Methods 0.000 claims description 21
- 230000000694 effects Effects 0.000 claims description 17
- 238000013515 script Methods 0.000 claims description 6
- 238000003384 imaging method Methods 0.000 claims description 3
- 230000008859 change Effects 0.000 claims description 2
- 230000000007 visual effect Effects 0.000 abstract description 5
- 238000013461 design Methods 0.000 description 16
- 230000006870 function Effects 0.000 description 10
- 238000010586 diagram Methods 0.000 description 8
- 238000004590 computer program Methods 0.000 description 7
- 238000012545 processing Methods 0.000 description 5
- 238000011161 development Methods 0.000 description 4
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 230000004044 response Effects 0.000 description 3
- 238000005096 rolling process Methods 0.000 description 3
- 239000003086 colorant Substances 0.000 description 2
- 238000010276 construction Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 238000003860 storage Methods 0.000 description 2
- 101000911390 Homo sapiens Coagulation factor VIII Proteins 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000005520 cutting process Methods 0.000 description 1
- 235000013399 edible fruits Nutrition 0.000 description 1
- 238000004880 explosion Methods 0.000 description 1
- 239000011521 glass Substances 0.000 description 1
- 102000057593 human F8 Human genes 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000008569 process Effects 0.000 description 1
- 229940047431 recombinate Drugs 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
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
Abstract
本发明公开了一种网页自动上传图片的方法和系统，该方法包括：设置图片筛选条件；在DOM中查找图片元素；使用所述筛选条件筛选图片；初始化所述图片元素；渲染所述图片元素；上传所述图片元素。本发明技术方案有效挖掘和利用本地的图片资源，对图片资源进行有效的管理，统一图片资源的规格，有利于图片资源的编辑和使用，促进图片资源的共享，提高互联网应用的视觉效果。
Description
技术领域
本发明涉及互联网技术领域，特别涉及一种网页自动上传图片的方法和系统。
背景技术
随着网络的迅速发展，互联网成为大量信息的载体，文字、图片、数据库、音频、视频多媒体等不同类型数据大量出现于网络，再加以各式各样的网页设计，人类进入了信息爆炸的时代。互联网信息呈现了数据巨大、内容广泛、形式多样、增长迅速的特点。截至2014年12月，仅中国的网页数量达到1899亿个，年增长26.6％。随着个人博客、自媒体的发展，以及互联网媒体的快速发展，互联网页的数量将会以几何级速的增长。
互联网传播速度快，内容共享自由，所以互联网成为了一个集各种信息资源为一体的资源网，来自各方的人士随时都可以在网上发布信息。这就造成了互联网信息增长迅速、种类繁多、分布广泛的特点，也带来互联网信息资源在使用过程中的效率低下，主要表现为：
1、内容和功能第一。网页的核心竞争力是其所包含的内容和功能，好的网页是能够给用户提供更多的功能和内容，能够满足用户的多方面的、多层次的应用需求，能够吸引更多的用户访问，并且拥有较高的回头率。这就需要设计高效、跨领域(如搜索和新闻)、多功能(如搜索和购物)、跨平台(如跨PC和移动设备)的网页，并确保达到好的用户体验。
2、响应式设计。现在越来越多用户都拥有多种终端：台式机，笔记本，平板电脑，手机，能够适应不同尺寸显示屏的网页是现在网页设计的潮流，甚至是未来很长一段时间的设计趋势。响应式设计能保证网页适应不同的分辨率，让网页要素重组，使其无论在垂直的平板电脑还是智能手机上，都能达到最好的视觉效果。除了多终端的多样化，显示屏幕(PC、手机、Pad)都在不断变大，而在对未来生活的概念设计里，“屏幕”这个媒介更是被运用到多种新平台上，例如微软发布的“未来生活概念视频”里，厨房、室内墙壁、办公室玻璃墙面都成为了交互平台。响应式网页设计所具备的良好的适应性和可塑性，在未来的网页设计里将占有举足轻重的位置。
3、追求简洁设计风格。简洁的风格体现在扁平化设计和简单配色两方面。扁平化的极简主义突出了应用的功能，用简化的图表替代了原本精致的描绘，更加突出应用的实际效果，反应使用应用的感受，而不是局限在某个应用的外在形象上。简单配色体现了人们审美需求的改变，同色系网站设计成为主流，而“简化配色”的概念，则是把参与网站设计的颜色局限到1到2个。配色简单的趋势似乎和平面化同步，有些网页甚至摈弃色彩，采用纯黑白(以及两者之间的渐变色)设计，有时在其中加入一点色彩吸引注意力或渲染效果，比如加入醒目的红色。
4、长滚动网页。在PC时代，网络用户并不欢迎长滚动网页，因为长滚动网页会把功能模块淹没在滚动的网页中。移动终端让人们习惯用“滚动条”控制的方式阅读网页、寻找资讯，这样的阅读习惯也影响了网络设计，页面出现更多两侧留白与更多的交互设计。手机浏览器让人们逐渐接受了这种长条形网站布局。此外内容的编排上也更适合阅读理解。此外国内很多购物网站或贴吧都加上了“点击返回页面最上端”的功能，更加方便了浏览长网页。长滚动网页设计，对于用户随时使用网页的应用功能提出了更高的要求。
为了充分使用互联网网页内容，共享网页图片，需要将本地的图片资源传送到服务器侧，实现资源的有效利用。现有的图片上传方案，由于无法对本地的图片进行编辑，由于文件尺寸、格式、形状等原因而无法有效使用。需要对图片进行预处理，以提高图片共享的效率和可用性。
发明内容
本发明提供一种网页自动上传图片的方法和系统，有效挖掘和利用本地的图片资源，对图片资源进行有效的管理，统一图片资源的规格，有利于图片资源的编辑和使用，促进图片资源的共享，提高互联网应用的视觉效果。
本发明的技术方案提供了一种网页自动上传图片的方法，包括以下步骤：
设置图片筛选条件；
在DOM中查找图片元素；
使用所述筛选条件筛选图片；
初始化所述图片元素；
渲染所述图片元素；
上传所述图片元素。
进一步的，所述筛选条件包括但不限于图片的形状、长度、宽度和文件大小。
进一步的，所述图片元素包括但不限于JPG、JPEG、PNG、GIF或bmp格式的图片。
进一步的，所述初始化是对图片的成像效果进行初始化。
进一步的，所述渲染是对所述图片元素的jQuery效果进行渲染，从而形成图片的最终显示效果。
进一步的，使用网页的JavaScript脚本上传所述图片元素。
进一步的，对经过所述渲染后的图片元素进行上传。
本发明的技术方案还提供了一种网页自动上传图片的系统，其特征在于，包括查询单元、筛选单元、渲染单元和上传单元，其中：
查询单元用于查询位于本地DOM中的所述图片元素；
筛选单元用于根据所述筛选条件筛选符合条件的所述图片元素；
渲染单元用于对筛选出的所述图片元素进行渲染；
上传单元用于将本地的图片元素进行上传。
进一步的，所述渲染单元对所述筛选单元所筛选出的图片元素进行渲染；
所述渲染是对所述图片元素的jQuery效果进行渲染，从而形成图片的最终显示效果。
进一步的，所述上传单元对所述渲染单元进行渲染过的图片元素进行上传。
本发明技术方案有效查找本地的图片资源，并采用JavaScript脚本实现图片的上传，有效利用本地的图片资源，对图片资源进行有效的管理，统一图片资源的规格，有利于图片资源的编辑和使用，促进图片资源的共享，提高互联网应用的视觉效果。
本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。
下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。
附图说明
附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：
图1为本发明实施例一中网页自动上传图片的方法流程图；
图2为本发明实施例一中网页自动上传图片的系统结构图。
具体实施方式
以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。
图1为本发明实施例一中网页自动上传图片的方法流程图。如图1所示，该网页自动上传图片的方法流程包括以下步骤：
步骤101：设置图片筛选条件。
筛选条件包括但不限于图片的形状、长度、宽度和文件大小。
步骤102：在DOM中查找图片元素。
可供查找的图片元素包括但不限于JPG、JPEG、PNG、GIF或bmp格式的图片。
步骤103：使用所述筛选条件筛选图片。
步骤104：初始化所述图片元素。
初始化是对图片的成像效果进行初始化。
步骤105：渲染所述图片元素。
渲染是对图片元素的jQuery效果进行渲染，从而形成图片的最终显示效果。
使用网页的JavaScript脚本上传所述图片元素。
步骤106：上传所述图片元素。
JavaScript脚本上传的对象是渲染后的图片元素。
本实施例还提供了一种网页自动上传图片的系统，图2为本发明实施例一中网页自动上传图片的系统结构图。如图2所示，该系统包括查询单元201、筛选单元202、渲染单元203和上传单元204，其中，
查询单元用于查询位于本地DOM中的图片元素；
筛选单元用于根据所述筛选条件筛选符合条件的图片元素；
渲染单元用于对筛选出的所述图片元素进行渲染；
上传单元用于将本地的图片元素进行上传。
渲染单元对筛选单元所筛选出的图片元素进行渲染；
渲染是对图片元素的jQuery效果进行渲染，从而形成图片的最终显示效果。
上传单元对渲染单元进行渲染过的图片元素进行上传。
上述实施例中的技术方案有效查找本地的图片资源，并采用JavaScript脚本实现图片的上传，有效利用了本地的图片资源，对图片资源进行有效的管理，统一图片资源的规格，有利于图片资源的编辑和使用，促进图片资源的共享，提高互联网应用的视觉效果。
本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。
Claims (10)
1.一种网页自动上传图片的方法，其特征在于，包括以下步骤：
设置图片筛选条件；
在DOM中查找图片元素；
使用所述筛选条件筛选图片；
初始化所述图片元素；
渲染所述图片元素；
上传所述图片元素。
2.根据权利要求1所述的方法，其特征在于，所述筛选条件包括但不限于图片的形状、长度、宽度和文件大小。
3.根据权利要求1所述的方法，其特征在于，所述图片元素包括但不限于JPG、JPEG、PNG、GIF或bmp格式的图片。
4.根据权利要求1所述的方法，其特征在于，所述初始化是对图片的成像效果进行初始化。
5.根据权利要求1所述的方法，其特征在于，所述渲染是对所述图片元素的jQuery效果进行渲染，从而形成图片的最终显示效果。
6.根据权利要求1所述的方法，其特征在于，使用网页的JavaScript脚本上传所述图片元素。
7.根据权利要求1、5或6所述的方法，其特征在于，对经过所述渲染后的图片元素进行上传。
8.一种网页自动上传图片的系统，其特征在于，包括查询单元、筛选单元、渲染单元和上传单元，其中：
查询单元用于查询位于本地DOM中的所述图片元素；
筛选单元用于根据所述筛选条件筛选符合条件的所述图片元素；
渲染单元用于对筛选出的所述图片元素进行渲染；
上传单元用于将本地的图片元素进行上传。
9.根据权利要求8所述的系统，其特征在于，进一步包括：
所述渲染单元对所述筛选单元所筛选出的图片元素进行渲染；
所述渲染是对所述图片元素的jQuery效果进行渲染，从而形成图片的最终显示效果。
10.根据权利要求8所述的系统，其特征在于，所述上传单元对所述渲染单元进行渲染过的图片元素进行上传。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611104224.2A CN108153767A (zh) | 2016-12-05 | 2016-12-05 | 一种网页自动上传图片的方法和系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611104224.2A CN108153767A (zh) | 2016-12-05 | 2016-12-05 | 一种网页自动上传图片的方法和系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN108153767A true CN108153767A (zh) | 2018-06-12 |
Family
ID=62469986
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201611104224.2A Pending CN108153767A (zh) | 2016-12-05 | 2016-12-05 | 一种网页自动上传图片的方法和系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108153767A (zh) |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2002008860A2 (en) * | 2000-07-26 | 2002-01-31 | Flashpoint Technology, Inc. | Method and system for selecting actions to be taken by a server when uploading images |
| CN102685213A (zh) * | 2012-04-09 | 2012-09-19 | 广州市动景计算机科技有限公司 | 基于移动终端的数据上传方法、装置及移动终端 |
| CN103457973A (zh) * | 2012-06-01 | 2013-12-18 | 深圳市腾讯计算机系统有限公司 | 一种图片上传方法、系统、图片上传客户端及网络服务器 |
| CN104317887A (zh) * | 2014-10-22 | 2015-01-28 | 中国建设银行股份有限公司 | 图片接收方法以及图片接收装置 |
| CN104462491A (zh) * | 2014-12-22 | 2015-03-25 | 上海斐讯数据通信技术有限公司 | 上传图片的方法、系统及相应的服务器 |
| CN104679890A (zh) * | 2015-03-17 | 2015-06-03 | 努比亚技术有限公司 | 图片推送方法及装置 |
| CN105868195A (zh) * | 2015-01-19 | 2016-08-17 | 阿里巴巴集团控股有限公司 | 图片上传方法及装置 |
-
2016
- 2016-12-05 CN CN201611104224.2A patent/CN108153767A/zh active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2002008860A2 (en) * | 2000-07-26 | 2002-01-31 | Flashpoint Technology, Inc. | Method and system for selecting actions to be taken by a server when uploading images |
| CN102685213A (zh) * | 2012-04-09 | 2012-09-19 | 广州市动景计算机科技有限公司 | 基于移动终端的数据上传方法、装置及移动终端 |
| CN103457973A (zh) * | 2012-06-01 | 2013-12-18 | 深圳市腾讯计算机系统有限公司 | 一种图片上传方法、系统、图片上传客户端及网络服务器 |
| CN104317887A (zh) * | 2014-10-22 | 2015-01-28 | 中国建设银行股份有限公司 | 图片接收方法以及图片接收装置 |
| CN104462491A (zh) * | 2014-12-22 | 2015-03-25 | 上海斐讯数据通信技术有限公司 | 上传图片的方法、系统及相应的服务器 |
| CN105868195A (zh) * | 2015-01-19 | 2016-08-17 | 阿里巴巴集团控股有限公司 | 图片上传方法及装置 |
| CN104679890A (zh) * | 2015-03-17 | 2015-06-03 | 努比亚技术有限公司 | 图片推送方法及装置 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| Bulkeley et al. | Responding to climate change: governance and social action beyond Kyoto | |
| US9367539B2 (en) | Techniques for automated document translation | |
| US20130326333A1 (en) | Mobile Content Management System | |
| KR101760777B1 (ko) | 반응형 웹사이트 빌더 시스템 및 그 방법 | |
| US20150278171A1 (en) | Single page application authoring in a content management system | |
| CN102455913A (zh) | 显示模板的定制 | |
| CN102629273A (zh) | 基于浏览器的广告信息推送方法、装置及浏览器系统 | |
| KR100928315B1 (ko) | 웹브라우징 시스템 | |
| CN107391698A (zh) | 一种动态显示网页的方法、装置、介质和计算装置 | |
| CN107066496A (zh) | 一种兼容不同浏览器和终端设备的页面访问方法 | |
| CN110147505A (zh) | 一种页面展示方法、服务器及存储介质 | |
| CN106326403A (zh) | 网页生成方法及装置 | |
| CN103995704A (zh) | 一种用于应用程序的功能提供方法和装置 | |
| CN111859886A (zh) | 一种基于产品原型界面的文档生成方法和装置 | |
| CN108153767A (zh) | 一种网页自动上传图片的方法和系统 | |
| CN106484732A (zh) | 一种网页图片的上传管理方法和系统 | |
| CN108153762A (zh) | 一种页面内容切换显示的方法和系统 | |
| KR100856132B1 (ko) | 웹 대상물의 관리 시스템 | |
| Yoo et al. | ESOTAG: E-book evolution using collaborative social tagging by readers | |
| Coondu et al. | Mobile-enabled content adaptation system for e-learning websites using segmentation algorithm | |
| CN102314429A (zh) | 一种xml协议控制网页的方法 | |
| KR101760835B1 (ko) | 모바일 커뮤니티 서비스를 제공하기 위한 어플리케이션 구축 시스템 및 방법 | |
| CN108228639A (zh) | 一种自动为网页banner加载图片的方法和系统 | |
| CN108073430A (zh) | 一种网页显示功能按键的方法和系统 | |
| Beale | Information fragments for a pervasive world |
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 | ||
| WD01 | Invention patent application deemed withdrawn after publication | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20180612 |