一种应用Canvas实现的网页同步交流方法技术

本申请涉及一种应用Canvas实现的网页同步交流方法，应用于网页同步交流，方法包括，在第一网页中创建与用于同步的网页内容相独立的第一Canvas，第一网页响应于网页同步执行请求，读取第一网页中用于同步显示的网页元素，基于所述网页元素的显示特征在第一Canvas上执行绘制，并将绘制内容生成图片数据，将所述图片数据发送至第二网页；所述第二网页接收并提取图片数据，基于图片数据在预置的第二Canvas中执行图像绘制操作。本申请第一网页包含完整的网页数据和拥有网页操作执行权限，第二网页以Canvas形式显示网页同步画面，在保护第一网页的网页数据和执行权限的基础上实现了第一网页、第二网页之间的同步交流。

【技术实现步骤摘要】
一种应用Canvas实现的网页同步交流方法
本专利技术涉及通信领域，尤其涉及一种应用Canvas实现的网页同步交流方法。
技术介绍
用户浏览网页，会遇到将网页发送或分享至其他用户进行同步交流的情形，原用户与参与用户针对同一网页进行交流，交流者共同操作相关网页元素，交流过程中网页操作、显示画面保持同步状态，极大的提升了交流效率且拥有非常好的交流效果。现有技术中，存在以下问题：原用户与参与用户针对同一网页进行交流，由于用户所使用的浏览器、设备存在差异，不同用户之间很难达到完全一致的浏览效果，如图2所示的同一网页在iPhone6/7/8Plus与GalaxyS5上浏览效果，其中的文字部分可见明显差异(详见字样“1965”的显示位置)，产生原因如：浏览器显示区域尺寸不同、不同浏览器对CSS样式解析存在差异、设备字体不同等，由此造成网页交流画面不能完全同步，严重影响交流质量，例如在交流过程中进行涂鸦、标记时，所操作的位置会出现错乱现象等。另外，原用户与参与用户同时操作某一网页，如网页中存在登录、与服务器端交互等情形，会导致用户隐私与重要的网页数据泄露，重复向服务器发送请求、提交数据等问题。以上关于网页交流过程中的交流画面同步问题、网页数据和操作安全问题亟需解决。
技术实现思路
本申请有鉴于上述现有的状况，应用HTMLCanvas及其相关技术，解决网页同步交流过程中的交流画面同步问题、网页数据和操作安全问题。第一方面，本申请提供了一种应用Canvas实现的网页同步交流方法，方法包括：<br>在第一网页中预先创建第一Canvas，所述第一Canvas与用于同步的网页内容相独立；所述第一网页响应于网页同步执行请求，读取所述第一网页中用于同步显示的网页元素，基于所述网页元素的显示特征在所述第一Canvas上执行绘制，并提取所述第一Canvas内容生成图片数据，将所述图片数据生成为第一同步数据发送至第二网页；所述第一同步数据用于所述第二网页接收，并基于其包含的所述图片数据在所述第二网页内预置的第二Canvas中执行图像绘制操作，绘制所述图片数据。上述第一方面提供的技术方案中，将所述第一Canvas内容生成图片数据，包括以下任意一种生成方式：A.根据所述第一Canvas显示的整体内容生成为图片数据；B.根据所述第一Canvas当前内容与上一网页同步执行请求完成后的内容进行比较计算并获得差异部分，或者，根据本次同步执行请求所执行的绘制内容区域作为差异部分，将所述差异部分提取生成为一个或多个差异图片，同时对应记录每个差异图片在所述第一Canvas中的相对位置信息，将所述差异图片与所述相对位置信息组合生成为图片数据；相应地，所述第二网页解析所述图片数据，根据所述图片数据包含的所述相对位置信息计算获得替换区域，以所述图片数据包含的所述差异图片作为替换内容，在所述第二Canvas中的所述替换区域对应绘制所述替换内容。通过本申请实施例提供的方案，可使得，在第一网页执行操作后，所述第二网页中的Canvas与所述第一网页内容画面保持一致，但第二网页中除一个预置的Canvas或图片外，可不包括其它HTML元素和网页内容。第二方面，本申请提供了一种应用Canvas实现的网页同步交流方法，方法包括：所述第一网页响应于网页同步执行请求，读取所述第一网页中用于同步显示的网页元素，基于所述网页元素的显示特征，生成绘制所述网页元素的一个或多个绘制指令，并对应记录所述绘制指令相关的参数、素材作为绘制资源信息，将所述绘制指令与所述绘制资源信息按照对应关系生成为绘制数据，将所述绘制数据生成为第二同步数据发送至第二网页；所述第二同步数据用于所述第二网页接收，并基于其包含的绘制数据在所述第二网页内预置的第二Canvas中执行绘制操作，具体为：解析所述绘制数据，基于所述绘制指令及其相关的参数与素材，在预置的第二Canvas上执行所述绘制指令。通过以上第二方面的实施例提供的方案，与第一方面所提供方法相同之处在于，同样实现了在仅公开网页显示的部分的基础上与第二网页进行交流，为两者之间进行交流提供了安全保障；与第一方面所提供方法不同之处在于，通过传送绘制指令取代直接传送图像的方式，因而，在同步过程中传输的数据量非常小，充分利用了第二网页中所预置的第二Canvas的绘制能力。在第二方面的一种可能的实现方式中，在上一次网页同步执行请求完成后的Canvas绘制状态基础上，根据本次同步执行请求中显示特征发生改变的网页元素，计算获得与所述网页元素显示特征发生改变相对应的绘制指令，并对应记录绘制资源信息，将所述绘制指令与所述绘制资源信息按照对应关系生成为绘制数据，并将所述绘制数据生成为第二同步数据发送至第二网页；相应地，所述第二网页根据所述绘制指令，在第二Canvas当前的绘制状态下执行所述绘制指令。该种可能的实现方式中，结合上述应用Canvas生成所述绘制指令的优选的实施方式，每一次同步基于Canvas内部所管理的绘制对象的改变输出并发送对应的绘制指令。在第二方面的一种可能的实现方式中，当所述第一网页中用于同步显示的网页元素类型为Canvas时，基于所述Canvas，将所述Canvas上发生的Canvas绘制操作记录为一个或多个绘制指令，并对应记录绘制指令相关的参数、素材作为绘制资源信息，将所述绘制指令与所述绘制资源信息按照对应关系生成为绘制数据，将所述绘制数据生成为第二同步数据发送给第二网页。通过本申请实施例提供的方案，可使在第一网页执行操作后，所述第二网页接收绘制指令与绘制资源信息，在所述第二网页中的Canvas上进行绘制，达到与所述第一网页内容画面保持一致的效果。上述第一方面、第二方面提供的技术方案中，还包括记录网页元素基于Canvas的定位信息，并将所述定位信息与所述网页元素的标识信息对应存储；其中，所述Canvas为第一方面中执行绘制的第一Canvas或者第二方面中用于计算绘制指令的Canvas，所述定位信息包括网页元素在所述Canvas上绘制的大小、网页元素相对于所述Canvas的位置、网页元素在所述Canvas中所处的图层信息中的一种或多种，用于标识所述网页元素在第二Canvas中的显示位置。以上，记录网页元素基于所述第一Canvas的定位信息目的在于记录网页元素在页面中的位置、布局信息，用于所述第一网页在接收到用户在所述第二网页的操作后，通过该操作的位置坐标，在所述记录的信息中可查找获得其所操作的网页元素；所述网页元素的标识信息，是为网页元素建立的唯一标识，用于在所述第一网页中查找并获取具体的网页元素。上述第一方面、第二方面提供的技术方案中，获取所述网页元素的显示特征的方法，包括：当所述第一方面中用于绘制或所述第二方面中用于执行绘制指令计算的Canvas尺寸为当前第一网页显示区域尺寸时，根据所述网页元素在第一网页中的显示，计算其显示特征；当所述第一方面中用于绘制或所述第二方面中用于执行绘制指令计算的Canvas尺寸为自定义本文档来自技高网...

