CN114942854A - 一种gif动图的截图方法和相关设备 - Google Patents

Abstract

本发明公开了一种GIF动图的截图方法和相关设备，方法包括：接收针对显示界面的截图指令，其中，所述截图指令包括截图坐标；根据所述截图坐标，生成与所述截图指令对应的初始画布；当与所述截图坐标对应的截图区域包含动态元素时，提取所述动态元素的图像信息，其中，所述图像信息包括帧图像集；针对所述帧图像集中的每一张目标帧图像，将该目标帧图像写入所述初始画布，得到与该目标帧图像对应的目标图像；根据所述目标帧图像对应的显示顺序和预设的目标时长，将所述目标图像进行整合，得到与所述截图指令对应的目标截图。本发明能够实现对动态图像的截图保存，增加了截图功能的适用性。

Description

一种GIF动图的截图方法和相关设备

技术领域

本发明涉及数据处理技术领域，特别涉及一种GIF动图的截图方法和相关设备。

背景技术

随着互联网技术的发展，人们可通过互联网进行方便快捷地沟通。在进行沟通时常常用到的一个工具就是截图工具。在很多沟通软件中都有设置截图的快捷键，windows、android等操作系统都有设定截图的快捷键。

截图是将当前显示的内容以图片的形式进行展示，而一般的图片都是静态的，当用户进行截图时，只能得到静态的图像。然而显示器所能显示的图片不仅包括静态的格式，例如jpg格式、png格式，还包括动态的格式，例如gif格式。因此当显示器显示的图像为gif的动图时，截图只能截取启动截图功能那一瞬间的静态图像，无法截取gif图像。

发明内容

本发明要解决的技术问题在于无法截图保存gif图像，针对现有技术的不足，提供一种GIF动图的截图方法和相关设备。

为了解决上述技术问题，本发明所采用的技术方案如下：

一种GIF动图的截图方法，所述方法包括：

接收针对显示界面的截图指令，其中，所述截图指令包括截图坐标；

根据所述截图坐标，生成与所述截图指令对应的初始画布；

当与所述截图坐标对应的截图区域包含动态元素时，提取所述动态元素的图像信息，其中，所述图像信息包括帧图像集；

针对所述帧图像集中的每一张目标帧图像，将该目标帧图像写入所述初始画布，得到与该目标帧图像对应的目标图像；

根据所述目标帧图像对应的显示顺序和预设的目标时长，将所述目标图像进行整合，得到与所述截图指令对应的目标截图。

可选地，所述根据所述截图坐标，生成与所述截图指令对应的初始画布包括：

根据所述截图坐标，生成空白画布；

将与所述截图坐标对应的截图区域中的静态元素写入所述空白画布中，得到初始画布。

可选地，所述提取所述动态元素的图像信息包括：

将所述动态图像中的每一张图像作为初始帧图像；

当所述截图区域与所述动态元素的显示区域存在交点时，根据所述交点和所述显示区域，对每一个所述初始帧图像进行裁剪，得到包含多张目标帧图像的帧图像集。

可选地，所述根据所述目标帧图像对应的显示顺序和预设的目标时长，将所述目标图像进行整合，得到与所述截图指令对应的目标截图包括：

根据预设的目标时长和所述目标帧图像的数量，确定每一个所述目标帧图像对应的单帧时长；

根据所述单帧时长和所述目标帧图像对应的显示顺序，将所述目标图像进行整合，得到与所述截图指令对应的目标截图。

可选地，所述根据所述目标帧图像对应的显示顺序和预设的目标时长，将所述目标图像进行整合，得到与所述截图指令对应的目标截图之前，还包括：

当所述动态元素的数量大于1时，计算所有所述动态元素的时长的平均值，得到目标时长。

可选地，所述根据所述目标帧图像对应的显示顺序和预设的目标时长，将所述目标图像进行整合，得到与所述截图指令对应的目标截图之前，还包括：

当所述动态元素的数量大于1时，将所有所述时长中的最大值或最小值作为目标时长。

可选地，所述根据所述目标帧图像对应的显示顺序和预设的目标时长，将所述目标图像进行整合，得到与所述截图指令对应的目标截图之前，还包括：

以所述动态元素的时长作为参数，计算使所述参数之间差值最小的倍数值；

根据所述倍数值和所述时长，确定与所述动态元素对应的目标时长。

可选地，所述方法还包括：

当所述截图区域不包含动态元素时，将所述初始画布作为目标截图。

一种计算机可读存储介质，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现如上任一所述的GIF动图的截图方法中的步骤。

