CN106354881A - 基于移动终端跨平台的图片浏览器及其实现方法 - Google Patents

基于移动终端跨平台的图片浏览器及其实现方法 Download PDF

Info

Publication number
CN106354881A
CN106354881A CN201610858784.0A CN201610858784A CN106354881A CN 106354881 A CN106354881 A CN 106354881A CN 201610858784 A CN201610858784 A CN 201610858784A CN 106354881 A CN106354881 A CN 106354881A
Authority
CN
China
Prior art keywords
picture
ios
primary
photo browser
android
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
CN201610858784.0A
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.)
Sichuan Changhong Electric Co Ltd
Original Assignee
Sichuan Changhong Electric 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 Changhong Electric Co Ltd filed Critical Sichuan Changhong Electric Co Ltd
Priority to CN201610858784.0A priority Critical patent/CN106354881A/zh
Publication of CN106354881A publication Critical patent/CN106354881A/zh
Pending legal-status Critical Current

Links

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/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
    • G06F16/9566—URL specific, e.g. using aliases, detecting broken or misspelled links
    • 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/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Telephonic Communication Services (AREA)
  • Telephone Function (AREA)

Abstract

本发明涉及移动应用开发领域，提供一种基于移动终端跨平台的图片浏览器及其实现方法，以解决图片浏览器的跨平台实现问题，该图片浏览器包括Android原生图片浏览器、iOS原生图片浏览器、设备识别模块、URL发生器、URL拦截器、打开图片模块、javascriptInterfac函数接口、iOS类型打开模块和Android类型打开模块，本发明提出的技术方案借助HTML5的跨平台技术，采用HTML5和Android/IOS的混合开发方式来实现跨平台图片浏览，不仅解决了图片浏览器跨平台的问题，还解决了图片缓存问题。

Description