【技术保护点】
1.一种应用Canvas实现的网页同步交流方法，其特征在于，包括：/n在第一网页中预先创建第一Canvas，所述第一Canvas与用于同步的网页内容相独立；/n所述第一网页响应于网页同步执行请求，读取所述第一网页中用于同步显示的网页元素，基于所述网页元素的显示特征在所述第一Canvas上执行绘制，并提取所述第一Canvas内容生成图片数据，将所述图片数据生成为第一同步数据发送至第二网页；/n所述第一同步数据用于所述第二网页接收，并基于其包含的所述图片数据在所述第二网页内预置的第二Canvas中执行图像绘制操作，绘制所述图片数据。/n

【技术特征摘要】
1.一种应用Canvas实现的网页同步交流方法，其特征在于，包括：
在第一网页中预先创建第一Canvas，所述第一Canvas与用于同步的网页内容相独立；
所述第一网页响应于网页同步执行请求，读取所述第一网页中用于同步显示的网页元素，基于所述网页元素的显示特征在所述第一Canvas上执行绘制，并提取所述第一Canvas内容生成图片数据，将所述图片数据生成为第一同步数据发送至第二网页；
所述第一同步数据用于所述第二网页接收，并基于其包含的所述图片数据在所述第二网页内预置的第二Canvas中执行图像绘制操作，绘制所述图片数据。