一种终端设备，其包括：处理器、存储器及通信总线；所述存储器上存储有可被所述处理器执行的计算机可读程序；

所述通信总线实现处理器和存储器之间的连接通信；

所述处理器执行所述计算机可读程序时实现如上任一所述的GIF动图的截图方法中的步骤。

有益效果：本发明提供一种GIF动图到底截图方法和相关设备，首先接收截图指令，在截图指令中会包括截图坐标，一方面根据截图坐标生成初始画布，一方面判断在截图坐标的范围内是否会存在动图，若存在动图，就将动图中的每一帧图像写入初始画布中，得到该帧图像对应的目标帧图像，最后将目标帧图像进行整合，像生成动图一样，生成该目标帧图像对应的动图，即该截图指令对应的目标截图。通过此方式，能够对GIF格式的动图进行截取并保存。

附图说明

图1为本发明提供的GIF动图的截图方法的流程图。

图2为本发明提供的GIF动图的截图方法的整体流程图。

图3为本发明提供的终端设备的结构原理图。

具体实施方式

本发明提供一种GIF动图的截图方法，为使本发明的目的、技术方案及效果更加清楚、明确，以下参照附图并举实施例对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。

本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本发明的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。应该理解，当我们称元件被“连接”或“耦接”到另一元件时，它可以直接连接或耦接到其他元件，或者也可以存在中间元件。此外，这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的措辞“和/或”包括一个或更多个相关联的列出项的全部或任一单元和全部组合。

本技术领域技术人员可以理解，除非另外定义，这里使用的所有术语(包括技术术语和科学术语)，具有与本发明所属领域中的普通技术人员的一般理解相同的意义。还应该理解的是，诸如通用字典中定义的那些术语，应该被理解为具有与现有技术的上下文中的意义一致的意义，并且除非像这里一样被特定定义，否则不会用理想化或过于正式的含义来解释。

如图1所示，本实施提供了一种GIF动图的截图方法，为方便说明，以常见的服务器作为执行主体进行描述，此处的服务器可替换为平板、电脑等具有数据处理功能的设备。在这些设备上安装有浏览器程序，GIF动图的截图方法应用于安装有浏览器的相关设备上，在执行该方法时，实现以下步骤：

S10、接收针对显示界面的截图指令。

具体地，首先，用户向服务器输入截图指令，该截图指令包括截图坐标。截图坐标是指针对显示界面的坐标，用于确定用户所需要截取的图片的范围。

例如以显示界面的左上角顶点为原点，以水平向右为横轴，以竖直向下作为纵轴，截图坐标为（0，0），（80，0），（0，80），（80，80）。

S20、根据所述截图坐标，生成与所述截图指令对应的初始画布。

具体地，截图坐标表示了用户想要截取图像的大小，因此，得到截图坐标后，可以先生成一个与该截图指令对应的初始画布，以用于后续将需要的内容写入到该画布中。

在一种生成初始画布的方式中，根据截图坐标，生成一个空白画布，例如前例中的截图坐标，生成一个80 x 80像素的画布。将该空白画布作为初始画布。这种方式无法将截图坐标对应的截图区域中文字、静态图像部分截图保存。因此在本实施例的另一种生成初始画布的方式中，在根据截图坐标，生成空白画布后，将与截图坐标对应的截图区域中的静态元素写入空白画布中，得到初始画布。

以显示界面为文档对象模型(DOM)为例，DOM是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。

如图2所示，DOM中的多个元素构成了界面的显示内容，在DOM中，每一个节点都是一个对象，DOM节点有三个重要的属性，包括节点的名称、节点的值以及节点的类型。每一个节点所在位置坐标是固定的，因此，得到截图坐标后，可根据该截图坐标，判断与显示界面对应的DOM节点是否包含在截图区域中。若包含，则将该节点的内容进行图像化并写入空白画布中，从而得到与截图区域对应的初始画布。此外，还可利用已成熟的html2canvas、dom-to-image，及其他截图小工具可实现对DOM节点进行图像化并写入空白画布中。

S30、当与所述截图坐标对应的截图区域包含动态元素时，提取所述动态元素的图像信息。

具体地，动态元素是指包含GIF格式的动图。用户在截图时，若截图区域中并不包含动态元素，可直接将节点内容图像化生成的初始画布作为截图后得到的目标截图。

若用户区域包含动态元素，则需要提取动态元素中的图像信息。

仍以DOM为例，可采用libgif.js 解析dom中的gif，通过实例上的get_frames方法能拿到gif图每一帧的图像信息。以下为示例性代码：