基于移动终端跨平台的图片浏览器及其实现方法
技术领域
本发明属于移动应用开发领域，特别涉及一种基于移动终端跨平台的图片浏览器及其实现方法。
背景技术
目前，随着智能移动终端的普及，移动应用软件得到了快速的发展，移动终端的图片浏览方式多种多样。一般图片浏览器利用手势实现图片的放大缩小，左右滑动进行图片浏览的基础功能，但是这些浏览器只能运行在一个系统，一个平台(Android或者IOS)。
随着HTML5的发展，也有采用纯HTML5实现跨平台的网页图片浏览器，但HTML5存在不能很好的解决大内存图片的缓存问题的缺陷，另外，网页图片浏览器对网络的依赖性高等问题极大的限制了用户浏览图片的体验。
发明内容
【要解决的技术问题】
本发明的目的是提供一种基于移动终端跨平台的图片浏览器及其实现方法，以解决图片浏览器的跨平台实现问题。
【技术方案】
本发明是通过以下技术方案实现的。
本发明首先涉及一种基于移动终端跨平台的图片浏览器的实现方法，包括以下步骤：
A、开发图片浏览器的原生模块，最终用户通过打开图片模块传入要打开图片的路径，所述图片浏览器的原生模块包括Android原生图片浏览器和iOS原生图片浏览器，所述Android原生图片浏览器为用Android原生代码开发的能够兼容不同类型图片的Android图片浏览器，所述iOS原生图片浏览器是用iOS原生代码开发的能够兼容不同类型图片的iOS图片浏览器；
B、通过设备识别模块获得当前设备类型；
C、如果当前设备的类型为Android类型，则调用javascriptInterface函数接口，javascriptInterface函数接口调用Android原生图片浏览器打开图片；
D、如果当前设备的类型为iOS类型，则构建打开图片浏览器的URL并调用URL发生器，URL拦截器拦截到URL后，解析出需要调用的iOS方法名及图片路径，URL拦截器调用iOS原生图片浏览器打开图片。
作为一种优选的实施方式，所述设备识别模块通过函数function isIOS判断浏览器类型并确定该浏览器所在的设备是否为iOS类型，若不是iOS类型，则该设备为Android类型。
作为另一种优选的实施方式，所述URL发生器用于动态创建一个iframe并为该iframe设置src属性，所述URL拦截器通过拦截src属性值得到图片路径。
作为另一种优选的实施方式，所述步骤A中在Eclipse环境和Xcode环境下进行图片浏览器的原生模块开发，所述图片浏览器的原生模块用于实现图片放大缩小、图片旋转、图片轮播、获取图片详情。
作为另一种优选的实施方式，所述图片格式为jpg或png。
本发明还涉及一种基于移动终端跨平台的图片浏览器，包括Android原生图片浏览器、iOS原生图片浏览器、设备识别模块、URL发生器、URL拦截器、打开图片模块、javascriptInterfac函数接口、iOS类型打开模块和Android类型打开模块，
所述Android原生图片浏览器为用Android原生代码开发的能够兼容不同类型图片的Android图片浏览器，所述iOS原生图片浏览器是用iOS原生代码开发的能够兼容不同类型图片的iOS图片浏览器；
所述打开图片模块用于传入要打开图片的路径；
所述设备识别模块用于获得当前设备类型；
所述Android类型打开模块被配置成：如果当前设备的类型为Android类型，则调用javascriptInterface函数接口，javascriptInterface函数接口调用Android原生图片浏览器打开图片；
所述iOS类型打开模块被配置成：如果当前设备的类型为iOS类型，则构建打开图片浏览器的URL并调用URL发生器，URL拦截器拦截到URL后，解析出需要调用的iOS方法名及图片路径，URL拦截器调用iOS原生图片浏览器打开图片。
作为一种优选的实施方式，所述设备识别模块通过函数function isIOS判断浏览器类型并确定该浏览器所在的设备是否为iOS类型，若不是iOS类型，则该设备为Android类型。
作为另一种优选的实施方式，所述URL发生器用于动态创建一个iframe并为该iframe设置src属性，所述URL拦截器通过拦截src属性值得到图片路径。
作为另一种优选的实施方式，所述Android原生图片浏览器在Eclipse环境和Xcode环境下进行图片浏览器的原生模块开发，所述Android原生图片浏览器用于实现图片放大缩小、图片旋转、图片轮播、获取图片详情，所述iOS原生图片浏览器在Eclipse环境和Xcode环境下进行图片浏览器的原生模块开发，所述iOS原生图片浏览器用于实现图片放大缩小、图片旋转、图片轮播、获取图片详情。
作为另一种优选的实施方式，所述图片格式为jpg或png。
【有益效果】
本发明提出的技术方案具有以下有益效果：
本发明借助HTML5的跨平台技术，采用HTML5和Android/IOS的混合开发方式来实现跨平台图片浏览，不仅解决了图片浏览器跨平台的问题，还解决了图片缓存问题。
附图说明
图1为本发明的实施例一提供的基于移动终端跨平台的图片浏览器的原理框图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚，下面将对本发明的具体实施方式进行清楚、完整的描述。
实施例一
图1为本发明实施例一提供的基于移动终端跨平台的图片浏览器的原理框图。如图1所示，该图片浏览器包括Android原生图片浏览器、iOS原生图片浏览器、设备识别模块、URL发生器、URL拦截器、打开图片模块、javascriptInterface函数接口、iOS类型打开模块和Android类型打开模块。
Android原生图片浏览器为用Android原生代码开发的能够兼容不同类型图片的Android图片浏览器，iOS原生图片浏览器是用iOS原生代码开发的能够兼容不同类型图片的iOS图片浏览器。具体地，Android原生图片浏览器在Eclipse环境和Xcode环境下进行图片浏览器的原生模块开发，Android原生图片浏览器用于实现图片放大缩小、图片旋转、图片轮播、获取图片详情，iOS原生图片浏览器在Eclipse环境和Xcode环境下进行图片浏览器的原生模块开发，iOS原生图片浏览器用于实现图片放大缩小、图片旋转、图片轮播、获取图片详情。
打开图片模块用于传入要打开图片的路径。
设备识别模块用于获得当前设备类型。具体地，设备识别模块通过函数functionisIOS判断浏览器类型并确定该浏览器所在的设备是否为iOS类型，若不是iOS类型，则该设备为Android类型。
Android类型打开模块被配置成：如果当前设备的类型为Android类型，则调用javascriptInterface函数接口，javascriptInterface函数接口调用Android原生图片浏览器打开图片。
URL发生器用于动态创建一个iframe并为该iframe设置src属性，URL拦截器通过拦截src属性值得到图片路径。
iOS类型打开模块被配置成：如果当前设备的类型为iOS类型，则构建打开图片浏览器的URL并调用URL发生器，URL拦截器拦截到URL后，解析出需要调用的iOS方法名及图片路径，URL拦截器调用iOS原生图片浏览器打开图片。
实施例一中的图片浏览器的实现方法可以参考下述具体方法实施例。
实施例二
实施例二为基于移动终端跨平台的图片浏览器的实现方法，包括以下步骤：
(1)、开发图片浏览器的原生模块，最终用户通过打开图片模块传入要打开图片的路径，图片浏览器的原生模块包括Android原生图片浏览器和iOS原生图片浏览器，Android原生图片浏览器为用Android原生代码开发的能够兼容不同类型图片的Android图片浏览器，iOS原生图片浏览器是用iOS原生代码开发的能够兼容不同类型图片的iOS图片浏览器。该步骤中，可以在Eclipse环境和Xcode环境下进行图片浏览器的原生模块开发，图片浏览器的原生模块用于实现图片放大缩小、图片旋转、图片轮播、获取图片详情。
进一步的，为了提高用户使用体验，可以在iOS原生图片浏览器和/Android原生图片浏览器中添加用户可以自定义选择首张浏览图片功能，此功能具体实现为：在接口方法View()中添加一个整型的itemIndex参数，让其取值范围为1－paths.count，其中paths为传入的图片路径数组，paths.count为传入路径数。原生代码添加当前首张图片为所选定图片，如：image＝_imageArr[itemIndex]。
进一步的，为了提高用户使用体验，可以在iOS原生图片浏览器和/Android原生图片浏览器中添加获取图片详情的功能，实时获取图片的详情，具体实现为：在图片浏览器每张图片的右上角添加一个可隐藏的button，点击button IOS会弹出包含图片详情的alertView，Android会弹出dialog显示图片详情，详情包含图片本身高和宽本身高宽比，现在的高和宽及现在的高宽比，图片的来源类型(网络、本地)，图片的格式(jpg、png等)。
另外，在浏览网络图片时采用临时缓存区域，可以设置缓存期限，浏览过的图片在缓存期限内保存在本地，当需要浏览网络图片时，先判断本地是否存在已存储所需的内容，如果没有相应数据或者已过期，则加载相应的JS数据，然后存储在本地；如果有且没过期，直接从本地获取数据。这样不用每次访问都需要下载，减少用户流量的消耗同时，提高了用户浏览网络图片的体验。
(2)、通过设备识别模块获得当前设备类型。具体地，设备识别模块通过函数function isIOS判断浏览器类型并确定该浏览器所在的设备是否为iOS类型，若不是iOS类型，则该设备为Android类型。
(3)、如果当前设备的类型为Android类型，则调用javascriptInterface函数接口，javascriptInterface函数接口调用Android原生图片浏览器打开图片；
(4)、如果当前设备的类型为iOS类型，则构建打开图片浏览器的URL并调用URL发生器，URL拦截器拦截到URL后，解析出需要调用的iOS方法名及图片路径，URL拦截器调用iOS原生图片浏览器打开图片。由于URL发生器动态创建了一个iframe并为该iframe设置了src属性，因此URL拦截器通过拦截src属性值可以得到图片路径。
从以上实施例可以看出，本发明实施例借助HTML5的跨平台技术，采用HTML5和Android/IOS的混合开发方式来实现跨平台图片浏览，不仅解决了图片浏览器跨平台的问题，还解决了图片缓存问题。
需要说明，上述描述的实施例是本发明的一部分实施例，而不是全部实施例，也不是对本发明的限制。基于本发明的实施例，本领域普通技术人员在不付出创造性劳动前提下所获得的所有其他实施例，都属于本发明的保护范围。

