CN109145239B - 一种基于学科游戏的多平台截图分享方法及电子设备 - Google Patents

Abstract

本发明公开一种基于学科游戏的多平台截图分享方法及电子设备，方法包括步骤：A、客户端接收到截图分享指令时，对当前界面进行截图，将截图的纹理绘制到画布中，通过所述画布获取截图的base64编码；B、客户端根据所述base64编码将截图分享至其他终端。本发明在进行H5游戏的截图时，将截图的纹理绘制到画布中，并通过画布获取截图的base64编码，从而根据所述base64编码进行截图的分享，本发明的分享方法简单方便，并且可在多个平台上实现分享。

Description

一种基于学科游戏的多平台截图分享方法及电子设备

技术领域

本发明涉及计算机技术领域，尤其涉及一种基于学科游戏的多平台截图分享方法及电子设备。

背景技术

H5是一系列制作网页互动效果的技术集合，即H5就是移动端的web页面。而H5游戏，可以看作是移动端的web游戏，无需下载软件即可体验，这就是H5在传播上的优势。对于许多手游玩家来说，H5可能是个十分陌生的名词，其实H5就是HTML的高级版本，目前H5技术正在不断完善。当H5游戏在国内还处于萌芽状态时，专注移动游戏平台领域的公司就已经开始准备全面转型。

H5游戏平台正以跨平台运营模式作为未来前进方向，将各个平台端游戏汇总整合集中，为玩家提供便捷的游戏通道，开创游戏平台运营新纪元，并努力成为综合游戏平台领跑者。

在使用H5游戏过程中，经常需要对当前的屏幕进行截图，并且分享到qq好友、qq空间、微信好友或者微信朋友圈。

由于移动平台采用的是webview(展示web页面的控件)+canvas(画布)的方式，如果启用了硬件加速后无法使用android和ios的api对canvas进行截图，造成无法正常分享，或者分享步骤繁琐。

因此，现有技术还有待于改进和发展。

发明内容

鉴于上述现有技术的不足，本发明的目的在于提供一种基于学科游戏的多平台截图分享方法及电子设备，旨在解决现有H5游戏截图分享不便的问题。

本发明的技术方案如下：

一种基于学科游戏的多平台截图分享方法，其中，包括步骤：

A、客户端接收到截图分享指令时，对当前界面进行截图，将截图的纹理绘制到画布中，通过所述画布获取截图的base64编码；

B、客户端根据所述base64编码将截图分享至其他终端。

所述的基于学科游戏的多平台截图分享方法，其中，所述步骤A具体包括：

A1、客户端接收到截图分享指令时，对当前界面进行截图；

A2、将截图的节点渲染到纹理中，获取所述纹理的像素，并转化为ImagData；

A3、将所述ImagData渲染到画布中，通过所述画布获取截图的base64编码。

所述的基于学科游戏的多平台截图分享方法，其中，若客户端所属平台为web平台，则所述步骤B具体包括：

B1、客户端将base64编码上传给服务器，并接收服务器返回的图片链接；

B2、客户端将图片链接和相应的文本描述分享给其他终端。

所述的基于学科游戏的多平台截图分享方法，其中，若客户端所属平台为android平台，则所述步骤B具体包括：

B1’、将base64编码传递给原生层，然后在原生层将base64编码转化为位图文件；

B2’、调用SDK将位图文件分享至其他终端。

所述的基于学科游戏的多平台截图分享方法，其中，所述步骤B2’中，若通过qq好友或qq空间进行分享，则将位图文件保存到本地后，获得本地的图片路径，调用SDK分享所述图片路径；若通过微信进行分享，则直接调用SDK分享位图文件。

所述的基于学科游戏的多平台截图分享方法，其中，若客户端所属平台为ios平台，则所述步骤B具体包括：

B1”、将所述base64编码传递给原生层，然后将base64编码转化为image对象；

B2”、客户端将image对象分享给其他终端。

一种电子设备，其中，包括存储器和处理器，所述存储器上存储有可在所述处理器上运行的多平台截图分享程序，所述多平台截图分享程序被所述处理器执行时实现如下步骤：

客户端接收到截图分享指令时，对当前界面进行截图，将截图的纹理绘制到画布中，通过所述画布获取截图的base64编码；

客户端根据所述base64编码将截图分享至其他终端。

所述的电子设备，其中，所述客户端接收到截图分享指令时，对当前界面进行截图，将截图的纹理绘制到画布中，通过所述画布获取截图的base64编码的步骤具体包括：