const frames = [

{

data: ImageData，

delay:10,

},

{

data: ImageData，

delay:8,

}

]

其中，data表示动态元素中的某一个帧图像，其对应的delay为这个帧图像对应的时长。若后续采用canvas的形式进行画布生成和图像渲染，则为了方便渲染，帧图像的格式优选Uint8ClampedArray格式，Uint8ClampedArray（8位无符号整型固定数组） 类型化数组表示一个由值固定在0-255区间的8位无符号整型组成的数组。如果指定一个在[0,255]区间外的值，它将被替换为0或255；如果指定一个非整数，那么它将被设置为最接近它的整数。数组内容被初始化为0，且数组一旦被创建，可以使用对象的方法引用数组里的元素，或使用标准的数组索引语法，因此可采用canvas中的putImageData方法在canvas中渲染。

由于动态元素中的图像是由多张图像组成，因此，得到的图像信息包括由多张帧图像组成的帧图像集。

后续需要将帧图像写入到初始画布中，以得到每一个帧图像对应的目标图像。

一般情况下，当用户选定的截图区域覆盖动态元素的边界时，表明用户想把整个动态元素和周边的元素截取，因此可直接将动态元素中初始帧图像本身作为目标帧图像。

但也存在用户选定的截图区域并非覆盖动态元素的边界，此时动态元素中的初始帧图像不能直接写入空白画布中，此时，将动态图像中的每一张图像都视作初始帧图像，然后判断截图区域与所述动态元素的显示区域是否存在交点，若存在交点，则说明用户所选取的需要裁剪的截图。因此根据所述交点和所述显示区域，对每一个所述初始帧图像进行裁剪，得到包含多张目标帧图像的帧图像集。例如在上例中的截图坐标前提下，动态元素的显示区域的坐标为（0，0），（120，0），（0，10），（120，10），因此存在交点（80，10）。根据交点和显示区域，可确定目标帧图像对应的区域坐标为（0，0），（80，0），（0，10）和（80，10），根据区域坐标可确定目标帧图像的区域范围，进而对初始帧图像进行裁剪，得到目标帧图像。

S40、针对所述帧图像集中的每一张目标帧图像，将该目标帧图像写入所述初始画布，得到与该目标帧图像对应的目标图像。

具体地，每一个目标帧图像都有一个对应的目标图像，目标图像类似于针对该目标帧图像的截图。在canvas中，可先绘制一个与截图区域对应的图像，然后将目标帧图像替换该图像中GIF格式的动态元素对应的位置，从而得到目标帧图像对应的目标图像。

S50、根据所述目标帧图像对应的显示顺序和预设的目标时长，将所述目标图像进行整合，得到与所述截图指令对应的目标截图。

具体地，目标帧图像在动态元素中是按照一定顺序排列的，在播放时，按照每一个目标帧图像的时长进行依次播放，从而动态展示。预先可设置一个目标时长，目标时长是指后续目标截图中所有目标帧图像完成最基础的播放的时间长度。预设的目标时长可为初始化选择得到时长，也可以为根据动态元素自身的时长决定，例如动态元素中有6个初始帧图像，且每一个初始帧图像为50 ms，则设定的目标时长为300 ms。

本实施例优选的每帧的单帧时长为 50ms，但所使用的 GIF 图来源不一，无法保证其一致性。帧数越多，最终生成的目标截图就越大，截图生成时间就越长。限制帧数最大值为100，则采用缩减每一个目标帧图像的画布大小、形成长度压缩、按照预设的删减规则，删减部分目标帧图像等方式，以减少图像大小。其中，删减规则可包括间隔一帧、两帧等数量的目标帧图像进行删除、根据连续的两个目标帧图像之间的相似度进行删减等。例如设定一个相似度阈值，后一个目标帧图像与前一个目标帧图像之间的相似度超出该阈值，则删除该目标帧图像；相似度低于该阈值，则保留该目标帧图像。

得到了所有的目标帧图像后，根据目标帧图像的显示顺序，可对目标帧图像进行排序，根据目标时长，可确定每一个目标帧图像对应的单帧时长，因此根据排序后的目标帧图像和单帧时长，即可整合生成截图指令对应的目标截图。