Claims (10)

1.一种基于移动终端跨平台的图片浏览器的实现方法，其特征在于包括以下步骤：
A、开发图片浏览器的原生模块，最终用户通过打开图片模块传入要打开图片的路径，所述图片浏览器的原生模块包括Android原生图片浏览器和iOS原生图片浏览器，所述Android原生图片浏览器为用Android原生代码开发的能够兼容不同类型图片的Android图片浏览器，所述iOS原生图片浏览器是用iOS原生代码开发的能够兼容不同类型图片的iOS图片浏览器；
B、通过设备识别模块获得当前设备类型；
C、如果当前设备的类型为Android类型，则调用javascriptInterface函数接口，javascriptInterface函数接口调用Android原生图片浏览器打开图片；
D、如果当前设备的类型为iOS类型，则构建打开图片浏览器的URL并调用URL发生器，URL拦截器拦截到URL后，解析出需要调用的iOS方法名及图片路径，URL拦截器调用iOS原生图片浏览器打开图片。
2.根据权利要求1所述的基于移动终端跨平台的图片浏览器的实现方法，其特征在于所述设备识别模块通过函数function isIOS判断浏览器类型并确定该浏览器所在的设备是否为iOS类型，若不是iOS类型，则该设备为Android类型。
3.根据权利要求1所述的基于移动终端跨平台的图片浏览器的实现方法，其特征在于所述URL发生器用于动态创建一个iframe并为该iframe设置src属性，所述URL拦截器通过拦截src属性值得到图片路径。
4.根据权利要求1所述的基于移动终端跨平台的图片浏览器的实现方法，其特征在于所述步骤A中在Eclipse环境和Xcode环境下进行图片浏览器的原生模块开发，所述图片浏览器的原生模块用于实现图片放大缩小、图片旋转、图片轮播、获取图片详情。
5.根据权利要求1所述的基于移动终端跨平台的图片浏览器的实现方法，其特征在于所述图片格式为jpg或png。
6.一种基于移动终端跨平台的图片浏览器，其特征在于包括Android原生图片浏览器、iOS原生图片浏览器、设备识别模块、URL发生器、URL拦截器、打开图片模块、javascriptInterfac函数接口、iOS类型打开模块和Android类型打开模块，
所述Android原生图片浏览器为用Android原生代码开发的能够兼容不同类型图片的Android图片浏览器，所述iOS原生图片浏览器为用iOS原生代码开发的能够兼容不同类型图片的iOS图片浏览器；
所述打开图片模块用于传入要打开图片的路径；
所述设备识别模块用于获得当前设备类型；
所述Android类型打开模块被配置成：如果当前设备的类型为Android类型，则调用javascriptInterface函数接口，javascriptInterface函数接口调用Android原生图片浏览器打开图片；
所述iOS类型打开模块被配置成：如果当前设备的类型为iOS类型，则构建打开图片浏览器的URL并调用URL发生器，URL拦截器拦截到URL后，解析出需要调用的iOS方法名及图片路径，URL拦截器调用iOS原生图片浏览器打开图片。
7.根据权利要求6所述的基于移动终端跨平台的图片浏览器，其特征在于所述设备识别模块通过函数function isIOS判断浏览器类型并确定该浏览器所在的设备是否为iOS类型，若不是iOS类型，则该设备为Android类型。
8.根据权利要求6所述的基于移动终端跨平台的图片浏览器，其特征在于所述URL发生器用于动态创建一个iframe并为该iframe设置src属性，所述URL拦截器通过拦截src属性值得到图片路径。
9.根据权利要求6所述的基于移动终端跨平台的图片浏览器，其特征在于所述Android原生图片浏览器在Eclipse环境和Xcode环境下进行图片浏览器的原生模块开发，所述Android原生图片浏览器用于实现图片放大缩小、图片旋转、图片轮播、获取图片详情，所述iOS原生图片浏览器在Eclipse环境和Xcode环境下进行图片浏览器的原生模块开发，所述iOS原生图片浏览器用于实现图片放大缩小、图片旋转、图片轮播、获取图片详情。
10.根据权利要求6所述的基于移动终端跨平台的图片浏览器，其特征在于所述图片格式为jpg或png。
CN201610858784.0A 2016-09-28 2016-09-28 基于移动终端跨平台的图片浏览器及其实现方法 Pending CN106354881A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610858784.0A CN106354881A (zh) 2016-09-28 2016-09-28 基于移动终端跨平台的图片浏览器及其实现方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610858784.0A CN106354881A (zh) 2016-09-28 2016-09-28 基于移动终端跨平台的图片浏览器及其实现方法