客户端接收到截图分享指令时，对当前界面进行截图；

将截图的节点渲染到纹理中，获取所述纹理的像素，并转化为ImagData；

将所述ImagData渲染到画布中，通过所述画布获取截图的base64编码。

所述的电子设备，其中，若客户端所属平台为web平台，则所述客户端根据所述base64编码将截图分享至其他终端的步骤具体包括：

客户端将base64编码上传给服务器，并接收服务器返回的图片链接；

客户端将图片链接和相应的文本描述分享给其他终端。

所述的电子设备，其中，若客户端所属平台为android平台，则所述客户端根据所述base64编码将截图分享至其他终端的步骤具体包括：

将base64编码传递给原生层，然后在原生层将base64编码转化为位图文件；

调用SDK将位图文件分享至其他终端。

有益效果：本发明在进行H5游戏的截图时，将截图的纹理绘制到画布中，并通过画布获取截图的base64编码，从而根据所述base64编码进行截图的分享，本发明的分享方法简单方便，并且可在多个平台上实现分享。

附图说明

图1为本发明一种基于学科游戏的多平台截图分享方法较佳实施例的流程图。

图2为本发明一种电子设备较佳实施例的结构框图。

具体实施方式

本发明提供一种基于学科游戏的多平台截图分享方法及电子设备，为使本发明的目的、技术方案及效果更加清楚、明确，以下对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

请参阅图1，图1为本发明一种基于学科游戏的多平台截图分享方法较佳实施例的流程图，如图所示，其包括步骤：

S1、客户端接收到截图分享指令时，对当前界面进行截图，将截图的纹理绘制到画布中，通过所述画布获取截图的base64编码；

S2、客户端根据所述base64编码将截图分享至其他终端。

本发明在进行H5游戏的截图时，将截图的纹理绘制到画布中，并通过画布获取截图的base64编码，从而根据所述base64编码进行截图的分享，本发明的分享方法简单方便，并且可在多个平台上实现分享。

具体地，在所述步骤S1中，先通过画布的方式来获取截图的base64编码。

进一步，所述步骤S1具体包括：

S11、客户端接收到截图分享指令时，对当前界面进行截图；

S12、将截图的节点渲染到纹理中，获取所述纹理的像素，并转化为ImagData；

S13、将所述ImagData渲染到画布中，通过所述画布获取截图的base64编码。

在所述步骤S11中，客户端接收到截图分享指令时，对当前界面进行截图。具体是在游戏界面中，当用户点击游戏界面中的分享按钮，这样客户端便接收到了截图分享指令，此时对当前界面进行截图。

在所述步骤S12中，将截图的节点渲染到一张纹理当中，然后获得这张纹理的像素。再将得到的像素转化为ImagData(即ImageData)。

其中，ImagData属性返回一个对象，该对象包含指定的ImageData对象的图像数据。

对于ImageData对象中的每个像素，都存在着四方面的信息，即RGBA值：

R-红色(0-255)

G-绿色(0-255)

B-蓝色(0-255)

A-alpha通道(0-255；0是透明的，255是完全可见的)

color/alpha信息以数组形式存在，并存储于ImageData对象的data属性中。

在所述步骤S13中，将所述ImagData渲染到画布中，通过所述画布获取截图的base64编码。

HTML5的canvas(画布)元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。

创建canvas元素时，可向HTML5页面添加canvas元素，并规定元素的id、宽度和高度。canvas元素本身是没有绘图能力的，所有的绘制工作必须在JavaScript内部完成。

具体地，JavaScript使用id来寻找canvas元素：然后，创建context对象：getContext("2d")对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

Base64是用于传输8Bit字节码的编码方式之一，即一种基于64个可打印字符来表示二进制数据的方法。Base64编码是从二进制到字符的过程，可用于在HTTP环境下传递较长的标识信息。例如，在Java Persistence系统Hibernate中，采用Base64来将一个较长的唯一标识符(一般为128-bit的UUID)编码为一个字符串，用作HTTP表单和HTTP GET URL中的参数。在其他应用程序中，也常常需要把二进制数据编码为适合放在URL(包括隐藏表单域)中的形式。此时，采用Base64编码具有不可读性，需要解码后才能阅读。

在所述步骤S2中，需要根据所述base64编码将截图分享至其他终端。

当然，根据客户端所属平台的不同，分享的方式有所不同，下面对此进行详述。

若客户端所属平台为web平台，则所述步骤S2具体包括：

S21、客户端将base64编码上传给服务器，并接收服务器返回的图片链接；