进一步地，在前文描述的提取图像信息过程中，还可提取每一个初始帧图像对应的单帧时长（delay），一般在一个动态元素中，所有初始帧图像对应的单帧时长相同，若存在初始帧图像对应的单帧时长长度不同的情况时，根据目标时长和初始帧图像对应的单帧时长的比例，确定每一个目标帧图像对应的单帧时长。例如目标时长为500 ms，初始帧图像数量为2，单帧时长分别为200 ms和300 ms，因此确定目标帧图像之间的时长比例为2：3，进而根据目标时长，确定目标帧图像的单帧时长分别为200 ms和300 ms。

在截图区域中仅包含一个动态元素的情况下，可直接根据目标时长、单帧时长等确定，但是当截图区域中包含多个动态元素时，且不同的动态元素对应的时长不同，则需要对每一个动态元素对应的目标帧图像进行时长调整。

在本实施例提供的第一种目标时长的确定方式中，计算所有的动态元素的时长的平均值，并将该平均值作为目标时长。例如动态元素有A、B和C三个，其时长分别为1000 ms、600 ms和800 ms，计算三者的平均值（1000+600+800）/3=800 ms，因此将800 ms作为目标时长。

在第二种目标时长的确定方式中，直接将所有的时长中的最大值或最小值作为目标时长，例如前例中，可选择将600 ms作为目标时长，或选择1000 ms作为目标时长。

在第三种目标时长的确定方式中，以动态元素的时长作为参数，计算是的参数之间差值最小的倍数值。若动态元素的数量为2，其公式表示可为

，其中

为第一个动态元素的时长，

为第二个动态元素的时长，a为第一个动态元素的倍数值，b为第二个动态元素的倍数值。以上述三个动态元素为例，

=

，

=

若限制倍数值为整数，可得到a为1，b为2，c为1。选择任意一个动态元素的时长和其对应的倍数值之间的乘积作为目标时长，例如以动态元素A为例，则动态元素A的时长与倍数值的乘积，即1000 ms，作为目标时长。同时，针对倍数值大于2的动态元素，计算初始帧图像的时长与倍数值之间的乘积，得到第一时长；以及动态元素的初始帧图像的数量与倍数值之间的乘积，得到循环图像数；然后计算目标时长与第一时长之间的时长差值，并计算时长差值与循环图像数之间的比值，得到调整时长，最后根据调整时长，确定每一个目标帧图像对应的单帧时长。以前文的动态元素B为例，第一时长为600 x 2=1200 ms，时长差值为1200 -1000=200 ms，初始帧图像为2，则循环图像数位2 x 2=4，因此，调整时长为50 ms，最后得到的单帧时长为600/2-50=250ms。相对地，若调整时长为负值，最后的单帧时长为原单帧时长增加50 ms。

进一步地，若同一个动态图像中单帧时长不一致，可根据单帧时长的比例确定调整时长。计算目标时长和第一时长的时长比值，然后根据时长比值，调整每一个目标帧图像对应的单帧时长。例如在上例中，单帧时长分别为200 ms和400 ms，目标时长与第一时长的比值为5：6，因此调整后的单帧时长分别为（200x5）/6=166.7 ms，以及（400x5）/6=333.3ms。

以下提供计算第一种、第二种和第三种目标时长确定方式中的部分伪代码：

/**

* 计算gif数据

* @param { gifsData} 所有的gif图解析之后的数据集合

* @return { totalTime, frameLen, delay} 总时长、总帧数、每帧的延迟时间

*/

// 每帧的默认时长

const DEFAULT_GIF_DELAY = 50;

// 最大帧数

const MAX_GIF_FRAME = 100;

function computeGifData(gifsData: GifData[]) {

const times = gifsData.map((gif) => gif.totalTime);

const minTime = Math.min(...times);

const maxTime = Math.max(...times);

const div = maxTime / minTime;

let totalTime = 0;

if (div > 2) {

// 计算最大时长

totalTime = computeTotalTime(minTime, maxTime);

} else {

// 取平均时长

totalTime = times.reduce((pre, cur) => pre + cur, 0) /times.length;

}

let delay = DEFAULT_GIF_DELAY;

let frameLen = totalTime / delay; // 帧数

if (frameLen > MAX_GIF_FRAME) {

delay = delay * (frameLen / MAX_GIF_FRAME);

frameLen = MAX_GIF_FRAME;

}

return { totalTime, frameLen, delay };

}

其中，totalTime为目标时长，frameLen为某个动态元素对应在目标截图中的时长，delay为单帧时长。

基于上述GIF动图的截图方法，本发明还提供了一种终端设备，如图3所示，其包括至少一个处理器（processor）20；显示屏21；以及存储器（memory）22，还可以包括通信接口（Communications Interface）23和总线24。其中，处理器20、显示屏21、存储器22和通信接口23可以通过总线24完成相互间的通信。显示屏21设置为显示初始设置模式中预设的用户引导界面。通信接口23可以传输信息。处理器20可以调用存储器22中的逻辑命令，以执行上述实施例中的方法。