2.根据权利要求1所述的方法，其特征在于，将所述第一Canvas内容生成图片数据，包括以下任意一种生成方式：
A.根据所述第一Canvas显示的整体内容生成为图片数据；
B.根据所述第一Canvas当前内容与上一网页同步执行请求完成后的内容进行比较计算并获得差异部分，或者，根据本次同步执行请求所执行的绘制内容区域作为差异部分，将所述差异部分提取生成为一个或多个差异图片，同时对应记录每个差异图片在所述第一Canvas中的相对位置信息，将所述差异图片与所述相对位置信息组合生成为图片数据；相应地，所述第二网页解析所述图片数据，根据所述图片数据包含的所述相对位置信息计算获得替换区域，以所述图片数据包含的所述差异图片作为替换内容，在所述第二Canvas中的所述替换区域对应绘制所述替换内容。


3.一种应用Canvas实现的网页同步交流方法，其特征在于，包括：
所述第一网页响应于网页同步执行请求，读取所述第一网页中用于同步显示的网页元素，基于所述网页元素的显示特征，生成绘制所述网页元素的一个或多个绘制指令，并对应记录所述绘制指令相关的参数、素材作为绘制资源信息，将所述绘制指令与所述绘制资源信息按照对应关系生成为绘制数据，将所述绘制数据生成为第二同步数据发送至第二网页；
所述第二同步数据用于所述第二网页接收，并基于其包含的绘制数据在所述第二网页内预置的第二Canvas中执行绘制操作，具体为：解析所述绘制数据，基于所述绘制指令及其相关的参数与素材，在预置的第二Canvas上执行所述绘制指令。


4.根据权利要求3所述的方法，其特征在于，所述方法还包括：
在上一次网页同步执行请求完成后的Canvas绘制状态基础上，根据本次同步执行请求中显示特征发生改变的网页元素，计算获得与所述网页元素显示特征发生改变相对应的绘制指令，并对应记录绘制资源信息，将所述绘制指令与所述绘制资源信息按照对应关系生成为绘制数据，并将所述绘制数据生成为第二同步数据发送至第二网页；相应地，所述第二网页根据所述绘制指令，在第二Canvas当前的绘制状态下执行所述绘制指令。


5.根据权利要求3所述的方法，其特征在于，所述方法还包括：
当所述第一网页中用于同步显示的网页元素类型为Canvas时，基于所述Canvas，将所述Canvas上发生的Canvas绘制操作记录为一个或多个绘制指令，并对应记录绘制指令相关的参数、素材作为绘制资源信息，将所述绘制指令与所述绘制资源信息按照对应关系生成为绘制数据，将所述绘制数据生成为第二同步数据发送给第二网页。


6.根据权利要求1、权利要求3所述的方法，其特征在于，还包括记录网页元素基于Canvas的定位信息，并将所述定位信息与所述网页元素的标识信息对应存储；其...

【专利技术属性】
技术研发人员：路九阳，
申请(专利权)人：青岛希望鸟科技有限公司，
类型：发明
国别省市：山东;37