S22、客户端将图片链接和相应的文本描述分享给其他终端。

也就是说，在所述步骤S21中，客户端直接将base64编码上传给服务器，服务器保存所述base64编码，生成一个图片链接返回给客户端。

在所述步骤S22中，客户端将图片链接和相应的文本描述通过qq好友或qq空间等方式分享给其他终端，即调用相应接口进行分享。

若客户端所属平台为android平台，则所述步骤S2具体包括：

S21’、将base64编码传递给原生层，然后在原生层将base64编码转化为位图文件；

S22’、调用SDK将位图文件分享至其他终端。

在所述步骤S21’中，将游戏中base64编码传递给原生层，然后将base64编码转化为bitmap。其中，Bitmap是位图文件，扩展名可以是.bmp或者.dib。位图是Windows标准格式图形文件，它将图像定义为由点(像素)组成，每个点可以由多种色彩表示，包括2、4、8、16、24和32位色彩。例如，一幅1024×768分辨率的32位真彩图片，其所占存储字节数为：1024×768×32/(8*1024)＝3072KB。

在所述步骤S22’中，调用SDK将位图文件分享至其他终端。

具体地，若通过qq好友或qq空间进行分享，则将位图文件保存到本地后，获得本地的图片路径，调用SDK分享所述图片路径；若通过微信进行分享，则直接调用SDK分享位图文件。SDK即软件工具开发包，一般都是特定的软件包、软件框架、硬件平台、操作系统等建立应用软件时的开发工具的集合。

若客户端所属平台为ios平台，则所述步骤S2具体包括：

S21”、将所述base64编码传递给原生层，然后将base64编码转化为image对象；

S22”、客户端将image对象分享给其他终端。

在上述步骤中，ios端中将base64编码传递给原生层，然后将base64编码转化为image对象，然后将image对象分享出去即可。image对象代表嵌入的图像。<img>标签每出现一次，一个image对象就会被创建。

在上述各种平台中，优选对分享的图片的大小进行限制，例如设定一阈值，若分享的图片大小超过所述阈值，则对图片质量进行压缩，以使分享的图片大小不至于过大。

在android平台和ios平台中，需先将base64编码和分享的渠道上传到Cordova的插件中，然后再执行相应的步骤S2。

Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。Cordova还提供了一组统一的JavaScript类库，以及为这些类库所用的设备相关的原生后台代码。Cordova是贡献给Apache后的开源项目，是从PhoneGap中抽出的核心代码，是驱动PhoneGap的核心引擎。

本发明还提供一种移动设备1，如图2所示，在本实施例中，移动设备1可以是智能手机、平板电脑、便携计算机等终端设备。该移动设备1至少包括存储器11、处理器12，通信总线13，以及网络接口14。

其中，存储器11至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、磁性存储器、磁盘、光盘等。存储器11在一些实施例中可以是移动设备1的内部存储单元，例如该移动设备1的硬盘。存储器11在另一些实施例中也可以是移动设备1的外部存储设备，例如移动设备1上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。进一步地，存储器11还可以既包括移动设备1的内部存储单元也包括外部存储设备。存储器11不仅可以用于存储安装于移动设备1的应用软件及各类数据，例如多平台截图分享程序01的代码等，还可以用于暂时地存储已经输出或者将要输出的数据。

处理器12在一些实施例中可以是一中央处理器(Central Processing Unit,CPU)、控制器、微控制器、微处理器或其他数据处理芯片，用于运行存储器11中存储的程序代码或处理数据，例如执行多平台截图分享程序01等。

通信总线13用于实现这些组件之间的连接通信。

网络接口14可选的可以包括标准的有线接口、无线接口(如WI-FI接口)，通常用于在该移动设备1与其他电子设备之间建立通信连接。

可选地，该移动设备1还可以包括用户接口，用户接口可以包括显示器(Display)、输入单元比如键盘(Keyboard)，可选的用户接口还可以包括标准的有线接口、无线接口。可选地，在一些实施例中，显示器可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED(Organic Light-Emitting Diode，有机发光二极管)触摸器等。其中，显示器也可以适当的称为显示屏或显示单元，用于显示在移动设备1中处理的信息以及用于显示可视化的用户界面。

本领域技术人员可以理解的是，图2示出的结构并不构成对移动设备1的限定，可以包括比图示更少或者更多的部件，或者组合某些部件，或者不同的部件布置。

作为一具体实施例，所述存储器11上存储有可在所述处理器12上运行的多平台截图分享程序01，所述多平台截图分享程序01被所述处理器12执行时实现如下步骤：