此外，上述的存储器22中的逻辑命令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取计算机可读存储介质中。

存储器22作为一种计算机可读存储介质，可设置为存储软件程序、计算机可执行程序，如本公开实施例中的方法对应的程序命令或模块。处理器20通过运行存储在存储器22中的软件程序、命令或模块，从而执行功能应用以及数据处理，即实现上述实施例中的方法。

存储器22可包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据终端设备的使用所创建的数据等。此外，存储器22可以包括高速随机存取存储器，还可以包括非易失性存储器。例如，U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等多种可以存储程序代码的介质，也可以是暂态计算机可读存储介质。

此外，上述计算机可读存储介质以及终端设备中的多条命令处理器加载并执行的具体过程在上述方法中已经详细说明，在这里就不再一一陈述。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种GIF动图的截图方法，其特征在于，所述方法包括：

接收针对显示界面的截图指令，其中，所述截图指令包括截图坐标；

根据所述截图坐标，生成与所述截图指令对应的初始画布；

当与所述截图坐标对应的截图区域包含动态元素时，提取所述动态元素的图像信息，其中，所述图像信息包括帧图像集；

针对所述帧图像集中的每一张目标帧图像，将该目标帧图像写入所述初始画布，得到与该目标帧图像对应的目标图像；

根据所述目标帧图像对应的显示顺序和预设的目标时长，将所述目标图像进行整合，得到与所述截图指令对应的目标截图。

2.根据权利要求1所述GIF动图的截图方法，其特征在于，所述根据所述截图坐标，生成与所述截图指令对应的初始画布包括：

根据所述截图坐标，生成空白画布；

将与所述截图坐标对应的截图区域中的静态元素写入所述空白画布中，得到初始画布。

3.根据权利要求1所述GIF动图的截图方法，其特征在于，所述提取所述动态元素的图像信息包括：

将所述动态图像中的每一张图像作为初始帧图像；

当所述截图区域与所述动态元素的显示区域存在交点时，根据所述交点和所述显示区域，对每一个所述初始帧图像进行裁剪，得到包含多张目标帧图像的帧图像集。

4.根据权利要求1~3中任意一项所述GIF动图的截图方法，其特征在于，所述根据所述目标帧图像对应的显示顺序和预设的目标时长，将所述目标图像进行整合，得到与所述截图指令对应的目标截图包括：

根据预设的目标时长和所述目标帧图像的数量，确定每一个所述目标帧图像对应的单帧时长；

根据所述单帧时长和所述目标帧图像对应的显示顺序，将所述目标图像进行整合，得到与所述截图指令对应的目标截图。

5.根据权利要求4所述GIF动图的截图方法，其特征在于，所述根据所述目标帧图像对应的显示顺序和预设的目标时长，将所述目标图像进行整合，得到与所述截图指令对应的目标截图之前，还包括：

当所述动态元素的数量大于1时，计算所有所述动态元素的时长的平均值，得到目标时长。

6.根据权利要求4所述GIF动图的截图方法，其特征在于，所述根据所述目标帧图像对应的显示顺序和预设的目标时长，将所述目标图像进行整合，得到与所述截图指令对应的目标截图之前，还包括：

当所述动态元素的数量大于1时，将所有所述时长中的最大值或最小值作为目标时长。

7.根据权利要求4所述GIF动图的截图方法，其特征在于，所述根据所述目标帧图像对应的显示顺序和预设的目标时长，将所述目标图像进行整合，得到与所述截图指令对应的目标截图之前，还包括：

以所述动态元素的时长作为参数，计算使所述参数之间差值最小的倍数值；

根据所述倍数值和所述时长，确定与所述动态元素对应的目标时长。

8.据权利要求1~3中任意一项所述GIF动图的截图方法，其特征在于，所述方法还包括：

当所述截图区域不包含动态元素时，将所述初始画布作为目标截图。

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现如权利要求1～8任意一项所述的GIF动图的截图方法中的步骤。

10.一种终端设备，其特征在于，包括：处理器、存储器及通信总线；所述存储器上存储有可被所述处理器执行的计算机可读程序；

所述通信总线实现处理器和存储器之间的连接通信；

所述处理器执行所述计算机可读程序时实现如权利要求1～8任意一项所述的GIF动图的截图方法中的步骤。

Images