Publications (1)

Publication Number Publication Date
CN106354881A true CN106354881A (zh) 2017-01-25

Family

ID=57865386

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610858784.0A Pending CN106354881A (zh) 2016-09-28 2016-09-28 基于移动终端跨平台的图片浏览器及其实现方法

Country Status (1)

Country Link
CN (1) CN106354881A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107613434A (zh) * 2017-09-27 2018-01-19 四川长虹电器股份有限公司 跨平台多端协调进行声场定位的方法
CN115098104A (zh) * 2022-07-25 2022-09-23 北京中电普华信息技术有限公司 一种轮播组件生成方法及装置

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103744652A (zh) * 2013-12-19 2014-04-23 深圳市迈桥科技有限公司 一种跨移动终端的混合app开发方法及装置
CN105204875A (zh) * 2014-06-11 2015-12-30 腾讯科技（深圳）有限公司 网页调用native功能的方法和系统
CN105607895A (zh) * 2014-11-21 2016-05-25 阿里巴巴集团控股有限公司 一种基于应用程序编程接口的应用程序的运行方法和装置
CN105868235A (zh) * 2015-12-08 2016-08-17 乐视移动智能信息技术（北京）有限公司 智能终端的图片预览方法及装置

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103744652A (zh) * 2013-12-19 2014-04-23 深圳市迈桥科技有限公司 一种跨移动终端的混合app开发方法及装置
CN105204875A (zh) * 2014-06-11 2015-12-30 腾讯科技（深圳）有限公司 网页调用native功能的方法和系统
CN105607895A (zh) * 2014-11-21 2016-05-25 阿里巴巴集团控股有限公司 一种基于应用程序编程接口的应用程序的运行方法和装置
CN105868235A (zh) * 2015-12-08 2016-08-17 乐视移动智能信息技术（北京）有限公司 智能终端的图片预览方法及装置

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
HALEY_WONG: ""iOS下JS与原生OC互相调用(总结)"", 《HTTPS://WWW.JIANSHU.COM/P/D19689E0ED83》 *
快乐每一天: ""Nodejs 或 js 判断手机操作系统 Android or IOS"", 《HTTPS://QIAOLEVIP.ITEYE.COM/BLOG/2119534》 *

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107613434A (zh) * 2017-09-27 2018-01-19 四川长虹电器股份有限公司 跨平台多端协调进行声场定位的方法
CN115098104A (zh) * 2022-07-25 2022-09-23 北京中电普华信息技术有限公司 一种轮播组件生成方法及装置
CN115098104B (zh) * 2022-07-25 2022-10-28 北京中电普华信息技术有限公司 一种轮播组件生成方法及装置