客户端接收到截图分享指令时，对当前界面进行截图，将截图的纹理绘制到画布中，通过所述画布获取截图的base64编码；

客户端根据所述base64编码将截图分享至其他终端。

进一步，所述客户端接收到截图分享指令时，对当前界面进行截图，将截图的纹理绘制到画布中，通过所述画布获取截图的base64编码的步骤具体包括：

客户端接收到截图分享指令时，对当前界面进行截图；

将截图的节点渲染到纹理中，获取所述纹理的像素，并转化为ImagData；

将所述ImagData渲染到画布中，通过所述画布获取截图的base64编码。

进一步，若客户端所属平台为web平台，则所述客户端根据所述base64编码将截图分享至其他终端的步骤具体包括：

客户端将base64编码上传给服务器，并接收服务器返回的图片链接；

客户端将图片链接和相应的文本描述分享给其他终端。

进一步，若客户端所属平台为android平台，则所述客户端根据所述base64编码将截图分享至其他终端的步骤具体包括：

将base64编码传递给原生层，然后在原生层将base64编码转化为位图文件；

调用SDK将位图文件分享至其他终端。

关于上述移动设备1的具体技术细节在前面的方法中已有详述，故不再赘述。

需要说明的是，上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。并且本文中的术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、装置、物品或者方法不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、装置、物品或者方法所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、装置、物品或者方法中还存在另外的相同要素。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在如上所述的一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

应当理解的是，本发明的应用不限于上述的举例，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，所有这些改进和变换都应属于本发明所附权利要求的保护范围。

Claims (4)

1.一种基于学科游戏的多平台截图分享方法，其特征在于，包括步骤：A、客户端接收到截图分享指令时，对当前界面进行截图，将截图的纹理绘制到画布中，通过所述画布获取截图的base64编码；

B、客户端根据所述base64编码将截图分享至其他终端；

所述步骤A具体包括：A1、客户端接收到截图分享指令时，对当前界面进行截图；

A2、将截图的节点渲染到纹理中，获取所述纹理的像素，并转化为ImagData；

A3、将所述ImagData渲染到画布中，通过所述画布获取截图的base64编码；

若客户端所属平台为web平台，则所述步骤B具体包括：B1、客户端将base64编码上传给服务器，并接收服务器返回的图片链接；

B2、客户端将图片链接和相应的文本描述分享给其他终端；

若客户端所属平台为android平台，则所述步骤B具体包括：B1’、将base64编码传递给原生层，然后在原生层将base64编码转化为位图文件；

B2’、调用SDK将位图文件分享至其他终端。

2.根据权利要求1所述的基于学科游戏的多平台截图分享方法，其特征在于，所述步骤B2’中，若通过qq好友或qq空间进行分享，则将位图文件保存到本地后，获得本地的图片路径，调用SDK分享所述图片路径；若通过微信进行分享，则直接调用SDK分享位图文件。

3.根据权利要求1所述的基于学科游戏的多平台截图分享方法，其特征在于，若客户端所属平台为ios平台，则所述步骤B具体包括：B1”、将所述base64编码传递给原生层，然后将base64编码转化为image对象；

B2”、客户端将image对象分享给其他终端。

4.一种电子设备，其特征在于，包括存储器和处理器，所述存储器上存储有可在所述处理器上运行的多平台截图分享程序，所述多平台截图分享程序被所述处理器执行时实现如下步骤：客户端接收到截图分享指令时，对当前界面进行截图，将截图的纹理绘制到画布中，通过所述画布获取截图的base64编码；

客户端根据所述base64编码将截图分享至其他终端；

所述客户端接收到截图分享指令时，对当前界面进行截图，将截图的纹理绘制到画布中，通过所述画布获取截图的base64编码的步骤具体包括：客户端接收到截图分享指令时，对当前界面进行截图；

将截图的节点渲染到纹理中，获取所述纹理的像素，并转化为ImagData；

将所述ImagData渲染到画布中，通过所述画布获取截图的base64编码；

若客户端所属平台为web平台，则所述客户端根据所述base64编码将截图分享至其他终端的步骤具体包括：客户端将base64编码上传给服务器，并接收服务器返回的图片链接；

客户端将图片链接和相应的文本描述分享给其他终端；

若客户端所属平台为android平台，则所述客户端根据所述base64编码将截图分享至其他终端的步骤具体包括：将base64编码传递给原生层，然后在原生层将base64编码转化为位图文件；

调用SDK将位图文件分享至其他终端。

Images