CN113792208A - 基于网页的图片交互方法、装置、设备、介质及程序产品 - Google Patents

基于网页的图片交互方法、装置、设备、介质及程序产品 Download PDF

Info

Publication number
CN113792208A
CN113792208A CN202111151581.5A CN202111151581A CN113792208A CN 113792208 A CN113792208 A CN 113792208A CN 202111151581 A CN202111151581 A CN 202111151581A CN 113792208 A CN113792208 A CN 113792208A
Authority
CN
China
Prior art keywords
interaction
interactive
target picture
control
trigger
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
CN202111151581.5A
Other languages
English (en)
Other versions
CN113792208B (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.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen 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 Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN202111151581.5A priority Critical patent/CN113792208B/zh
Publication of CN113792208A publication Critical patent/CN113792208A/zh
Application granted granted Critical
Publication of CN113792208B publication Critical patent/CN113792208B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

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/953—Querying, e.g. by the use of web search engines
    • 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
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请提供了一种基于网页的图片交互方法、装置、设备、计算机可读存储介质及计算机程序产品；方法包括：在当前浏览网页的页面中显示目标图片，所述目标图片包括交互区域和非交互区域；在所述目标图片的交互区域中，显示用于对所述目标图片进行交互的交互控件；当接收到针对所述交互控件的第一触发操作时，执行所述交互控件所指示的针对所述目标图片的第一交互操作；当接收到针对所述非交互区域的第二触发操作，且所述第二触发操作满足交互条件时，执行所述第二触发操作所指示的针对所述目标图片的第二交互操作，所述第二交互操作不同于所述第一交互操作。通过本申请，能够丰富网页中图片交互方式。

Description

基于网页的图片交互方法、装置、设备、介质及程序产品
技术领域
本申请涉及计算机技术，尤其涉及一种基于网页的图片交互方法、装置、设备、计算机可读存储介质及计算机程序产品。
背景技术
随着多媒体技术和网络技术的发展，用户经常通过web端的超文本标记语言页面(简称H5页面)浏览图片。用户在通过H5页面浏览图片的过程中，存在与图片进行交互的需求，相关技术中，用户仅能通过长按H5页面中的图片触动交互逻辑，如长按图片进行图片保存，交互方式比较单一。
发明内容
本申请实施例提供一种基于网页的图片交互方法、装置、设备、计算机可读存储介质及计算机程序产品，能够丰富网页中图片交互方式。
本申请实施例的技术方案是这样实现的：
本申请实施例提供一种基于网页的图片交互方法，包括：
在当前浏览网页的页面中显示目标图片，所述目标图片包括交互区域和非交互区域；
在所述目标图片的交互区域中，显示用于对所述目标图片进行交互的交互控件；
当接收到针对所述交互控件的第一触发操作时，执行所述交互控件所指示的针对所述目标图片的第一交互操作；
当接收到针对所述非交互区域的第二触发操作，且所述第二触发操作满足交互条件时，执行所述第二触发操作所指示的针对所述目标图片的第二交互操作，所述第二交互操作不同于所述第一交互操作。
本申请实施例提供一种基于网页的图片交互装置，包括：
第一显示模块，用于在当前浏览网页的页面中显示目标图片，所述目标图片包括交互区域和非交互区域；
第二显示模块，用于在所述目标图片的交互区域中，显示用于对所述目标图片进行交互的交互控件；
第一执行模块，用于当接收到针对所述交互控件的第一触发操作时，执行所述交互控件所指示的针对所述目标图片的第一交互操作；
第二执行模块，用于当接收到针对所述非交互区域的第二触发操作，且所述第二触发操作满足交互条件时，执行所述第二触发操作所指示的针对所述目标图片的第二交互操作，所述第二交互操作不同于所述第一交互操作。
上述方案中，所述第一执行模块，还用于呈现交互提示信息，所述交互提示信息，用于提示针对所述目标图片执行交互操作；
响应于针对所述交互提示信息的确定指令，执行所述交互控件所指示的针对所述目标图片的交互操作。
上述方案中，所述第二执行模块，还用于呈现对应至少两个交互操作的交互选项；
基于所述交互选项，响应于针对所述至少两个交互操作中目标交互操作的选择操作，执行针对所述目标图片的所述目标交互操作。
上述方案中，所述第一执行模块，还用于当所述目标图片的内容与目标应用相关联、且所述交互控件指示下载目标应用时，响应于所述第一触发操作，确定当前终端未下载所述目标应用时，执行针对所述目标应用的下载操作，并呈现下载所述目标应用的进度提示信息。
上述方案中，所述第一执行模块，还用于当所述目标图片包含第一标签元素，且所述交互控件指示对所述第一标签元素进行调整时，响应于所述第一触发操作，执行所述交互控件所指示的针对所述第一标签元素的调整操作。
上述方案中，所述第一执行模块，还用于当所述目标图片包含第二标签元素，且所述交互控件指示对所述第二标签元素进行切换时，响应于所述第一触发操作，执行所述交互控件所指示的针对所述第二标签元素的切换操作。
上述方案中，所述第一执行模块，还用于当所述目标图片包含第三标签元素，且所述交互控件指示对所述第三标签元素进行搜索时，响应于所述第一触发操作，执行所述交互控件所指示的针对所述第三标签元素的搜索操作，并呈现针对所述搜索操作的搜索结果。
上述方案中，所述第一执行模块，还用于当所述交互控件指示对所述页面进行刷新时，响应于所述第一触发操作，执行所述交互控件所指示的针对所述当前浏览网页的页面的刷新操作。
上述方案中，所述第一执行模块，还用于当所述交互控件指示对所述目标图片进行评价时，响应于所述第一触发操作，呈现用于对所述目标图片进行评价的编辑界面；
响应于基于所述编辑界面触发的编辑操作，在所述目标图片的关联区域中呈现所述编辑操作所编辑的评价信息。
上述方案中，所述在当前浏览网页的页面中显示目标图片之前，所述装置还包括：
文件构建模块，用于获取当所述页面不包括所述目标图片时所对应的第一源文件、所述第一源文件的内容体、以及所述目标图片对应的标签代码；
遍历所述第一源文件的内容体，将所述目标图片的标签代码添加到所述内容体中，得到所述页面包括所述目标图片时对应的第二源文件；
其中，所述第二源文件，用于在所述页面被渲染时，在渲染得到的页面中显示所述目标图片。
上述方案中，所述文件构建模块，还用于确定所述目标图片对应的图层架构，所述图层架构用于指示组成所述目标图片的标签元素的图层，包括静态层、原始交互层、交互对象层、实际交互层；
其中，所述静态层用于存储与所述页面相对应的图片；所述原始交互层用于响应所述第一触发操作对应的触发事件；所述交互对象层用于响应所述第二触发操作对应的触发事件；所述实际交互层用于响应于所述第一触发操作或所述第二触发操作，生成对应的触发事件，并将所述触发事件传递至相应的图层；
基于所述层级关系，对所述目标图片所包括的标签元素进行代码构建，得到所述目标图片的标签代码。
上述方案中，所述装置还包括：事件绑定模块，用于获取所述原始控件在所述原始交互层中的位置信息和尺寸信息；
基于所述位置信息和所述尺寸信息，在所述实际交互层中创建与所述原始控件的位置信息和尺寸信息相一致的交互控件；
将针对所述交互控件的触发事件与针对所述原始控件的触发事件进行绑定，构建所述原始控件与所述交互控件之间的关联关系。
上述方案中，所述第一执行模块，还用于当所述实际交互层接收到针对所述交互控件的第一触发操作时，通过所述实际交互层将所述第一触发操作对应的触发事件传递至所述原始交互层，并通过所述原始交互层执行所述交互控件所指示的针对所述目标图片的第一交互操作。
上述方案中，所述第二执行模块，还用于当所述实际交互层接收到针对所述非交互区域的第二触发操作、且所述第二触发操作满足交互条件时，基于所述交互对象层与所述实际交互层之间的关联关系，通过所述实际交互层将所述第二触发操作对应的触发事件传递至所述交互对象层，并通过所述交互对象层执行针对所述交互图片的第二交互操作。
本申请实施例提供一种电子设备，包括：
存储器，用于存储可执行指令；
处理器，用于执行所述存储器中存储的可执行指令时，实现本申请实施例提供的基于网页的图片交互方法。
本申请实施例提供一种计算机可读存储介质，存储有可执行指令，用于引起处理器执行时，实现本申请实施例提供的基于网页的图片交互方法。
本申请实施例提供一种计算机程序产品，包括计算机程序或指令，所述计算机程序或指令被处理器执行时实现本申请实施例提供的基于网页的图片交互方法。
本申请实施例具有以下有益效果：
通过本申请实施例，在当前浏览网页的页面中浏览目标图片的过程中，当接收到针对目标图片中交互区域的交互控件的第一触发操作时，执行第一交互操作，当接收到针对目标图片中非交互区域的第二触发操作时，执行不同于第一交互操作的第二交互操作，能够对网页的目标图片执行多种交互操作，丰富了网页中图片的交互方式。
附图说明
图1为本申请实施例提供的基于网页的图片交互系统100的一个可选的架构示意图；
图2为本申请实施例提供的电子设备500的一个可选的结构示意图；
图3为本申请实施例提供的基于网页的图片交互方法的流程示意图；
图4为本申请实施例提供的交互操作执行界面示意图；
图5为本申请实施例提供的交互操作执行界面示意图；
图6为本申请实施例提供的交互操作执行界面示意图；
图7为本申请实施例提供的交互操作执行界面示意图；
图8为本申请实施例提供的交互操作执行界面示意图；
图9为本申请实施例提供的交互操作执行界面示意图；
图10为本申请实施例提供的页面显示示意图；
图11为本申请实施例提供的图层架构示意图；
图12为本申请实施例提供的事件传递示意图；
图13为本申请实施例提供的基于网页的图片交互方法的流程示意图。
具体实施方式
为了使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请作进一步地详细描述，所描述的实施例不应视为对本申请的限制，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本申请保护的范围。
在以下的描述中，涉及到“一些实施例”，其描述了所有可能实施例的子集，但是可以理解，“一些实施例”可以是所有可能实施例的相同子集或不同子集，并且可以在不冲突的情况下相互结合。
在以下的描述中，所涉及的术语“第一\第二…”仅仅是区别类似的对象，不代表针对对象的特定排序，可以理解地，“第一\第二…”在允许的情况下可以互换特定的顺序或先后次序，以使这里描述的本申请实施例能够以除了在这里图示或描述的以外的顺序实施。
除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本申请实施例的目的，不是旨在限制本申请。
对本申请实施例进行进一步详细说明之前，对本申请实施例中涉及的名词和术语进行说明，本申请实施例中涉及的名词和术语适用于如下的解释。
1)JavaScript(简称JS)：是一种具有函数优先的轻量级、解释型或即时编译型的编程语言，它支持面向对象程式设计，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。它已经由欧洲电脑制造商协会(ECMA，European ComputerManufacturers Association)通过ECMAScript实现语言的标准化，被世界上的绝大多数网站所使用，也被世界主流浏览器(Chrome、IE、Firefox、Safari、Opera)支持。
2)超文本标记语言(HTML，HyperText Markup Language)：是一种标记语言，它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的网络资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。它定义了网页内容的含义和结构，除HTML以外的其它技术则通常用来描述一个网页的表现与展示效果，如层叠样式表(CSS，Cascading Style Sheets)，或功能与行为，如JavaScript。
3)文档对象模型(DOM，Document Object Model)：是HTML和XML文档的编程接口，它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。
4)样式:是指用有意义的名称保存的字符格式和段落格式的集合，这样在编排重复格式时，先创建一个该格式的样式，然后在需要的地方套用这种样式，就无须一次次地对它们进行重复的格式化操作了。
5)页面:信息以页面信息组织，信息页面由语言来实现，在各个信息页面之间建立超文本链接以便浏览。
6)响应于，用于表示所执行的操作所依赖的条件或者状态，当满足所依赖的条件或状态时，所执行的一个或多个操作可以是实时的，也可以具有设定的延迟；在没有特别说明的情况下，所执行的多个操作不存在执行先后顺序的限制。
下面说明本申请实施例提供的电子设备的示例性应用，本申请实施例提供的电子设备可以实施为笔记本电脑，平板电脑，台式计算机，机顶盒，移动设备(例如，移动电话，便携式音乐播放器，个人数字助理，专用消息设备，便携式游戏设备，车载设备)等各种类型的用户终端。下面，将说明电子设备实施为终端时示例性应用。
参见图1，图1为本申请实施例提供的基于网页的图片交互系统100的一个可选的架构示意图，为实现支撑一个示例性应用，终端(示例性示出了终端400-1和终端400-2)通过网络300连接服务器200，网络300可以是广域网或者局域网，又或者是二者的组合，使用无线链路实现数据传输。
在一些实施例中，以电子设备是终端为例，本申请实施例提供的基于网页的图片交互方法可由终端单独实施，终端上安装和运行有浏览网页的应用程序，如新闻客户端、即时通讯客户端、搜索引擎等。例如，用户通过终端上安装和运行的应用程序浏览网页时，终端在当前浏览网页的页面中显示包括交互区域和非交互区域的目标图片；在目标图片的交互区域中，显示用于对目标图片进行交互的交互控件；当接收到针对交互控件的第一触发操作时，执行交互控件所指示的针对目标图片的第一交互操作；当接收到针对非交互区域的第二触发操作，且第二触发操作满足交互条件时，执行第二触发操作所指示的针对目标图片的第二交互操作，并呈现对应的交互操作结果。
在一些实施例中，本申请实施例提供的基于网页的图片交互方法可由终端和服务器协调实施。例如，用户在通过终端上安装和运行的应用程序浏览网页时，终端生成并发送信息获取请求至服务器200，服务器200用于基于信息获取请求，确定并返回目标网页的页面内容至终端；终端接收并呈现目标网页的页面内容，如在当前浏览网页的页面中显示包括交互区域和非交互区域的目标图片；在目标图片的交互区域中，显示用于对目标图片进行交互的交互控件；当接收到针对交互控件的第一触发操作时，执行交互控件所指示的针对目标图片的第一交互操作；当接收到针对非交互区域的第二触发操作，且第二触发操作满足交互条件时，执行第二触发操作所指示的针对目标图片的第二交互操作，并呈现对应的交互操作结果。
在一些实施例中，终端或服务器可以通过运行计算机程序来实现本申请实施例提供的基于网页的图片交互方法。举例来说，计算机程序可以是操作系统中的原生程序或软件模块；可以是本地(Native)应用程序(APP，Application)，即需要在操作系统中安装才能运行的程序，如即时通信类的应用程序、搜索引擎类的应用呈现；也可以是小程序，即只需要下载到浏览器环境中就可以运行的程序；还可以是能够嵌入至任意APP中的小程序。总而言之，上述计算机程序可以是任意形式的应用程序、模块或插件。
在一些实施例中，服务器200可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(CDN，ContentDelivery Network)、以及大数据和人工智能平台等基础云计算服务的云服务器，其中，云服务可以是直播处理服务，供终端进行调用。
下面说明本申请实施例提供的基于网页的图片交互方法的电子设备的结构，参见图2，图2为本申请实施例提供的电子设备500的一个可选的结构示意图，在实际应用中，电子设备500可以为图1中的终端或服务器200，以电子设备为图1所示的终端为例，对实施本申请实施例的基于网页的图片交互方法的电子设备进行说明。图2所示的电子设备500包括：至少一个处理器510、存储器550、至少一个网络接口520和用户接口530。电子设备500中的各个组件通过总线系统540耦合在一起。可理解，总线系统540用于实现这些组件之间的连接通信。总线系统540除包括数据总线之外，还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见，在图2中将各种总线都标为总线系统540。
处理器510可以是一种集成电路芯片，具有信号的处理能力，例如通用处理器、数字信号处理器(DSP，Digital Signal Processor)，或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等，其中，通用处理器可以是微处理器或者任何常规的处理器等。
用户接口530包括使得能够呈现媒体内容的一个或多个输出装置531，包括一个或多个扬声器和/或一个或多个视觉显示屏。用户接口530还包括一个或多个输入装置532，包括有助于用户输入的用户接口部件，比如键盘、鼠标、麦克风、触屏显示屏、摄像头、其他输入按钮和控件。
存储器550可以是可移除的，不可移除的或其组合。示例性的硬件设备包括固态存储器，硬盘驱动器，光盘驱动器等。存储器550可选地包括在物理位置上远离处理器510的一个或多个存储设备。
存储器550包括易失性存储器或非易失性存储器，也可包括易失性和非易失性存储器两者。非易失性存储器可以是只读存储器(ROM，Read Only Memory)，易失性存储器可以是随机存取存储器(RAM，Random Access Memory)。本申请实施例描述的存储器550旨在包括任意适合类型的存储器。
在一些实施例中，存储器550能够存储数据以支持各种操作，这些数据的示例包括程序、模块和数据结构或者其子集或超集，下面示例性说明。
操作系统551，包括用于处理各种基本系统服务和执行硬件相关任务的系统程序，例如框架层、核心库层、驱动层等，用于实现各种基础业务以及处理基于硬件的任务；
网络通信模块552，用于经由一个或多个(有线或无线)网络接口520到达其他计算设备，示例性的网络接口520包括：蓝牙、无线相容性认证(WiFi)、和通用串行总线(USB，Universal Serial Bus)等；
呈现模块553，用于经由一个或多个与用户接口530相关联的输出装置531(例如，显示屏、扬声器等)使得能够呈现信息(例如，用于操作外围设备和显示内容和信息的用户接口)；
输入处理模块554，用于对一个或多个来自一个或多个输入装置532之一的一个或多个用户输入或互动进行检测以及翻译所检测的输入或互动。
在一些实施例中，本申请实施例提供的基于网页的图片交互装置可以采用软件方式实现，图2示出了存储在存储器550中的基于网页的图片交互放装置555，其可以是程序和插件等形式的软件，包括以下软件模块：第一显示模块5551、第二显示模块5552、第一直执行模块5553和第二执行模块5554，这些模块是逻辑上的，因此根据所实现的功能可以进行任意的组合或进一步拆分，将在下文中说明各个模块的功能。
在另一些实施例中，本申请实施例提供的基于网页的图片交互装置可以采用硬件方式实现，作为示例，本申请实施例提供的基于网页的图片交互装置可以是采用硬件译码处理器形式的处理器，其被编程以执行本申请实施例提供的基于网页的图片交互方法，例如，硬件译码处理器形式的处理器可以采用一个或多个应用专用集成电路(ASIC，Application Specific Integrated Circuit)、DSP、可编程逻辑器件(PLD，ProgrammableLogic Device)、复杂可编程逻辑器件(CPLD，Complex Programmable Logic Device)、现场可编程门阵列(FPGA，Field-Programmable Gate Array)或其他电子元件。
如前所述，本申请实施例提供的基于网页的图片交互方法可以由各种类型的电子设备实施。参见图3，图3为本申请实施例提供的基于网页的图片交互方法的流程示意图，结合图3示出的步骤进行说明。
步骤101：终端在当前浏览网页的页面中显示目标图片，其中，目标图片包括交互区域和非交互区域。
在实际应用中，终端上安装和运行有浏览网页的应用程序，如阅读类应用、办公类应用、购物类应用、游戏类应用等，当用户通过终端上安装和运行的应用程序浏览网页时，终端中的应用程序通过网络视图的形式嵌入当前浏览网页的页面，如H5页面，并在页面中显示页面的相关内容，如显示以下内容至少之一：文本、图片、视频、音频，当页面中显示有目标图片时，目标图片中显示有供交互的交互区域和非交互区域，其中，交互区域为交互控件所处区域，非交互区域是除了交互控件所处区域之外的其他区域。
步骤102：在目标图片的交互区域中，显示用于对目标图片进行交互的交互控件。
其中，交互控件指示针对目标图片执行相应的第一交互操作，当用户触发交互区域中的交互控件时，终端响应于该触发操作，执行第一交互操作；当用户触发除交互区域之外的非交互区域时，终端响应于该触发操作，执行第二交互操作，其中，第二交互操作即为用户触发非交互区域所触发的交互逻辑对应的操作(如长按保存图片的操作)，第一交互操作是区别于第二交互操作的其他操作，如对目标图片关联的应用(如购物、游戏等应用)进行下载的操作、对目标图片中的元素进行调整(如翻转、缩放、美化等)的操作、对目标图片中的文案进行翻页刷新的操作，等等。
步骤103：当接收到针对交互控件的第一触发操作时，执行交互控件所指示的针对目标图片的第一交互操作。
在一些实施例中，终端可通过如下方式执行交互控件所指示的针对目标图片的第一交互操作：呈现交互提示信息，其中，交互提示信息，用于提示针对目标图片执行交互操作；响应于针对交互提示信息的确定指令，执行交互控件所指示的针对目标图片的交互操作。
参见图4，图4为本申请实施例提供的交互操作执行界面示意图，在实际应用中，当用户触发交互控件A1时，终端在接收到第一触发操作后、在执行第一交互操作前，可先呈现，如“将执行xxxx交互操作，请确认是否允许”的提示信息A2，用于提示用户针对目标图片执行相应交互操作，待用户点击确认案件同意后，方可执行交互操作。
在一些实施例中，终端可通过如下方式执行交互控件所指示的针对目标图片的第一交互操作：当目标图片的内容与目标应用相关联、且交互控件指示下载目标应用时，响应于第一触发操作，确定当前终端未下载目标应用时，执行针对目标应用的下载操作，并呈现下载目标应用的进度提示信息。
其中，目标应用可为但不限于以下应用：游戏应用、购物应用、阅读应用等，当目标图片的内容是与目标应用相关联、且交互控件指示对目标应用进行下载时，如图10所示的“下载游戏”这一交互控件，终端响应于针对交互控件的触发操作，判断当前终端是否已下载过目标应用，当确定当前终端未下载目标应用时，可直接下载目标应用，或呈现用于用户进行目标应用下载的提示信息供用户确认，当用户确认下载时，执行下载操作，并展示下载进度提示信息，下载进度提示信息可通过悬浮于页面中的浮层的方式进行展示，也可通过独立于页面的下载页面进行展示。
在一些实施例中，终端可通过如下方式执行交互控件所指示的针对目标图片的第一交互操作：当目标图片包含第一标签元素，且交互控件指示对第一标签元素进行调整时，响应于第一触发操作，执行交互控件所指示的针对第一标签元素的调整操作。
其中，调整可为对第一标签元素执行翻转、缩放、美化等操作。参见图5，图5为本申请实施例提供的交互操作执行界面示意图，目标图片包含第一标签元素501，以及用于对第一标签元素501进行调整的交互控件502，终端响应于针对交互控件502的触发操作，对第一标签元素501执行翻转的交互操作。
在一些实施例中，终端可通过如下方式执行交互控件所指示的针对目标图片的第一交互操作：当目标图片包含第二标签元素，且交互控件指示对第二标签元素进行切换时，响应于第一触发操作，执行交互控件所指示的针对第二标签元素的切换操作。
这里，当目标图片包含可切换的第二标签元素时，呈现对应第二标签元素的交互控件，交互控件用于对第二标签元素进行切换。参见图6，图6为本申请实施例提供的交互操作执行界面示意图，目标图片包含第二标签元素601，以及用于对第二标签元素601进行切换的交互控件602，终端响应于针对交互控件602的触发操作，对第二标签元素601执行切换的交互操作，如将第二标签元素601切换为其他第二标签元素603。
在一些实施例中，终端可通过如下方式执行交互控件所指示的针对目标图片的第一交互操作：当目标图片包含第三标签元素，且交互控件指示对第三标签元素进行搜索时，响应于第一触发操作，执行交互控件所指示的针对第三标签元素的搜索操作，并呈现针对搜索操作的搜索结果。
这里，当目标图片包含能够进行搜索的第三标签元素时，呈现对应第三标签元素的交互控件，交互控件用于对第三标签元素进行搜索。参见图7，图7为本申请实施例提供的交互操作执行界面示意图，目标图片包含第三标签元素701，以及用于对第三标签元素701进行搜索的交互控件702，终端响应于针对交互控件702的触发操作，对第三标签元素701执行搜索的交互操作，并展示搜索结果703。
在一些实施例中，终端可通过如下方式执行交互控件所指示的针对目标图片的第一交互操作：当交互控件指示对页面进行刷新时，响应于第一触发操作，执行交互控件所指示的针对当前浏览网页的页面的刷新操作。
如图10所示，对于“让子弹再飞一会”这一交互控件，该交互控件指示对页面执行刷新操作，终端响应于针对交互控件的触发操作，执行对当前浏览网页的页面进行刷新操作。此外，交互控件还可用于对目标图片进行刷新，子弹响应于针对交互控件的触发操作，执行对多目标图片进行刷新操作。
在一些实施例中，终端可通过如下方式执行交互控件所指示的针对目标图片的第一交互操作：当交互控件指示对目标图片进行评价时，响应于第一触发操作，呈现用于对目标图片进行评价的编辑界面；响应于基于编辑界面触发的编辑操作，在目标图片的关联区域中呈现编辑操作所编辑的评价信息。
参见图8，图8为本申请实施例提供的交互操作执行界面示意图，交互控件为对目标图片进行评价的入口，当用户触发该交互控件时，终端响应于触发操作，呈现供用户编辑评价信息的编辑界面，当用户基于编辑界面输入评价信息、并发送评价信息时，评价信息即可在页面中或目标图片中的关联区域中，以类似弹幕的样式进行展示。
需要说明的是，交互区域中可以包括以上不同功能的交互控件中的一个或多个，当交互区域中包括多个不同功能的交互控件时，用户可根据需求触发其中的一个或多个交互控件，相应的终端所执行的第一交互操作的数量可以为一个或多个。
步骤104：当接收到针对非交互区域的第二触发操作，且第二触发操作满足交互条件时，执行第二触发操作所指示的针对目标图片的第二交互操作。
其中，第二交互操作不同于第一交互操作，第二交互操作可为用户长按非交互区域所触发交互逻辑对应的操作(如长按保存图片的操作)，第一交互操作是区别于第二交互操作的其他操作，如以上对目标图片关联的应用(如购物、游戏等应用)进行下载的操作、对目标图片中的元素进行调整(如翻转、缩放、美化等)的操作、对目标图片中的文案进行翻页刷新的操作，等等。
在一些实施例中，终端可通过如下方式执行第二触发操作所指示的针对目标图片的第二交互操作：呈现对应至少两个交互操作的交互选项；基于交互选项，响应于针对至少两个交互操作中目标交互操作的选择操作，执行针对目标图片的目标交互操作。
其中，交互选项可通过弹窗或浮层的方式在当前浏览的页面中进行展示，也可以通过独立于当前浏览的页面的子页面进行展示。参见图9，图9为本申请实施例提供的交互操作执行界面示意图，当终端接收到针对非交互区域的第二触发操作时，呈现多个可供选择的交互操作(如分享、保存、搜藏、识别图中二维码等)对应的交互选项，当用户选择目标选项时，将所选择的目标选项对应的交互操作作为目标交互操作，并针对目标图片执行目标交互操作。
在一些实施例中，当终端接收到针对非交互区域的第二触发操作，如长按操作、且长按操作用于指示对目标图片进行保存时，终端响应于第二触发操作，可直接执行第二触发操作所指示的针对目标图片的保存操作，或者，在执行保存操作前，先呈现用于提示对目标图片进行保存的提示信息，当用户基于提示信息确认对目标图片进行保存后，再针对目标图片执行保存操作。
在一些实施例中，终端执行步骤101之前，在当前浏览网页的页面中显示目标图片之前，可通过如下方式构造页面对应的源文件：获取当页面不包括目标图片时所对应的第一源文件、第一源文件的内容体、以及目标图片对应的标签代码；遍历第一源文件的内容体，将目标图片的标签代码作为子节点添加到内容体中，得到页面包括目标图片时对应的第二源文件；其中，第二源文件用于在页面被渲染时，在渲染得到的页面中显示目标图片。
这里，若想在目标页面中显示目标图片，目标页面是指不包括目标图片的页面，则在实际实施时，可采用JS注入的方式在目标页面中添加目标图片，如获取目标图片的标签代码(JS代码)，根据目标网页中包括的链接地址信息，查询目标网页的第一源文件(HTML文件)，进而遍历HTML文件的内容体，将目标图片的标签代码(JS代码)以内容体下的一个新子节点(作为一个新标签内容)添加到内容体中，得到目标网页包括目标图片时对应的第二源文件，这样，当浏览器在加载第二源文件渲染页面时，即可在渲染得到的页面中显示添加的目标图片，其中，在目标图片的标签代码中可以设置目标图片的内容、样式等信息。
在一些实施例中，终端可通过如下方式获取目标图片对应的标签代码：确定目标图片对应的图层架构，图层架构用于指示组成目标图片的标签元素的图层，包括静态层、原始交互层、交互对象层、实际交互层；其中，静态层用于存储与页面相对应的图片；原始交互层用于响应第一触发操作对应的触发事件；交互对象层用于响应第二触发操作对应的触发事件；实际交互层用于响应于第一触发操作或第二触发操作，生成对应的触发事件，并将触发事件传递至相应的图层；基于层级关系，对目标图片所包括的标签元素进行代码构建，得到目标图片的标签代码，为了便于访问标签代码，标签代码可以DOM的样式进行表征。
如图11所示，页面中呈现的目标图片对应的图层架构，按照图层由低到高(即由下至上)排序依次为：第一层：静态层，用于存储不参与交互的静态图或动态图等背景图片；第二层：原始交互层，用于实际响应第一触发操作对应的触发事件，存储有原始控件；第三层：交互对象层，用于实际响应第二触发操作对应的触发事件，存储有参与实际交互的渲染图片；第四层：实际交互层，预先在该层设置监听事件，如监听针对交互控件的第一触发操作对应的第一触发事件，并将第一触发事件传递至第二层，又如监听针对非交互区域的第二触发操作对应的第二触发事件，并将第二触发事件传递至第三层。
在创建目标图片的图片标签时，可将渲染图片和交互控件的透明度设置为0，此时，用户视觉上在网页中看到的目标图片即为静态层与原始交互层叠加得到的图片，包括背景图片和原始控件；其中，渲染图片为执行交互操作的对象，渲染图片与背景图片可相同也可不同，如假设第二交互操作为保存操作，当渲染图片与背景图片不同时，则针对目标图片的保存操作所保存的图片实质为渲染图片。
在一些实施例中，终端在构建交互控件时，获取原始控件在原始交互层中的位置信息和尺寸信息；基于位置信息和尺寸信息，在实际交互层创建与原始控件的位置信息和尺寸信息相一致的交互控件；将针对交互控件的触发事件与针对原始控件的触发事件进行绑定，构建原始控件与交互控件之间的关联关系。
其中，实际交互层中的交互控件用于替代原始交互层中的原始控件，在构建交互控件时，获取原始控件的位置信息(在原始交互层中的坐标)和尺寸信息(原始控件的宽度、高度)，创建与原始控件完全相一致的交互控件，将新创建的交互控件添加至页面中，以及将实际交互层中交互控件与原始交互层中相应原始控件进行关联，即将实际交互层中交互控件的触发事件与原始交互层中相应的原始控件的触发事件进行绑定，当实际交互层中的交互控件接收到触发操作时，将触发操作对应的触发事件传递至原始交互层。
在一些实施例中，终端可通过如下方式实现当接收到针对交互控件的第一触发操作时，执行交互控件所指示的针对目标图片的第一交互操作：当实际交互层接收到针对交互控件的第一触发操作时，通过实际交互层将第一触发操作对应的触发事件传递至原始交互层，并通过原始交互层执行交互控件所指示的针对目标图片的第一交互操作。
在一些实施例中，终端可通过如下方式实现当接收到针对非交互区域的第二触发操作，且第二触发操作满足交互条件时，执行第二触发操作所指示的针对目标图片的第二交互操作：当实际交互层接收到针对非交互区域的第二触发操作、且第二触发操作满足交互条件时，基于交互对象层与实际交互层之间的关联关系，通过实际交互层将第二触发操作对应的触发事件传递至交互对象层，并通过交互对象层执行针对交互图片的第二交互操作。
其中，确定第二触发操作是否满足交互条件可通过判断第二触发操作的参数是否满足预先设定的参数或触发动作方式来实现，例如，参数为时长，当第二触发操作的时长达到预先设置好能够触发第二交互操作的目标时长(如2秒)时，确定第二触发操作满足交互条件；又例如，参数为触发动作方式(例如滑动、拖动、双击等)，当第二触发操作的触发动作方式与预先设置好能够触发第二交互操作的目标动作方式相一致时，确定第二触发操作满足交互条件。
下面，将说明本申请实施例在一个实际的应用场景中的示例性应用。相关技术在web端仅能通过长按图片触发交互逻辑，如仅能通过长按图片实现图片保存，交互方式比较单一；为此，本申请实施例提供一种基于网页的图片交互方法，在保留长按图片触发交互逻辑的基础上，通过在图片上提供的可:操作的交互控件实现其他交互行为，进而丰富了网页中图片交互方式。
参见图10，图10为本申请实施例提供的页面显示示意图，在当前浏览网页的页面中呈现目标图片，其中，目标图片包括交互区域和非交互区域，交互区域为交互控件所处区域，非交互区域是除了交互控件所处区域之外的其他区域，当接收到针对交互控件的第一触发操作时，将执行交互控件所指示的针对目标图片的第一交互操作；当接收到针对非交互区域的第二触发操作，且第二触发操作满足交互条件时，执行第二触发操作所指示的针对目标图片的第二交互操作。其中，第二交互操作即为用户长按非交互区域所触发的长按交互逻辑对应的操作(如长按保存图片的操作)，第一交互操作是基于交互控件触发的交互逻辑对应的操作，区别于第二交互操作，如对目标图片关联的应用(如购物、游戏等应用)进行下载的操作、对目标图片中的元素进行调整(如翻转、缩放、美化等)的操作、对目标图片中的文案进行翻页刷新的操作，等等。
参见图11，图11为本申请实施例提供的图层架构示意图，页面中呈现的目标图片对应的图层架构，按照图层由低到高(即由下至上)排序依次为：第一层：静态层，用于存储不参与交互的静态图或动态图等背景图片；第二层：原始交互层，存储有原始控件，用于响应第一触发操作对应的触发事件；第三层：交互对象层，存储有参与实际交互的渲染图片，用于响应第二触发操作对应的触发事件，如用户长按非交互区域触发图片保存；第四层：实际交互层，存储有替换原始控件的交互控件，预先在该层设置监听事件，并将监听到的事件传递至相应图层。
参见图12，图12为本申请实施例提供的事件传递示意图，当实际交互层监听到针对交互控件的第一触发操作对应的第一触发事件时，通过实际交互层将第一触发事件传递至原始交互层，并通过原始交互层执行交互控件所指示的针对目标图片的第一交互操作，即执行交互控件触发的交互逻辑对应的操作；当实际交互层监听针对非交互区域的第二触发操作对应的第二触发事件时，通过实际交互层将第二触发事件传递至交互对象层，通过交互对象层执行针对交互图片的第二交互操作，即执行长按交互逻辑对应的操作，如长按图片保存操作。
参见图13，图13为本申请实施例提供的基于网页的图片交互方法的流程示意图，该方法包括：
步骤201：终端构建包含目标图片时页面所对应的源文件。
在实际应用中，若想在页面中显示目标图片，需先构建包含目标图片的页面，在实际实施时，可利用HTML构建页面，首先创建目标图片的JS代码，具体地，创建上述第三层中渲染图片的图片标签，并将渲染图片的透明度设置为0；获取第二层中原始控件的位置信息和尺寸信息，并在第四层创建与原始控件的位置信息和尺寸信息相一致的交互控件，将针对交互控件的触发事件与针对原始控件的触发事件进行绑定；然后，查询网页的HTML文件，遍历HTML文件的内容体，将目标图片的JS代码以内容体下的一个新子节点添加到内容体中，得到包含目标图片时网页对应的HTML文件，这样，当浏览器在加载HTML文件渲染页面时，即可在渲染得到的页面中显示添加的目标图片。
其中，可将第四层中的交互控件的透明度设置为0，如此，用户视觉上在网页中看到的目标图片即为静态层与第二层叠加得到的图片，包括背景图片和原始控件；其中，第三层的渲染图片为执行交互操作的对象，第三层的渲染图片与静态层的背景图片可相同也可不同，如假设第二交互操作为保存操作，当渲染图片与背景图片不同时，则针对目标图片的保存操作所保存的图片实质为渲染图片。
步骤202：加载源文件，并在当前浏览网页的页面中显示目标图片。
这里，当用户通过终端上安装和运行的应用程序浏览网页时，将加载包含目标图片时页面所对应的源文件，对页面进行渲染，并在渲染得到的页面中显示目标图片，目标图片包括交互区域和非交互区域。
步骤203：在目标图片的交互区域中显示用于对目标图片进行交互的交互控件。
其中，交互控件是存储在实际交互层中用于替换第二层中原始控件的控件。
步骤204：接收到针对目标图片的触发操作。
步骤205：判断触发操作是否为针对交互控件的触发操作。
这里，当针对目标图片的触发操作是针对目标图片中交互控件的触发操作时，执行步骤206；否则，执行步骤208。
步骤206：通过实际交互层将触发操作对应的第一触发事件传递至原始交互层。
这里，实际交互层预先设置有监听事件，当针对目标图片的触发操作是针对交互控件的触发操作时，通过实际交互层将针对交互控件的触发操作对应的触发事件传递至原始交互层。
步骤207：通过原始交互层执行交互控件所指示的针对目标图片的第一交互操作。
例如，当交互控件指示对目标图片关联的应用(如购物、游戏等应用)进行下载时，执行应用下载操作，又如，当交互控件指示对目标图片中的元素进行调整(如翻转、缩放、美化等)时，执行元素调整操操作，等等。
步骤208：确定触发操作的触发时长达到目标时长时，通过实际交互层将触发操作对应的第二触发事件传递至交互对象层。
这里，当针对目标图片的触发操作不是针对交互控件的触发操作时，该触发操作即为针对非交互区域的触发操作，然后，判断触发操作是否满足交互条件，如可通过判断触发操作的触发时长是否达到预先设置好能够触发相应交互操作的目标时长，当确定触发操作的触发时长达到目标时长时，触发交互逻辑，通过实际交互层将触发操作对应的触发事件传递至交互对象层。
步骤209：通过交互对象层执行针对交互图片的第二交互操作。
其中，第二交互操作不同于第一交互操作，例如，对目标图片执行保存操作。
通过上述方式，在当前浏览网页的页面中浏览目标图片的过程中，当接收到针对目标图片中交互区域的交互控件的触发操作时，执行相应的第一交互操作，当接收到针对目标图片中非交互区域的触发操作时，执行不同于第一交互操作的第二交互操作，如此，在保留长按图片触发交互逻辑的基础上，通过在图片上提供的可操作的交互控件实现其他交互行为，丰富了网页中图片交互方式。
下面继续说明本申请实施例提供的基于网页的图片交互装置555的实施为软件模块的示例性结构，在一些实施例中，存储在图2中存储器550的基于网页的图片交互装置555中的软件模块可以包括：
第一显示模块5551，用于在当前浏览网页的页面中显示目标图片，所述目标图片包括交互区域和非交互区域；
第二显示模块5552，用于在所述目标图片的交互区域中，显示用于对所述目标图片进行交互的交互控件；
第一执行模块5553，用于当接收到针对所述交互控件的第一触发操作时，执行所述交互控件所指示的针对所述目标图片的第一交互操作；
第二执行模块5554，用于当接收到针对所述非交互区域的第二触发操作，且所述第二触发操作满足交互条件时，执行所述第二触发操作所指示的针对所述目标图片的第二交互操作，所述第二交互操作不同于所述第一交互操作。
在一些实施例中，所述第一执行模块，还用于呈现交互提示信息，所述交互提示信息，用于提示针对所述目标图片执行交互操作；
响应于针对所述交互提示信息的确定指令，执行所述交互控件所指示的针对所述目标图片的交互操作。
在一些实施例中，所述第二执行模块，还用于呈现对应至少两个交互操作的交互选项；
基于所述交互选项，响应于针对所述至少两个交互操作中目标交互操作的选择操作，执行针对所述目标图片的所述目标交互操作。
在一些实施例中，所述第一执行模块，还用于当所述目标图片的内容与目标应用相关联、且所述交互控件指示下载目标应用时，响应于所述第一触发操作，确定当前终端未下载所述目标应用时，执行针对所述目标应用的下载操作，并呈现下载所述目标应用的进度提示信息。
在一些实施例中，所述第一执行模块，还用于当所述目标图片包含第一标签元素，且所述交互控件指示对所述第一标签元素进行调整时，响应于所述第一触发操作，执行所述交互控件所指示的针对所述第一标签元素的调整操作。
在一些实施例中，所述第一执行模块，还用于当所述目标图片包含第二标签元素，且所述交互控件指示对所述第二标签元素进行切换时，响应于所述第一触发操作，执行所述交互控件所指示的针对所述第二标签元素的切换操作。
在一些实施例中，所述第一执行模块，还用于当所述目标图片包含第三标签元素，且所述交互控件指示对所述第三标签元素进行搜索时，响应于所述第一触发操作，执行所述交互控件所指示的针对所述第三标签元素的搜索操作，并呈现针对所述搜索操作的搜索结果。
在一些实施例中，所述第一执行模块，还用于当所述交互控件指示对所述页面进行刷新时，响应于所述第一触发操作，执行所述交互控件所指示的针对所述当前浏览网页的页面的刷新操作。
在一些实施例中，所述第一执行模块，还用于当所述交互控件指示对所述目标图片进行评价时，响应于所述第一触发操作，呈现用于对所述目标图片进行评价的编辑界面；
响应于基于所述编辑界面触发的编辑操作，在所述目标图片的关联区域中呈现所述编辑操作所编辑的评价信息。
在一些实施例中，所述在当前浏览网页的页面中显示目标图片之前，所述装置还包括：
文件构建模块，用于获取当所述页面不包括所述目标图片时所对应的第一源文件、所述第一源文件的内容体、以及所述目标图片对应的标签代码；
遍历所述第一源文件的内容体，将所述目标图片的标签代码添加到所述内容体中，得到所述页面包括所述目标图片时对应的第二源文件；
其中，所述第二源文件，用于在所述页面被渲染时，在渲染得到的页面中显示所述目标图片。
在一些实施例中，所述文件构建模块，还用于确定所述目标图片对应的图层架构，所述图层架构用于指示组成所述目标图片的标签元素的图层，包括静态层、原始交互层、交互对象层、实际交互层；
其中，所述静态层用于存储与所述页面相对应的图片；所述原始交互层用于响应所述第一触发操作对应的触发事件；所述交互对象层用于响应所述第二触发操作对应的触发事件；所述实际交互层用于响应于所述第一触发操作或所述第二触发操作，生成对应的触发事件，并将所述触发事件传递至相应的图层；
基于所述层级关系，对所述目标图片所包括的标签元素进行代码构建，得到所述目标图片的标签代码。
在一些实施例中，所述装置还包括：事件绑定模块，用于获取所述原始控件在所述原始交互层中的位置信息和尺寸信息；
基于所述位置信息和所述尺寸信息，在所述实际交互层中创建与所述原始控件的位置信息和尺寸信息相一致的交互控件；
将针对所述交互控件的触发事件与针对所述原始控件的触发事件进行绑定，构建所述原始控件与所述交互控件之间的关联关系。
在一些实施例中，所述第一执行模块，还用于当所述实际交互层接收到针对所述交互控件的第一触发操作时，通过所述实际交互层将所述第一触发操作对应的触发事件传递至所述原始交互层，并通过所述原始交互层执行所述交互控件所指示的针对所述目标图片的第一交互操作。
在一些实施例中，所述第二执行模块，还用于当所述实际交互层接收到针对所述非交互区域的第二触发操作、且所述第二触发操作满足交互条件时，基于所述交互对象层与所述实际交互层之间的关联关系，通过所述实际交互层将所述第二触发操作对应的触发事件传递至所述交互对象层，并通过所述交互对象层执行针对所述交互图片的第二交互操作。
本申请实施例提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行本申请实施例上述的基于网页的图片交互方法。
本申请实施例提供一种存储有可执行指令的计算机可读存储介质，其中存储有可执行指令，当可执行指令被处理器执行时，将引起处理器执行本申请实施例提供的基于网页的图片交互方法，例如，如图3示出的方法。
在一些实施例中，计算机可读存储介质可以是FRAM、ROM、PROM、EPROM、EEPROM、闪存、磁表面存储器、光盘、或CD-ROM等存储器；也可以是包括上述存储器之一或任意组合的各种设备。
在一些实施例中，可执行指令可以采用程序、软件、软件模块、脚本或代码的形式，按任意形式的编程语言(包括编译或解释语言，或者声明性或过程性语言)来编写，并且其可按任意形式部署，包括被部署为独立的程序或者被部署为模块、组件、子例程或者适合在计算环境中使用的其它单元。
作为示例，可执行指令可以但不一定对应于文件系统中的文件，可以可被存储在保存其它程序或数据的文件的一部分，例如，存储在超文本标记语言(HTML，Hyper TextMarkup Language)文档中的一个或多个脚本中，存储在专用于所讨论的程序的单个文件中，或者，存储在多个协同文件(例如，存储一个或多个模块、子程序或代码部分的文件)中。
作为示例，可执行指令可被部署为在一个计算设备上执行，或者在位于一个地点的多个计算设备上执行，又或者，在分布在多个地点且通过通信网络互连的多个计算设备上执行。
以上所述，仅为本申请的实施例而已，并非用于限定本申请的保护范围。凡在本申请的精神和范围之内所作的任何修改、等同替换和改进等，均包含在本申请的保护范围之内。