Similar Documents

Publication Publication Date Title
CN105069118B (zh) 一种基于gis配置的应用场景管理方法及系统
CN104978358B (zh) 桌面展示网页片段的方法及截取网页片段至桌面展示系统
US20120210243A1 (en) Web co-navigation
EP2854348B1 (en) Interface display method and system of home gateway applicable to multiple display types
CN101853158A (zh) Widget窗口调整的方法及装置
CN106095460B (zh) 实现终端内嵌浏览器优化网页加载的系统及方法
CN106878361A (zh) 一种终端应用页面的调试方法、装置及客户端
KR20140096063A (ko) 브라우저 커널 조정 방법 및 이를 위한 브라우저
CN106909361A (zh) 基于模版引擎的web开发方法和装置
CN105893508A (zh) 确定原生页面和h5 页面访问次序的方法、装置和系统
CN100433831C (zh) 基于wap浏览器的视频监控方法及监控系统
CN103607454B (zh) Android系统浏览器设置私有代理服务器的方法
CN110659021B (zh) 一种移动端内微应用的开发及测试系统
CN110895481A (zh) 桌面应用的渲染方法、装置和系统
CN103176993A (zh) 一种内容呈现设备和方法
CN101354706A (zh) 一种收集网页信息的方法及装置
CN106354881A (zh) 基于移动终端跨平台的图片浏览器及其实现方法
CN110019037A (zh) 一种pdf文件展示方法、装置、设备及存储介质
US7143342B1 (en) Distributing condensed versions of displayable information in hypertext markup language documents transmitted on the world wide web to personal palm-type display computers
CN106909627A (zh) 一种内容加载方法、装置和移动设备
TWI641984B (zh) 供終端裝置與網站互動的方法、提供網路服務予終端裝置的方法以及供終端裝置與網站互動的計算機程式產品
EP2557505A1 (en) Web display program conversion system, web display program conversion method, and program for web display program conversion
CN106354489A (zh) 一种epg引擎及页面解析方法
WO2020253057A1 (zh) 页面数据传输的控制方法及相关设备
KR20060019862A (ko) 이동통신 단말기의 브라우저에서 지원되지 않는 이미지 및태그 처리를 위한 웹 문서 변환 방법

Legal Events

Date Code Title Description
C06 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: 20170125