CN103258024B - 网页中图片局部内容的分享方法、系统和装置 - Google Patents
网页中图片局部内容的分享方法、系统和装置 Download PDFInfo
- Publication number
- CN103258024B CN103258024B CN201310165124.0A CN201310165124A CN103258024B CN 103258024 B CN103258024 B CN 103258024B CN 201310165124 A CN201310165124 A CN 201310165124A CN 103258024 B CN103258024 B CN 103258024B
- Authority
- CN
- China
- Prior art keywords
- picture
- local content
- client
- user
- page
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 23
- 230000005540 biological transmission Effects 0.000 claims abstract description 11
- 230000001960 triggered effect Effects 0.000 claims description 30
- 230000008569 process Effects 0.000 description 5
- 238000004321 preservation Methods 0.000 description 3
- 230000008901 benefit Effects 0.000 description 2
- 239000000463 material Substances 0.000 description 2
- 239000002699 waste material Substances 0.000 description 2
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 1
- 244000097202 Rathbunia alamosensis Species 0.000 description 1
- 235000009776 Rathbunia alamosensis Nutrition 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000009434 installation Methods 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004044 response Effects 0.000 description 1
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
本发明提出一种网页中图片局部内容的分享方法,包括:客户端加载网页;客户端为网页中的至少一个图片分别绑定对应的事件处理函数;客户端接收用户选择局部内容的坐标信息,并向云端服务器发送分享请求;云端服务器根据第一图片地址和坐标信息获取图片中的局部内容,并根据局部内容生成局部内容图片和局部内容图片对应的第二图片地址;云端服务器根据局部内容图片对应的第二图片地址生成第三方平台的前端分享页面,并将客户端跳转至前端分享页面;客户端通过前端分享页面加载局部内容图片并分享至第三方平台。本发明满足用户局部分享图片的需求,操作简单方便,节省网络流量。本发明还公开了一种网页中图片局部内容的分享系统、一种客户端和一种云端服务器。
Description
技术领域
本发明涉及互联网技术领域,特别涉及一种网页中图片局部内容的分享方法、系统和装置。
背景技术
随着互联网的发展,网站已经不仅局限于文本信息,很多网站都提供了丰富的多媒体内容,例如图片和视频等。并且网站从单纯的展示向交互式发展,用户不仅仅可以得到服务器对请求的响应消息,还可以主动上传内容至服务器。例如新浪微博、人人网等开放平台上,都提供了至少两种形式的图片分享功能:
第一种是通过平台的后端分享接口进行分享。当用户需要分享某张图片时,图片所在的网络站点调用平台提供的后端分享接口,将图片上传至平台。
第二种是通过前端接口进行分享。当用户需要分享某张图片时,图片所在网络站点将用户浏览器重定向至平台提供的分享页面,将用户分享的图片的网络地址作为平台分享页面地址的网络地址参数进行传递。如果没有传递该参数,则平台在显示分享页面前,会先抓取用户分享的图片所在的网页的内容并进行相应解析,识别出其中符合规则的图片的列表,将其全部显示在分享页面上,由用户选择需要分享的图片。
然而无论采用上述哪种方式,用户都只能对整个图片进行分享。实际上,用户只想分享局部图片。例如用户可能有如下原因分享局部图片:
(一)、分享图片尺寸太大。如果当前图片所在站点或应用使用平台后端分享接口,全图分享会导致上传图片过程消耗时间长,分享速度慢。尤其在移动设备上分享图片,还会消耗流量,造成浪费。或者图片尺寸超过了平台支持的图片大小上限,造成无法分享。
(二)、分享图片包含信息量大。可能用户希望其它用户关注图片的某个特定区域中的信息,如图片中的某个人物、某个物品或某段文字等,而无需其它图片部分。
而现有的分享图片局部内容的技术方案主要基于客户端,如chrome等浏览器的截图分享插件。工作流程如下:
步骤1:用户通过插件或客户端程序选择截取当前设备屏幕的某个区域。
步骤2:插件或客户端程序将用户选择的屏幕区域所对应的像素值以预设图片格式保存到预设路径下。
步骤3:插件或客户端程序调用提供图片分享功能的平台端接口,将保存在预设路径下的图片进行分享。
现有技术方案无需图片站点或者客户端应用自身提供支持或者进行开发。但是需要安装外部浏览器插件或客户端。通过截屏的方式来对图片的某个区域进行截取,同时需要保存为本地图片后才能分享,不能在原有图片的基础上直接选择相应区域进行分享。此外,在移动端应用该现有技术时,还存在耗电量大,浪费用户流量等问题。
发明内容
本发明旨在至少解决现有技术中存在的技术问题之一。
为此,本发明的第一个目的在于提出一种网页中图片局部内容的分享方法。本方法能够满足用户局部分享图片的需求,操作简单方便,节省网络流量。
本发明的第二个目的在于提出一种网页中图片局部内容的分享系统。
本发明的第三个目的在于提出客户端。
本发明的第四个目的在于提出云端服务器。
为达到上述目的,本发明第一方面的实施例提出了一种网页中图片局部内容的分享方法,包括以下步骤:客户端加载网页,其中,所述网页包括至少一个图片;所述客户端为所述网页中的至少一个图片分别绑定对应的事件处理函数,其中,当所述事件处理函数在特定条件下被触发时所述事件处理函数记录用户针对对应图片中局部内容的坐标信息;所述客户端接收用户选择局部内容的坐标信息,并向云端服务器发送分享请求,其中,所述分享请求包括所述局部内容所属图片对应的第一图片地址、所述坐标信息和所述用户选择的第三方平台;所述云端服务器根据所述第一图片地址和所述坐标信息获取所述图片中的局部内容,并根据所述局部内容生成局部内容图片和所述局部内容图片对应的第二图片地址;所述云端服务器根据所述局部内容图片对应的第二图片地址生成所述第三方平台的前端分享页面,并将所述客户端跳转至所述前端分享页面;所述客户端通过所述前端分享页面加载所述局部内容图片并分享至所述第三方平台。
根据本发明实施例的网页中图片局部内容的分享方法,通过客户端的事件处理函数直接获取图片的局部信息,并向云端服务器发送分享请求,由云端服务器返回第三方平台的前端分享页面至客户端,进行分享。本方法不需安装插件,不需进行本地保存就可以直接截取并分享图片,满足用户个性化上传图片区域的需求,使得上传图片大小更加灵活,操作简单方便,节省网络流量,省电节能,用户体验好。
在本发明的一个实施例中,还包括:所述客户端通过所述前端分享页面接收用户输入的描述信息。
在本发明的一个实施例中,当所述网页中包括多个图片时,所述分享请求还包括所述用户选择的局部内容所属的图片的图片信息。
在本发明的一个实施例中,所述特定条件为当鼠标在所述图片上停留的时间超过预设时间时,所述事件处理函数被触发。
在本发明的一个实施例中,还包括:当所述事件处理函数被触发时,所述事件处理函数在所述图片上渲染图片区域选择框,所述图片区域选择框的位置和大小根据所述用户的输入调整。
在本发明的一个实施例中,所述客户端为浏览器。
本发明第二方面的实施例提出了一种网页中图片局部内容的分享系统,包括客户端和云端服务器。其中,客户端用于加载包括至少一个图片的网页,并为所述网页中的至少一个图片分别绑定对应的事件处理函数,以及接收用户选择局部内容的坐标信息,并向云端服务器发送分享请求,其中,当所述事件处理函数在特定条件下被触发时所述事件处理函数记录用户针对对应图片中局部内容的坐标信息,所述分享请求包括所述局部内容所属图片对应的第一图片地址、所述坐标信息和所述用户选择的第三方平台,以及通过所述前端分享页面加载所述局部内容图片并分享至所述第三方平台;所述云端服务器用于根据所述第一图片地址和所述坐标信息获取所述图片中的局部内容,并根据所述局部内容生成局部内容图片和所述局部内容图片对应的第二图片地址,以及根据所述局部内容图片对应的第二图片地址生成所述第三方平台的前端分享页面,并将所述客户端跳转至所述前端分享页面。
根据本发明实施例的网页中图片局部内容的分享系统,通过客户端的事件处理函数直接获取图片的局部信息,并向云端服务器发送分享请求,由云端服务器返回第三方平台的前端分享页面至客户端,进行分享。本系统不需安装插件,不需进行本地保存就可以直接截取并分享图片,满足用户个性化上传图片区域的需求,使得上传图片大小更加灵活,操作简单方便,节省网络流量,省电节能,用户体验好。
在本发明的一个实施例中,所述客户端,还用于通过所述前端分享页面接收用户输入的描述信息。
在本发明的一个实施例中,当所述网页中包括多个图片时,所述分享请求还包括所述用户选择的局部内容所属的图片的图片信息。
在本发明的一个实施例中,所述特定条件为当鼠标在所述图片上停留的时间超过预设时间时,所述事件处理函数被触发。
在本发明的一个实施例中,当所述事件处理函数被触发时,所述事件处理函数在所述图片上渲染图片区域选择框,所述图片区域选择框的位置和大小根据所述用户的输入调整。
在本发明的一个实施例中,所述客户端为浏览器。
本发明第三方面的实施例提出了一种客户端,包括加载模块、事件处理模块、接收模块、发送模块、第三方平台接收模块和分享模块。
其中,加载模块用于加载网页,其中,所述网页包括至少一个图片;事件处理模块用于为所述网页中的至少一个图片分别绑定对应的事件处理函数,其中,当所述事件处理函数在特定条件下被触发时所述事件处理函数记录用户针对对应图片中局部内容的坐标信息;接收模块用于接收用户选择局部内容的坐标信息;发送模块用于向云端服务器发送分享请求,其中,所述分享请求包括所述局部内容所属图片对应的第一图片地址、所述坐标信息和所述用户选择的第三方平台,以使所述云端服务器根据所述第一图片地址、所述坐标信息生成所述第三方平台的前端分享页面;第三方平台接收模块用于接收所述云端服务器发送的所述第三方平台的前端分享页面;分享模块用于通过所述前端分享页面加载所述局部内容图片并分享至所述第三方平台。
根据本发明实施例的客户端,通过事件处理函数直接获取图片的局部信息,向云端服务器发送分享请求,并通过云端服务器返回的分享页面进行分享。本客户端不需安装插件,不需进行本地保存就可以直接截取并分享图片,满足用户个性化上传图片区域的需求,使得上传图片大小更加灵活,操作简单方便,节省网络流量,省电节能,用户体验好。
在本发明的一个实施例中,所述分享模块还用于通过所述前端分享页面接收用户输入的描述信息。
在本发明的一个实施例中,当所述网页中包括多个图片时,所述分享请求还包括所述用户选择的局部内容所属的图片的图片信息。
在本发明的一个实施例中,所述特定条件为当鼠标在所述图片上停留的时间超过预设时间时,所述事件处理函数被触发。
在本发明的一个实施例中,当所述事件处理函数被触发时,所述事件处理函数在所述图片上渲染图片区域选择框,所述图片区域选择框的位置和大小根据所述用户的输入调整。
在本发明的一个实施例中,所述客户端为浏览器。
本发明第四方面的实施例提出了一种云端服务器,包括接收模块、截取模块、生成模块和发送模块。
其中,接收模块用于接收客户端发送的分享请求,其中,所述分享请求包括用户选择的局部内容所属图片对应的第一图片地址、所述局部内容的坐标信息和所述用户选择的第三方平台;截取模块用于根据所述第一图片地址和所述坐标信息获取所述图片中的局部内容,并根据所述局部内容生成局部内容图片和所述局部内容图片对应的第二图片地址;生成模块用于根据所述局部内容图片对应的第二图片地址生成所述第三方平台的前端分享页面;发送模块用于将所述前端分享页面发送至所述客户端,以使所述客户端通过所述前端分享页面加载所述局部内容图片并分享至所述第三方平台。
根据本发明实施例的云端服务器,根据分享请求获取用户分享的局部内容并生成第二图片地址,生成前端分享页面并发送至客户端,配合客户端满足用户不需进行本地保存就可以直接截取并分享图片的功能,满足用户个性化上传图片区域的需求,使得上传图片大小更加灵活,操作简单方便,节省网络流量,省电节能,用户体验好。
本发明的附加方面和优点将在下面的描述中部分给出,部分将从下面的描述中变得明显,或通过本发明的实践了解到。
附图说明
本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解,其中:
图1是根据本发明实施例的网页中图片局部内容的分享方法的流程图;
图2是根据本发明实施例的网页中图片局部内容的分享系统的结构示意图;
图3是根据本发明实施例的客户端的结构示意图;和
图4是根据本发明实施例的云端服务器的结构示意图。
具体实施方式
下面详细描述本发明的实施例,所述实施例的示例在附图中示出,其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的,仅用于解释本发明,而不能理解为对本发明的限制。
下面参考图1描述根据本发明实施例的网页中图片局部内容的分享方法,包括以下步骤:
步骤S110:客户端加载网页,其中,网页包括至少一个图片。
步骤S120:客户端为网页中的至少一个图片分别绑定对应的事件处理函数,
其中,当事件处理函数在特定条件下被触发时事件处理函数记录用户针对对应图片中局部内容的坐标信息。
特定条件为当鼠标在图片上停留的时间超过预设时间时,事件处理函数被触发。当事件处理函数被触发时,事件处理函数在图片上渲染图片区域选择框,图片区域选择框的位置和大小根据用户的输入调整。
步骤S130:客户端接收用户选择局部内容的坐标信息,并向云端服务器发送分享请求,其中,分享请求包括局部内容所属图片对应的第一图片地址、坐标信息和用户选择的第三方平台。当网页中包括多个图片时,分享请求还包括用户选择的局部内容所属的图片的图片信息。
步骤S140:云端服务器根据第一图片地址和坐标信息获取图片中的局部内容,并根据局部内容生成局部内容图片和局部内容图片对应的第二图片地址。
步骤S150:云端服务器根据局部内容图片对应的第二图片地址生成第三方平台的前端分享页面,并将客户端跳转至前端分享页面。
步骤S160:客户端通过前端分享页面加载局部内容图片并分享至第三方平台。
还包括:客户端通过前端分享页面接收用户输入的描述信息。
下面以浏览器做客户端为例对本发明进行说明,可以理解的是,下述说明仅出于示例目的,本发明的实施例不限于此。
步骤S210:浏览器加载包含图片的网页内容。
步骤S220:浏览器为网页中每张符合预设尺寸阀值的图片绑定相应的JS事件处理函数。
当用户鼠标停留在符合预设尺寸阀值的图片上超过预设时间阀值时,相应的JS事件处理函数被触发。JS事件处理函数在该图片上渲染图片区域选择框和第三方平台标识列表。其中,第三方平台标识支持图片分享功能,可以是图标、文字链接或者按钮形式。用户通过移动图片区域选择框确定分享图片位置,通过拖动图片区域选择框的4个角和4条边来调整分享图片区域的大小。用户通过第三方平台标识列表,选择分享选中图片区域的第三方平台,进行提交操作。
步骤S230:浏览器接收用户选择局部内容的坐标信息,并向云端服务器发送分享请求。其中,分享请求包括局部内容所属图片对应的第一图片地址、选择的图片区域在整体图片上的相对坐标信息及宽高等信息和用户选择的第三方平台。当网页中包括多个图片时,分享请求还包括用户选择的局部内容所属的图片的图片信息。
步骤S240:云端服务器接收到分享请求后,根据接收到的第一图片地址抓取图片的完整内容,并根据接收到的相对坐标信息和宽高信息将抓取到的完整图片进行截图处理,得到用户所选择的图片区域选择框对应的图片的局部内容。将截取到的图片的局部内容存入图片存储系统,得到外网可访问的局部内容图片对应的第二图片地址。
步骤S250:根据局部内容图片对应的第二图片地址生成第三方平台标识所对应的第三方平台的前端分享页面,并将用户浏览器重定向至第三方平台的前端分享页面。
步骤S260:第三方平台的前端分享页面根据网络地址参数中携带的局部内容图片对应的第二图片地址加载局部图片,并引导用户输入相应描述文本,客户端可以通过前端分享页面接收用户输入的描述信息。
步骤S270:用户判断分享页面上显示的局部图片是否符合需求,并确认是否提交分享操作。如果不符合,用户可以选择返回原站点页面重新进行图片区域选择。如果符合,则用户直接点击分享页面上的分享按钮,发送分享请求至第三方平台的服务端。
步骤S280:第三方平台服务端接收到分享请求后,完成图片分享操作。
根据本发明实施例的网页中图片局部内容的分享方法,用户可以对图片的任意区域进行选择,云端服务器生成局部内容图片和局部内容图片对应的第二图片地址,客户端通过前端分享页面进行分享,本方法帮助用户个性化定制上传图片内容区域,使得上传图片大小更加灵活,提升了用户分享图片的用户体验,满足用户多样化需求。降低用户分享图片时的流量及其流量费用。
下面参考图2描述根据本发明实施例的网页中图片局部内容的分享系统100,包括客户端110和云端服务器120。
其中,客户端110用于加载包括至少一个图片的网页,并为网页中的至少一个图片分别绑定对应的事件处理函数,以及接收用户选择局部内容的坐标信息,并向云端服务器120发送分享请求,其中,当事件处理函数在特定条件下被触发时事件处理函数记录用户针对对应图片中局部内容的坐标信息,分享请求包括局部内容所属图片对应的第一图片地址、坐标信息和用户选择的第三方平台,以及通过前端分享页面加载局部内容图片并分享至第三方平台;云端服务器120用于根据第一图片地址和坐标信息获取图片中的局部内容,并根据局部内容生成局部内容图片和局部内容图片对应的第二图片地址,以及根据局部内容图片对应的第二图片地址生成第三方平台的前端分享页面,并将客户端110跳转至前端分享页面。
客户端110还用于通过前端分享页面接收用户输入的描述信息。
其中,特定条件为当鼠标在图片上停留的时间超过预设时间时,事件处理函数被触发。当事件处理函数被触发时,事件处理函数在图片上渲染图片区域选择框,图片区域选择框的位置和大小根据用户的输入调整。
在本发明的一个实施例中,当网页中包括多个图片时,分享请求还包括用户选择的局部内容所属的图片的图片信息。
下面以浏览器做客户端110为例对本发明进行说明,可以理解的是,下述说明仅出于示例目的,本发明的实施例不限于此。
浏览器加载包含图片的网页内容。浏览器为网页中每张符合预设尺寸阀值的图片绑定相应的JS事件处理函数。当用户鼠标停留在符合预设尺寸阀值的图片上超过预设时间阀值时,相应的JS事件处理函数被触发。JS事件处理函数在该图片上渲染图片区域选择框和第三方平台标识列表。其中,第三方平台标识支持图片分享功能,可以是图标、文字链接或者按钮形式。用户通过移动图片区域选择框确定分享图片位置,通过拖动图片区域选择框的4个角和4条边来调整分享图片区域的大小。用户通过第三方平台标识列表,选择分享选中图片区域的第三方平台,进行提交操作。浏览器接收用户选择局部内容的坐标信息,并向云端服务器120发送分享请求。其中,分享请求包括局部内容所属图片对应的第一图片地址、选择的图片区域在整体图片上的相对坐标信息及宽高等信息和用户选择的第三方平台。当网页中包括多个图片时,分享请求还包括用户选择的局部内容所属的图片的图片信息。
云端服务器120接收到分享请求后,根据接收到第一图片地址抓取图片的完整内容,并根据接收到的相对坐标信息和宽高信息将抓取到的完整图片进行截图处理,得到用户所选择的图片区域选择框对应的图片的局部内容。将截取到的图片的局部内容存入图片存储系统,得到外网可访问的局部内容图片对应的第二图片地址。云端服务器120根据局部内容图片对应的第二图片地址生成第三方平台标识所对应的第三方平台的前端分享页面第一图片地址,并将用户浏览器重定向至第三方平台的前端分享页面。
第三方平台的前端分享页面根据网络第一图片地址参数中携带的局部内容图片对应的第二图片地址加载局部图片,并引导用户输入相应描述文本,客户端110可以通过前端分享页面接收用户输入的描述信息。用户判断分享页面上显示的局部图片是否符合需求,并确认是否提交分享操作。如果不符合,用户可以选择返回原站点页面重新进行图片区域选择。如果符合,则用户直接点击分享页面上的分享按钮,发送分享请求至第三方平台的服务端。
第三方平台服务端接收到分享请求后,完成图片分享操作。
根据本发明实施例的网页中图片局部内容的分享系统,用户可以对图片的任意区域进行选择,云端服务器生成局部内容图片和局部内容图片对应的第二图片地址,客户端通过前端分享页面进行分享,本系统帮助用户个性化定制上传图片内容区域,使得上传图片大小更加灵活,提升了用户分享图片的用户体验,满足用户多样化需求。降低用户分享图片时的流量及其流量费用。
下面参考图3描述根据本发明实施例的客户端200,包括加载模块210、事件处理模块220、接收模块230、发送模块240、第三方平台接收模块250和分享模块260。
其中,加载模块210用于加载网页,其中,网页包括至少一个图片;事件处理模块220用于为网页中的至少一个图片分别绑定对应的事件处理函数,其中,当事件处理函数在特定条件下被触发时事件处理函数记录用户针对对应图片中局部内容的坐标信息;接收模块230用于接收用户选择局部内容的坐标信息;发送模块240用于向云端服务器发送分享请求,其中,分享请求包括局部内容所属图片对应的第一图片地址、坐标信息和用户选择的第三方平台,以使云端服务器根据第一图片地址、坐标信息生成第三方平台的前端分享页面;第三方平台接收模块250用于接收云端服务器发送的第三方平台的前端分享页面;分享模块260用于通过前端分享页面加载局部内容图片并分享至第三方平台。
分享模块260还用于通过前端分享页面接收用户输入的描述信息。
其中,特定条件为当鼠标在图片上停留的时间超过预设时间时,事件处理函数被触发。当事件处理函数被触发时,事件处理函数在图片上渲染图片区域选择框,图片区域选择框的位置和大小根据用户的输入调整。
在本发明的一个实施例中,当网页中包括多个图片时,分享请求还包括用户选择的局部内容所属的图片的图片信息。
下面以浏览器做客户端为例对本发明进行说明,可以理解的是,下述说明仅出于示例目的,本发明的实施例不限于此。
加载模块210加载包含图片的网页内容。事件处理模块220为网页中每张符合预设尺寸阀值的图片绑定相应的JS事件处理函数。
当用户鼠标停留在符合预设尺寸阀值的图片上超过预设时间阀值时,相应的JS事件处理函数被触发。JS事件处理函数在该图片上渲染图片区域选择框和第三方平台标识列表。其中,第三方平台标识支持图片分享功能,可以是图标、文字链接或者按钮形式。用户通过移动图片区域选择框确定分享图片位置,通过拖动图片区域选择框的4个角和4条边来调整分享图片区域的大小。用户通过第三方平台标识列表,选择分享选中图片区域的第三方平台,进行提交操作。
接收模块230接收用户选择局部内容的坐标信息,发送模块240向云端服务器发送分享请求。其中,分享请求包括局部内容所属图片对应的第一图片地址、选择的图片区域在整体图片上的相对坐标信息及宽高等信息和用户选择的第三方平台。当网页中包括多个图片时,分享请求还包括用户选择的局部内容所属的图片的图片信息。
云端服务器接收到分享请求后,根据接收到第一图片地址抓取图片的完整内容,并根据接收到的相对坐标信息和宽高信息将抓取到的完整图片进行截图处理,得到用户所选择的图片区域选择框对应的图片的局部内容。将截取到的图片的局部内容存入图片存储系统,得到外网可访问的局部内容图片对应的第二图片地址。根据局部内容图片对应的第二图片地址生成第三方平台标识所对应的第三方平台的前端分享页面,并将用户浏览器重定向至第三方平台的前端分享页面。
第三方平台接收模块250接收云端服务器发送的第三方平台的前端分享页面,根据网络地址参数中携带的局部内容图片对应的第二图片地址加载局部图片,并引导用户输入相应描述文本,客户端可以通过前端分享页面接收用户输入的描述信息。
用户判断分享页面上显示的局部图片是否符合需求,并确认是否提交分享操作。如果不符合,用户可以选择返回原站点页面重新进行图片区域选择。如果符合,则用户直接点击分享页面上的分享按钮,分享模块260发送分享请求至第三方平台的服务端。
第三方平台服务端接收到分享请求后,完成图片分享操作。
根据本发明实施例的客户端,用户可以对图片的任意区域进行选择,客户端向云端服务器发送分享请求,并通过云端服务器发送的前端分享页面进行分享,本客户端帮助用户个性化定制上传图片内容区域,使得上传图片大小更加灵活,提升了用户分享图片的用户体验,满足用户多样化需求。降低用户分享图片时的流量及其流量费用。
下面参考图4描述根据本发明实施例的云端服务器300,包括接收模块310、截取模块320、生成模块330和发送模块340。
接收模块310用于接收客户端发送的分享请求,其中,分享请求包括用户选择的局部内容所属图片对应的第一图片地址、局部内容的坐标信息和用户选择的第三方平台;截取模块320用于根据第一图片地址和坐标信息获取图片中的局部内容,并根据局部内容生成局部内容图片和局部内容图片对应的第二图片地址;生成模块330用于根据局部内容图片对应的第二图片地址生成第三方平台的前端分享页面;发送模块340用于将前端分享页面发送至客户端,以使客户端通过前端分享页面加载局部内容图片并分享至第三方平台。
下面以具体的例子对本发明进行说明,可以理解的是,下述说明仅出于示例目的,本发明的实施例不限于此。
客户端加载包含图片的网页内容。并接收用户选择局部内容的坐标信息,并向云端服务器发送分享请求。其中,分享请求包括局部内容所属图片对应的第一图片地址、选择的图片区域在整体图片上的相对坐标信息及宽高等信息和用户选择的第三方平台。
接收模块310接收到分享请求,截取模块320根据接收到网页第一图片地址抓取图片的完整内容,并根据接收到的相对坐标信息和宽高信息将抓取到的完整图片进行截图处理,得到用户所选择的图片区域选择框对应的图片的局部内容。截取模块320将截取到的图片的局部内容存入图片存储系统,得到外网可访问的局部内容图片对应的第二图片地址。生成模块330根据局部内容图片对应的第二图片地址生成第三方平台标识所对应的第三方平台的前端分享页面第一图片地址,发送模块340将前端分享页面发送至客户端,使得用户浏览器重定向至第三方平台的前端分享页面。
第三方平台的前端分享页面根据网络地址参数中携带的局部内容图片对应的第二图片地址加载局部图片,并引导用户输入相应描述文本,客户端可以通过前端分享页面接收用户输入的描述信息。用户判断分享页面上显示的局部图片是否符合需求,并确认是否提交分享操作。如果不符合,用户可以选择返回原站点页面重新进行图片区域选择。如果符合,则用户直接点击分享页面上的分享按钮,发送分享请求至第三方平台的服务端。第三方平台服务端接收到分享请求后,完成图片分享操作。
根据本发明实施例的云端服务器,云端服务器根据客户端发送的第一图片地址和信息生成局部内容图片和局部内容图片对应的第二图片地址,并将前端分享页面发送至客户端,本云端服务器配合客户端,帮助用户个性化定制上传图片内容区域,使得上传图片大小更加灵活,提升了用户分享图片的用户体验,满足用户多样化需求。降低用户分享图片时的流量及其流量费用。
在本说明书的描述中,参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中,对上述术语的示意性表述不一定指的是相同的实施例或示例。而且,描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
尽管已经示出和描述了本发明的实施例,对于本领域的普通技术人员而言,可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型,本发明的范围由所附权利要求及其等同限定。
Claims (16)
1.一种网页中图片局部内容的分享方法,其特征在于,包括以下步骤:
客户端加载网页,其中,所述网页包括至少一个图片;
所述客户端为所述网页中的至少一个图片分别绑定对应的事件处理函数,其中,当所述事件处理函数在特定条件下被触发时所述事件处理函数记录用户针对对应图片中局部内容的坐标信息,所述特定条件为当鼠标在所述图片上停留的时间超过预设时间时,所述事件处理函数被触发;
所述客户端接收用户选择局部内容的坐标信息,并向云端服务器发送分享请求,其中,所述分享请求包括所述局部内容所属图片对应的第一图片地址、所述坐标信息和所述用户选择的第三方平台;
所述云端服务器根据所述第一图片地址和所述坐标信息获取所述图片中的局部内容,并根据所述局部内容生成局部内容图片和所述局部内容图片对应的第二图片地址;
所述云端服务器根据所述局部内容图片对应的第二图片地址生成所述第三方平台的前端分享页面,并将所述客户端跳转至所述前端分享页面;以及
所述客户端通过所述前端分享页面加载所述局部内容图片并分享至所述第三方平台。
2.如权利要求1所述的方法,其特征在于,还包括:
所述客户端通过所述前端分享页面接收用户输入的描述信息。
3.如权利要求1所述的方法,其特征在于,当所述网页中包括多个图片时,所述分享请求还包括所述用户选择的局部内容所属的图片的图片信息。
4.如权利要求1所述的方法,其特征在于,还包括:
当所述事件处理函数被触发时,所述事件处理函数在所述图片上渲染图片区域选择框,所述图片区域选择框的位置和大小根据所述用户的输入调整。
5.如权利要求1-4任一项所述的方法,其特征在于,所述客户端为浏览器。
6.一种网页中图片局部内容的分享系统,其特征在于,包括客户端和云端服务器,其中,
客户端,用于加载包括至少一个图片的网页,并为所述网页中的至少一个图片分别绑定对应的事件处理函数,以及接收用户选择局部内容的坐标信息,并向云端服务器发送分享请求,其中,当所述事件处理函数在特定条件下被触发时所述事件处理函数记录用户针对对应图片中局部内容的坐标信息,所述特定条件为当鼠标在所述图片上停留的时间超过预设时间时,所述事件处理函数被触发,
所述分享请求包括所述局部内容所属图片对应的第一图片地址、所述坐标信息和所述用户选择的第三方平台,以及通过前端分享页面加载局部内容图片并分享至所述第三方平台;以及
所述云端服务器,用于根据所述第一图片地址和所述坐标信息获取所述图片中的局部内容,并根据所述局部内容生成局部内容图片和所述局部内容图片对应的第二图片地址,以及根据所述局部内容图片对应的第二图片地址生成所述第三方平台的前端分享页面,并将所述客户端跳转至所述前端分享页面。
7.如权利要求6所述的系统,其特征在于,所述客户端,还用于通过所述前端分享页面接收用户输入的描述信息。
8.如权利要求6所述的系统,其特征在于,当所述网页中包括多个图片时,所述分享请求还包括所述用户选择的局部内容所属的图片的图片信息。
9.如权利要求6所述的系统,其特征在于,当所述事件处理函数被触发时,所述事件处理函数在所述图片上渲染图片区域选择框,所述图片区域选择框的位置和大小根据所述用户的输入调整。
10.如权利要求6所述的系统,其特征在于,所述客户端为浏览器。
11.一种客户端,其特征在于,包括:
加载模块,用于加载网页,其中,所述网页包括至少一个图片;
事件处理模块,用于为所述网页中的至少一个图片分别绑定对应的事件处理函数,其中,当所述事件处理函数在特定条件下被触发时所述事件处理函数记录用户针对对应图片中局部内容的坐标信息,所述特定条件为当鼠标在所述图片上停留的时间超过预设时间时,所述事件处理函数被触发;
接收模块,用于接收用户选择局部内容的坐标信息;
发送模块,用于向云端服务器发送分享请求,其中,所述分享请求包括所述局部内容所属图片对应的第一图片地址、所述坐标信息和所述用户选择的第三方平台,以使所述云端服务器根据所述第一图片地址、所述坐标信息生成所述第三方平台的前端分享页面;
第三方平台接收模块,用于接收所述云端服务器发送的所述第三方平台的前端分享页面;以及
分享模块,用于通过所述前端分享页面加载所述局部内容图片并分享至所述第三方平台。
12.如权利要求11所述的客户端,其特征在于,所述分享模块,还用于通过所述前端分享页面接收用户输入的描述信息。
13.如权利要求11所述的客户端,其特征在于,当所述网页中包括多个图片时,所述分享请求还包括所述用户选择的局部内容所属的图片的图片信息。
14.如权利要求11所述的客户端,其特征在于,当所述事件处理函数被触发时,所述事件处理函数在所述图片上渲染图片区域选择框,所述图片区域选择框的位置和大小根据所述用户的输入调整。
15.如权利要求11所述的客户端,其特征在于,所述客户端为浏览器。
16.一种云端服务器,其特征在于,包括:
接收模块,用于接收客户端发送的分享请求,其中,所述分享请求包括用户选择的局部内容所属图片对应的第一图片地址、所述局部内容的坐标信息和所述用户选择的第三方平台;
截取模块,用于根据所述第一图片地址和所述坐标信息获取所述图片中的局部内容,并根据所述局部内容生成局部内容图片和所述局部内容图片对应的第二图片地址;
生成模块,用于根据所述局部内容图片对应的第二图片地址生成所述第三方平台的前端分享页面;以及
发送模块,用于将所述前端分享页面发送至所述客户端,以使所述客户端通过所述前端分享页面加载所述局部内容图片并分享至所述第三方平台。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201310165124.0A CN103258024B (zh) | 2013-05-07 | 2013-05-07 | 网页中图片局部内容的分享方法、系统和装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201310165124.0A CN103258024B (zh) | 2013-05-07 | 2013-05-07 | 网页中图片局部内容的分享方法、系统和装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN103258024A CN103258024A (zh) | 2013-08-21 |
| CN103258024B true CN103258024B (zh) | 2016-06-15 |
Family
ID=48961941
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201310165124.0A Active CN103258024B (zh) | 2013-05-07 | 2013-05-07 | 网页中图片局部内容的分享方法、系统和装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN103258024B (zh) |
Families Citing this family (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104796594B (zh) * | 2014-01-16 | 2020-01-14 | 中兴通讯股份有限公司 | 一种预览界面特殊效果即时呈现方法及终端设备 |
| CN104503972A (zh) * | 2014-11-05 | 2015-04-08 | 北京学而思教育科技有限公司 | 进行网络操作的方法、装置和系统 |
| CN105678695A (zh) * | 2014-11-19 | 2016-06-15 | 腾讯科技(深圳)有限公司 | 图片处理方法和装置 |
| CN104504004B (zh) * | 2014-12-09 | 2018-04-03 | 北京国双科技有限公司 | 用于网站分享的分享方法和装置 |
| CN104765601A (zh) * | 2015-03-18 | 2015-07-08 | 深圳市金立通信设备有限公司 | 一种终端 |
| KR102439786B1 (ko) * | 2015-07-16 | 2022-09-02 | 삼성전자주식회사 | 컨텐츠 정보를 공유하기 위한 방법 및 그 전자 장치 |
| CN107958045A (zh) * | 2017-11-24 | 2018-04-24 | 海尔优家智能科技(北京)有限公司 | 一种混合开发软件的页面分享方法和装置 |
| CN110018818B (zh) * | 2018-01-10 | 2023-08-11 | 天音移动通信有限公司 | 聚合sdk的切换方法、存储介质、设备及系统 |
| CN108763297B (zh) * | 2018-04-18 | 2021-08-17 | Oppo广东移动通信有限公司 | 网页资源处理方法、装置以及移动终端 |
| CN110807163A (zh) * | 2018-08-03 | 2020-02-18 | 先智创科(北京)科技有限公司 | 有助于内容分享的方法和装置 |
| CN110011904B (zh) * | 2019-04-10 | 2020-01-21 | 聚合区块链技术(深圳)有限公司 | 一种附加个性化信息的分布式传播方法、装置及终端 |
| CN110457098B (zh) * | 2019-07-05 | 2023-02-10 | 中国平安财产保险股份有限公司 | 页面局部图像分享方法、装置、设备和存储介质 |
| CN110413809A (zh) * | 2019-07-31 | 2019-11-05 | 福建南威软件有限公司 | 一种基于云服务器的图片管理方法及系统 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120136716A1 (en) * | 2008-06-26 | 2012-05-31 | Microsoft Corporation | Browsing and quality of service features |
| CN102508843A (zh) * | 2011-09-23 | 2012-06-20 | 上海量明科技发展有限公司 | 具有微博发布功能的截图方法及系统 |
| CN102650990A (zh) * | 2011-02-24 | 2012-08-29 | 中兴通讯股份有限公司 | 终端网页显示方法及系统 |
-
2013
- 2013-05-07 CN CN201310165124.0A patent/CN103258024B/zh active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120136716A1 (en) * | 2008-06-26 | 2012-05-31 | Microsoft Corporation | Browsing and quality of service features |
| CN102650990A (zh) * | 2011-02-24 | 2012-08-29 | 中兴通讯股份有限公司 | 终端网页显示方法及系统 |
| CN102508843A (zh) * | 2011-09-23 | 2012-06-20 | 上海量明科技发展有限公司 | 具有微博发布功能的截图方法及系统 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN103258024A (zh) | 2013-08-21 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN103258024B (zh) | 网页中图片局部内容的分享方法、系统和装置 | |
| CN103269362B (zh) | 网页中图片局部内容的分享方法、系统和装置 | |
| CN107809492B (zh) | 分享信息的生成方法和系统 | |
| US9185162B2 (en) | System using server to synchronize document displayed on mobile devices | |
| CN102857579B (zh) | 一种信息处理方法、装置、终端及服务器 | |
| CA2882307C (en) | Information transmission method, apparatus, system, and terminal | |
| CN105045887B (zh) | 混合模式跨域数据交互的系统及其方法 | |
| US10095378B2 (en) | Web browser toolbar | |
| US20150074548A1 (en) | Information Sharing Method and Apparatus | |
| US20150271118A1 (en) | Apparatus and method for accessing content in an email message | |
| US10474319B2 (en) | Methods and instant messaging client devices for performing IM using menu option | |
| CN102546768A (zh) | 一种内容分享的方法、装置和系统 | |
| JP5420714B2 (ja) | メッセージのマルチレイヤー転送を促進するシステム及び方法 | |
| US20080059584A1 (en) | Method and apparatus for sharing resource addresses | |
| CN105656991A (zh) | 文件分享方法及装置 | |
| EP3061214B1 (en) | Method and apparatus for displaying image | |
| CN109543119B (zh) | 页面预览系统及方法 | |
| CN106649581B (zh) | 一种网页的修复方法以及客户端 | |
| CN115550295A (zh) | 消息处理方法、消息显示方法及计算设备 | |
| US20050086599A1 (en) | Method and system for maintaining font sizes on different platforms | |
| CN104978207A (zh) | 上传文件的方法和浏览器及系统 | |
| CN110740337A (zh) | 直播播放方法、装置、电子设备及存储介质 | |
| CN103618935B (zh) | 智能电视中的图像显示方法和装置 | |
| KR101926756B1 (ko) | 네트워크 제품 표시 방법, 장치, 시스템, 서버 및 단말 | |
| CN104144126A (zh) | 通过图像处理实现流量优化的方法及系统、客户端 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C14 | Grant of patent or utility model | ||
| GR01 | Patent grant |