Claims (18)

1.一种基于网页的图片交互方法，其特征在于，所述方法包括：
在当前浏览网页的页面中显示目标图片，所述目标图片包括交互区域和非交互区域；
在所述目标图片的交互区域中，显示用于对所述目标图片进行交互的交互控件；
当接收到针对所述交互控件的第一触发操作时，执行所述交互控件所指示的针对所述目标图片的第一交互操作；
当接收到针对所述非交互区域的第二触发操作，且所述第二触发操作满足交互条件时，执行所述第二触发操作所指示的针对所述目标图片的第二交互操作，所述第二交互操作不同于所述第一交互操作。
2.如权利要求1所述的方法，其特征在于，所述执行所述交互控件所指示的针对所述目标图片的第一交互操作，包括：
呈现交互提示信息，所述交互提示信息，用于提示针对所述目标图片执行交互操作；
响应于针对所述交互提示信息的确定指令，执行所述交互控件所指示的针对所述目标图片的交互操作。
3.如权利要求1所述的方法，其特征在于，所述执行所述第二触发操作所指示的针对所述目标图片的第二交互操作，包括：
呈现对应至少两个交互操作的交互选项；
基于所述交互选项，响应于针对所述至少两个交互操作中目标交互操作的选择操作，执行针对所述目标图片的所述目标交互操作。
4.如权利要求1所述的方法，其特征在于，所述执行所述交互控件所指示的针对所述目标图片的第一交互操作，包括：
当所述目标图片的内容与目标应用相关联、且所述交互控件指示下载目标应用时，响应于所述第一触发操作，确定当前终端未下载所述目标应用时，执行针对所述目标应用的下载操作，并呈现下载所述目标应用的进度提示信息。
5.如权利要求1所述的方法，其特征在于，所述执行所述交互控件所指示的针对所述目标图片的第一交互操作，包括：
当所述目标图片包含第一标签元素，且所述交互控件指示对所述第一标签元素进行调整时，响应于所述第一触发操作，执行所述交互控件所指示的针对所述第一标签元素的调整操作。
6.如权利要求1所述的方法，其特征在于，所述执行所述交互控件所指示的针对所述目标图片的第一交互操作，包括：
当所述目标图片包含第二标签元素，且所述交互控件指示对所述第二标签元素进行切换时，响应于所述第一触发操作，执行所述交互控件所指示的针对所述第二标签元素的切换操作。
7.如权利要求1所述的方法，其特征在于，所述执行所述交互控件所指示的针对所述目标图片的第一交互操作，包括：
当所述目标图片包含第三标签元素，且所述交互控件指示对所述第三标签元素进行搜索时，响应于所述第一触发操作，执行所述交互控件所指示的针对所述第三标签元素的搜索操作，并呈现针对所述搜索操作的搜索结果。
8.如权利要求1所述的方法，其特征在于，所述执行所述交互控件所指示的针对所述目标图片的第一交互操作，包括：
当所述交互控件指示对所述页面进行刷新时，响应于所述第一触发操作，执行所述交互控件所指示的针对所述当前浏览网页的页面的刷新操作。
9.如权利要求1所述的方法，其特征在于，所述执行所述交互控件所指示的针对所述目标图片的第一交互操作，包括：
当所述交互控件指示对所述目标图片进行评价时，响应于所述第一触发操作，呈现用于对所述目标图片进行评价的编辑界面；
响应于基于所述编辑界面触发的编辑操作，在所述目标图片的关联区域中呈现所述编辑操作所编辑的评价信息。
10.如权利要求1所述的方法，其特征在于，所述在当前浏览网页的页面中显示目标图片之前，所述方法还包括：
获取当所述页面不包括所述目标图片时所对应的第一源文件、所述第一源文件的内容体、以及所述目标图片对应的标签代码；
遍历所述第一源文件的内容体，将所述目标图片的标签代码添加到所述内容体中，得到所述页面包括所述目标图片时对应的第二源文件；
其中，所述第二源文件，用于在所述页面被渲染时，在渲染得到的页面中显示所述目标图片。
11.如权利要求10所述的方法，其特征在于，所述获取所述目标图片对应的标签代码，包括：
确定所述目标图片对应的图层架构，所述图层架构用于指示组成所述目标图片的标签元素的图层，包括静态层、原始交互层、交互对象层、实际交互层；
其中，所述静态层用于存储与所述页面相对应的图片；所述原始交互层用于响应所述第一触发操作对应的触发事件；所述交互对象层用于响应所述第二触发操作对应的触发事件；所述实际交互层用于响应于所述第一触发操作或所述第二触发操作，生成对应的触发事件，并将所述触发事件传递至相应的图层；
基于所述层级关系，对所述目标图片所包括的标签元素进行代码构建，得到所述目标图片的标签代码。
12.如权利要求11所述的方法，其特征在于，所述方法还包括：
获取所述原始控件在所述原始交互层中的位置信息和尺寸信息；
基于所述位置信息和所述尺寸信息，在所述实际交互层中创建与所述原始控件的位置信息和尺寸信息相一致的交互控件；
将针对所述交互控件的触发事件与针对所述原始控件的触发事件进行绑定，构建所述原始控件与所述交互控件之间的关联关系。
13.如权利要求11所述的方法，其特征在于，所述当接收到针对所述交互控件的第一触发操作时，执行所述交互控件所指示的针对所述目标图片的第一交互操作，包括：
当所述实际交互层接收到针对所述交互控件的第一触发操作时，通过所述实际交互层将所述第一触发操作对应的触发事件传递至所述原始交互层，并
通过所述原始交互层执行所述交互控件所指示的针对所述目标图片的第一交互操作。
14.如权利要求11所述的方法，其特征在于，所述当接收到针对所述非交互区域的第二触发操作，且所述第二触发操作满足交互条件时，执行所述第二触发操作所指示的针对所述目标图片的第二交互操作，包括：
当所述实际交互层接收到针对所述非交互区域的第二触发操作、且所述第二触发操作满足交互条件时，通过所述实际交互层将所述第二触发操作对应的触发事件传递至所述交互对象层，并
通过所述交互对象层执行针对所述交互图片的第二交互操作。
15.一种基于网页的图片交互装置，其特征在于，所述装置包括：
第一显示模块，用于在当前浏览网页的页面中显示目标图片，所述目标图片包括交互区域和非交互区域；
第二显示模块，用于在所述目标图片的交互区域中，显示用于对所述目标图片进行交互的交互控件；
第一执行模块，用于当接收到针对所述交互控件的第一触发操作时，执行所述交互控件所指示的针对所述目标图片的第一交互操作；
第二执行模块，用于当接收到针对所述非交互区域的第二触发操作，且所述第二触发操作满足交互条件时，执行所述第二触发操作所指示的针对所述目标图片的第二交互操作，所述第二交互操作不同于所述第一交互操作。
16.一种电子设备，其特征在于，包括：
存储器，用于存储可执行指令；
处理器，用于执行所述存储器中存储的可执行指令时，实现权利要求1至14任一项所述的基于网页的图片交互方法。
17.一种计算机可读存储介质，其特征在于，存储有可执行指令，用于被处理器执行时，实现权利要求1至14任一项所述的基于网页的图片交互方法。
18.一种计算机程序产品，包括计算机程序或指令，其特征在于，所述计算机程序或指令被处理器执行时实现权利要求1至14任一项所述的基于网页的图片交互方法。
CN202111151581.5A 2021-09-29 2021-09-29 基于网页的图片交互方法、装置、设备、介质及程序产品 Active CN113792208B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111151581.5A CN113792208B (zh) 2021-09-29 2021-09-29 基于网页的图片交互方法、装置、设备、介质及程序产品

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111151581.5A CN113792208B (zh) 2021-09-29 2021-09-29 基于网页的图片交互方法、装置、设备、介质及程序产品

Publications (2)

Publication Number Publication Date
CN113792208A true CN113792208A (zh) 2021-12-14
CN113792208B CN113792208B (zh) 2023-06-20

Family

ID=78877519

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111151581.5A Active CN113792208B (zh) 2021-09-29 2021-09-29 基于网页的图片交互方法、装置、设备、介质及程序产品

Country Status (1)

Country Link
CN (1) CN113792208B (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115129553A (zh) * 2022-07-04 2022-09-30 北京百度网讯科技有限公司 图可视化方法、装置、设备、介质及产品
CN115827144A (zh) * 2023-02-20 2023-03-21 北京集度科技有限公司 一种页面展示方法、系统、电子设备及计算机程序产品

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CA2373707A1 (en) * 2001-02-28 2002-08-28 Paul Besl Method and system for processing, compressing, streaming and interactive rendering of 3d color image data
WO2013078989A1 (zh) * 2011-11-28 2013-06-06 腾讯科技（深圳）有限公司 人机交互操作指令的触发控制方法和系统
CN103677552A (zh) * 2012-09-12 2014-03-26 腾讯科技（深圳）有限公司 一种网页中图片的控制和展示方法、及其装置
CN104156151A (zh) * 2014-07-22 2014-11-19 小米科技有限责任公司 图片显示方法和装置
CN109582891A (zh) * 2018-11-16 2019-04-05 百度在线网络技术（北京）有限公司 网页图片展示方法、装置、电子设备及存储介质
CN112215924A (zh) * 2020-10-27 2021-01-12 腾讯科技（深圳）有限公司 一种图片评论的处理方法、装置、电子设备和存储介质
CN113253903A (zh) * 2021-05-13 2021-08-13 维沃移动通信有限公司 操作方法及操作装置

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CA2373707A1 (en) * 2001-02-28 2002-08-28 Paul Besl Method and system for processing, compressing, streaming and interactive rendering of 3d color image data
WO2013078989A1 (zh) * 2011-11-28 2013-06-06 腾讯科技（深圳）有限公司 人机交互操作指令的触发控制方法和系统
CN103677552A (zh) * 2012-09-12 2014-03-26 腾讯科技（深圳）有限公司 一种网页中图片的控制和展示方法、及其装置
CN104156151A (zh) * 2014-07-22 2014-11-19 小米科技有限责任公司 图片显示方法和装置
CN109582891A (zh) * 2018-11-16 2019-04-05 百度在线网络技术（北京）有限公司 网页图片展示方法、装置、电子设备及存储介质
CN112215924A (zh) * 2020-10-27 2021-01-12 腾讯科技（深圳）有限公司 一种图片评论的处理方法、装置、电子设备和存储介质
CN113253903A (zh) * 2021-05-13 2021-08-13 维沃移动通信有限公司 操作方法及操作装置

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
张金;刘小飞;: "Web网页控件的智能识别及其自动化操作", 计算机系统应用, no. 04 *
熊昭: "基于易用性的生活服务类APP界面设计研究", 中国优秀硕士学位论文全文数据库, no. 4 *

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115129553A (zh) * 2022-07-04 2022-09-30 北京百度网讯科技有限公司 图可视化方法、装置、设备、介质及产品
CN115827144A (zh) * 2023-02-20 2023-03-21 北京集度科技有限公司 一种页面展示方法、系统、电子设备及计算机程序产品

Also Published As

Publication number Publication date
CN113792208B (zh) 2023-06-20

Similar Documents

Publication Publication Date Title
US10936179B2 (en) Methods and systems for web content generation
KR102436987B1 (ko) 웹페이지 콘텐츠를 추출하기 위한 방법 및 단말 장치
CN104077387B (zh) 一种网页内容显示方法和浏览器装置
US10909304B2 (en) Methods and systems for WYSIWYG web content generation
Firtman jQuery Mobile: Up and Running: Up and Running
CN104834753A (zh) 生成网页截图的方法及其装置
CN104133828A (zh) 用于html文档的拖放剪贴板
CN113792208B (zh) 基于网页的图片交互方法、装置、设备、介质及程序产品
US20150248722A1 (en) Web based interactive multimedia system
US20230229406A1 (en) Page rendering method, apparatus, electronic device, computer-readable storage medium, and computer program product
CN106533926B (zh) 一种网页信息传播方法以及装置
CN114065080B (zh) 页面渲染方法、装置、设备及计算机可读存储介质
US20130124974A1 (en) System for Assembling Webpage's Region of Other Website into a Webpage of a Website and Method for the Same
CN108319474B (zh) 一种页面信息生成方法、装置和设备
CN110968314A (zh) 一种页面生成方法及装置
CN101876998B (zh) 一种实现数据编辑的方法和系统
CN112711731A (zh) 数据埋点方法、装置、设备及存储介质
CN105867984A (zh) 在网页中显示任务状态的方法、装置、客户端和移动设备
CN110244948B (zh) 基于编程语言对按钮状态进行切换的方法以及电子设备
CN113868565A (zh) 皮肤样式的文件编辑方法及装置
CN114691113A (zh) 业务组件生成及开发方法、系统、装置、设备及存储介质
CN114168875A (zh) 一种页面程序的生成方法、装置、计算机设备及存储介质
CN113392353A (zh) 网站页面的加载方法、装置、电子设备及存储介质
Joshi HTML5 programming for ASP. NET developers
CN113934959A (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