CN112085818B - 一种图片处理方法以及装置 - Google Patents

Abstract

本发明公开了一种图片处理方法以及装置，涉及计算机技术领域，用于实现为图片添加轮廓形状不规则的边框，提升用户体验度。该方法包括：获取待处理图片的待合成边框；获取具有剪裁图片预览窗口的遮罩，所述遮罩的外沿周边至少延伸到所述待处理图片的周边，且所述剪裁图片预览窗口是根据所述待合成边框的内边框的形状和尺寸确定的；将所述待合成边框、所述遮罩以及所述待处理图片叠加显示，其中，被所述遮罩覆盖的待处理图片的区域为待剪除区域；将待处理图片中所述待剪除区域剪除，获得剪裁图片；将所述剪裁图片与所述待合成边框进行融合，以得到目标边框图片。

Description

一种图片处理方法以及装置

技术领域

本发明涉及计算机技术领域，特别涉及一种图片处理方法以及装置。

背景技术

目前，用户较喜欢通过手账日志等记录方式进行生活或者情绪的记录。在现有方案中，为了使得手账日志的内容更加丰富，适应用户更多的需求，从原本的文字记录逐渐发展为能够添加图片等内容，同时，在添加图片时，还可以为图片添加边框，使得图片的可观赏性以及趣味性等更高，从而使得手账日志更加出彩。

其中，在为图片添加边框时，为了适应边框的大小，通常需要对图片进行一定剪裁，但是，由于现有方案中边框格式较为单一，一般都是为图片添加形轮廓较为规则的矩形边框，因此现有的图片剪裁均是针对矩形边框设计的，并且由于矩形边框形状简单，可以较为简单的进行图片剪裁，从而基于现有方案剪裁的图片和矩形边框的形状和尺寸能够较为吻合，最终获得的边框图片中图片和边框的契合度较高，而对于轮廓形状不规则的边框，现有针对矩形边框的剪裁方式无法适用，从而无法为图片添加轮廓形状不规则的边框，即使强行为图片添加轮廓形状不规则的边框，所得到的边框图片的视觉效果也不佳。

因此，如何实现为图片添加轮廓形状不规则的边框是目前亟待解决的问题。

发明内容

本发明实施例提供一种图片处理方法以及装置，用于实现为图片添加轮廓形状不规则的边框，提升用户体验度。

一方面，提供一种图片处理方法，所述方法包括：

获取待处理图片的待合成边框；

获取具有剪裁图片预览窗口的遮罩，所述遮罩的外沿周边至少延伸到所述待处理图片的周边，且所述剪裁图片预览窗口是根据所述待合成边框的内边框的形状和尺寸确定的；

将所述待合成边框、所述遮罩以及所述待处理图片叠加显示，其中，被所述遮罩覆盖的待处理图片的区域为待剪除区域；

将待处理图片中所述待剪除区域剪除，获得剪裁图片；

将所述剪裁图片与所述待合成边框进行融合，以得到目标边框图片。

一方面，提供一种图片处理装置，所述装置包括：

边框获取单元，用于获取待处理图片的待合成边框；

遮罩获取单元，用于获取具有剪裁图片预览窗口的遮罩，所述遮罩的外沿周边至少延伸到所述待处理图片的周边，且所述剪裁图片预览窗口是根据所述待合成边框的内边框的形状和尺寸确定的；

叠加显示单元，用于将所述待合成边框、所述遮罩以及所述待处理图片叠加显示，其中，被所述遮罩覆盖的待处理图片的区域为待剪除区域；

剪裁单元，用于将待处理图片中所述待剪除区域剪除，获得剪裁图片；

图片融合单元，用于将所述剪裁图片与所述待合成边框进行融合，以得到目标边框图片。

可选的，所述边框获取单元，具体用于：

响应针对图片编辑界面显示的边框进行的选择操作，获取所述待合成边框以及所述待合成边框的尺寸参数数据，其中，所述尺寸参数数据包括与所述待合成边框的形状相对应类型的尺寸参数。

可选的，所述边框获取单元，具体用于：

获取所述待合成边框以及所述待合成边框的边框命名，所述边框命名采用指定的命名格式携带所述待合成边框的尺寸参数数据；

从所述边框命名中获取所述待合成边框的尺寸参数数据。

可选的，所述遮罩获取单元，具体用于：

根据所述待合成边框的尺寸参数数据确定所述待合成边框的边框类型，所述边框类型包括矩形边框和非矩形边框；

在确定所述待合成边框为矩形边框时，确定所述遮罩为矩形遮罩，并根据所述矩形边框的内边框的尺寸参数数据，确定所述剪裁图片预览窗口的尺寸参数数据；或者，

在确定所述待合成边框为非矩形边框时，确定所述遮罩包括矩形遮罩和非矩形遮罩，并分别根据所述非矩形边框的内边框的尺寸参数数据，确定所述矩形遮罩和所述非矩形遮罩的尺寸参数数据，其中，所述矩形遮罩的内沿和所述非矩形遮罩的外沿重合，且所述剪裁图片预览窗口为所述非矩形遮罩的内沿包围的区域。

可选的，所述装置还包括图片获取单元，用于：

响应针对显示界面包括的图片获取按钮进行的操作，获取所述待处理图片；

所述叠加显示单元，还用于将当前显示界面切换到图片编辑界面，并在所述图片编辑界面中显示所述待处理图片。

可选的，所述图片获取单元，具体用于：

调用图片采集控件采集待处理图片；

获取所述图片采集控件采集的待处理图片。

可选的，所述图片获取单元，具体用于：

显示图片采集方式选择界面；

接收通过所述图片采集方式选择界面输入的图片采集方式确认指示；

调用图片采集方式确认指示对应的图片采集控件采集待处理图片。

可选的，所述图片采集控件包括：

本地图片拍摄控件；或者，

本地图片上传控件；或者，

从网络获取图片的控件。

可选的，所述叠加显示单元，具体用于：

根据所述待处理图片的尺寸和所述图片处理区的尺寸，对所述待处理图像的尺寸进行调整，以使得调整后的待处理图片能够在所述图片处理区中完整显示；其中，所述图片编辑界面包括图片处理区；

将调整后的待处理图片在所述图片处理区中进行显示。

可选的，所述叠加显示单元，具体用于：

根据所述待合成边框的尺寸参数数据以及预设缩放比例，调整所述待合成边框的尺寸；其中，所述预设缩放比例是基于图片处理区的尺寸以及边框设计基准值确定的；以及,

根据所述遮罩的尺寸参数数据以及所述预设缩放比例，调整所述遮罩的尺寸；

将调整后的待合成边框以及调整后的遮罩按照设定顺序叠加显示在所述待处理图片上。

可选的，所述调整后的待合成边框、调整后的遮罩以及所述待处理图片在所述图片处理区中均居中显示。

可选的，位于所述剪裁图片预览窗口中的区域为剪裁图片的预览区域，所述装置还包括调整单元，用于：

响应通过图片编辑界面输入的图片调整操作，以调整所述待处理图片于所述预览区域中的显示部分；

所述剪裁单元，具体用于：响应针对所述图片编辑界面的剪裁操作按钮进行的操作，将所述图片处理区中当前显示的待剪裁图片的待剪除区域剪除，获得所述剪裁图片。

可选的，所述剪裁单元，具体用于：

采用设定的本地存储编码方式对所述待剪裁图片进行编码，并将编码后的待剪裁图片存储至本地存储空间；

根据所述待合成边框的尺寸参数数据创建图片剪裁图层，并从所述本地存储空间中加载编码后的待剪裁图片至所述图片剪裁图层中；

将位于所述图片剪裁图层区域之外的部分剪除，以得到所述剪裁图片。

可选的，所述图片融合单元，具体用于：

根据所述剪裁图片的编码字符串，以及所述待合成边框的链接，在相同的图层中依次绘制所述剪裁图片与所述待合成边框，以得到所述目标边框图片。

一方面，提供一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述方面所述的方法。

一方面，提供一种计算机可读存储介质，存储有处理器可执行指令，所述处理器可执行指令用于执行上述方面所述的方法。

本申请实施例中，可以将边框、遮罩以及待处理图片叠加显示，被遮罩覆盖的待处理图片区域为待剪除区域，位于剪裁图片预览窗口中的区域为剪裁图片的预览区域，因此通过遮罩的剪裁图片预览窗口，用户可以很明显的能够区分出图片哪些区域为保留区域，哪些区域为剪裁区域，并且还能够直观的感受到剪裁图片与边框的组合效果。此外，在进行图片的剪裁时，是根据遮罩的剪裁图片预览窗口进行剪裁的，并且剪裁图片预览窗口是与边框的内边框相匹配的，那么剪裁得到的剪裁图片同样是与内边框相匹配的，也就是说待处理图片的剪裁是依据内边框进行设计的，那么剪裁图片的尺寸和形状都需要与内边框相匹配，例如内边框为三角形时，剪裁图片同样为三角形，且剪裁图片的尺寸与内边框相适配，进而可以很好的与边框进行融合，融合得到的边框图片的视觉效果也更佳。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。

图1为现有技术中一种添加边框的示意图；

图2为现有技术中另一种添加边框的示意图；

图3为现有技术中边框图片的效果示意图；

图4为现有技术中填充白色的边框图片的效果示意图；

图5为本申请实施例提供的应用场景示意图；

图6为本申请实施例提供的图片处理方法的流程示意图；

图7为本申请实施例提供的发布动态的操作示意图；

图8为本申请实施例提供的手账日志功能的操作示意图；

图9为本申请实施例提供的图片编辑界面的显示示意图；

图10为本申请实施例提供的矩形边框的尺寸参数示意图；

图11为本申请实施例提供的圆形边框的尺寸参数示意图；

图12为本申请实施例提供的矩形边框对应的矩形遮罩的示意图；

图13为本申请实施例提供的圆形边框对应的遮罩的示意图；

图14为本申请实施例提供的图片处理区的图层示意图；

图15为本申请实施例提供的合成边框、遮罩以及待处理图片叠加显示后的效果示意图；

图16为本申请实施例提供的用户调整待处理图片前后对比示意图；

图17为本申请实施例提供的在日志撰写界面中显示目标边框图片的示意图；

图18为本申请实施例提供的叠加显示过程的流程示意图；

图19为本申请实施例提供的多种边框图片的显示效果示意图；

图20为本申请实施例提供的图片处理装置的一种结构示意图；

图21为本申请实施例提供的计算机设备的一种结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚明白，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互任意组合。并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

为便于理解本发明实施例提供的技术方案，这里先对本发明实施例使用的一些关键名词进行解释：

社交平台：可以理解为是个人的社交关系网络，社交平台可以包括社交网站或者社交应用(Application，APP)等形式，用户可以在社交平台上申请自己的社交账户，并且可以与其他社交账户建立社交关系。在社交平台上，用户可以通过自己的社交账户发布个人状态信息，同时也可以访问其他社交用户的个人主页，进而基于其他用户的个人主页浏览其他用户发布的个人状态信息，并且可以对其他用户发表的个人状态信息进行评论，即，对于一个用户而言，其在社交平台中的角色可以是访问者，也可以是被访问者。

个人主页：个人主页中仅用于展示一个用户的个人信息，例如用户A的个人主页中仅包括与用户A相关的内容，例如用户A的头像、昵称或者个人简介等，或者，还可以在用户A的个人主页中发布个人状态视频或者手账日志等信息。

手帐日志：一种仿照实物记事本，并迁移至终端中的日志形式，在手帐日志中，除了可以包含大量的文字，还可以添加大量的装饰贴图，以丰富手帐日志的内容，增加手帐日志的可观赏性和趣味性。

边框：为图片添加的包围边框，增加图片的可观赏性和趣味性等。边框可以包括规则形状边框，一般是指矩形边框，以及不规则形状边框，一般是指非矩形边框。

遮罩：遮罩用于在进行图片剪裁时，便于用户区分被剪裁图片的剪除区域和保留区域，被遮罩覆盖的区域一般为剪除区域，被遮罩包围的区域一般为保留区域，即最终得到的剪裁图片。

边框图片：本申请实施例中设计的边框图片一般是指包含边框的图片，也就是图片剪裁后与边框进行融合的图片。

canvas：canvas是第五代超文本标记语言(Hyper Text Markup Language 5，HTML5)中新增的一个HTML5元素，canvas有一个基于JavaScript的绘图应用程序编程接口(Application Programming Interface，API)，可以实现在网页中完成动态的2D与3D图像绘制技术。

base64图片：一种使用二进制编码的方式来替代图片链接的方式，换句话说，在网页上看到的图片通常是使用图片链接向服务器发出请求下载而来的，那么就需要消耗一个超文本传输协议(Hyper Text Transfer Protocol，http)请求来进行图片的下载，而图片的base64编码则是将一张图片数据编码成一串字符串，可以随着HTML的下载同时下载到本地，使用该字符串代替图像地址，无需再次向服务器发送请求下载图片，对该字符串进行解码后同样可以呈现该图片，同样，对于图片的保存亦可以采用base64编码方式，即对要保存的图片通过base64编码之后得到的字符串保存到本地，通过解码字符串即可呈现图片。

另外，本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，在不做特别说明的情况下，一般表示前后关联对象是一种“或”的关系。

目前，通常需要对图片进行一定剪裁，但是，由于现有方案中边框格式较为单一，一般都是为图片添加形轮廓较为规则的矩形边框，因此现有的图片剪裁均是针对矩形边框设计的，并且由于矩形边框形状简单，可以较为简单的进行图片剪裁，从而基于现有方案剪裁的图片和矩形边框的形状和尺寸能够较为吻合，最终获得的边框图片中图片和边框的契合度较高，而对于轮廓形状不规则的边框，现有针对矩形边框的剪裁方式无法适用，从而无法为图片添加轮廓形状不规则的边框，即使强行为图片添加轮廓形状不规则的边框，所得到的边框图片的视觉效果也不佳。

现有技术中为图片添加边框的过程主要存在以下几个问题：

(1)如图1所示，无法显示遮罩效果，使得用户对于保留区域和剪除区域的区分不明显。其中，位于边框内部的图片区域一般为保留区域，即需要与边框合成为新的图片的区域，边框之外的图片区域为剪除区域，可以看到，由于图1所示的剪裁过程并没有遮罩，使得剪裁区域很容易对用户产生干扰，使得用户最终得到不满意的剪裁图片，使得用户对于图片剪裁过程的体验不佳。

(2)如图2所示，针对非手账日志类型的边框添加，由于目的一般为生成单张图片，无需考虑将生成后的带边框图片再叠加在日志画布上展示，所以仅支持常规规则边框，如图1所示边框的外轮廓均为规则的矩形，边框格式较为单一。

(3)由于现有的边框一般为规则的边框，因此现有图片的剪裁方案一般是基于规则边框设计的，通常是直接根据边框外轮廓尺寸剪裁图片，对于外形轮廓不规则的边框，则会造成剪裁的图片可能会比边框的外轮廓大，如图3所示，呈现的效果为边框留白区域会被剪裁的图片占据，图片超出边框区域，不仅视觉效果不佳，并且边框图片无法很好的与手账背景相融合。现有针对该种情况的一种解决方式是边框留白区域填充白色以覆盖图片，如图4所示，填充白色之后，仅可以看到边框之内的图片，但是通过这种方式得到的边框图片白色区域可能会覆盖手账中的其他内容，同样使得边框图片无法很好的与手账背景相融合。

本发明人对现有技术进行分析后发现，现有技术中主要是针对规则形状边框设计的剪裁方案，一般是简单的根据矩形边框的外边框进行剪裁的，所剪裁得到的图片一般为矩形，无法与外轮廓不规则的边框很好的融合，因此，要想解决这个问题，那么需要改变固定矩形剪裁的思维，而针对不同形状的边框进行不同的剪裁。

鉴于上述的分析和考虑，本发明实施例提供一种图片处理方法，在该方法中，可以将边框、遮罩以及待处理图片叠加显示，被遮罩覆盖的待处理图片区域为待剪除区域，位于剪裁图片预览窗口中的区域为剪裁图片的预览区域，因此通过遮罩的剪裁图片预览窗口，用户可以很明显的能够区分出图片哪些区域为保留区域，哪些区域为剪裁区域，并且还能够直观的感受到剪裁图片与边框的组合效果。此外，在进行图片的剪裁时，是根据遮罩的剪裁图片预览窗口进行剪裁的，并且剪裁图片预览窗口是与边框的内边框相匹配的，那么剪裁得到的剪裁图片同样是与内边框相匹配的，也就是说待处理图片的剪裁是依据内边框进行设计的，那么剪裁图片的尺寸和形状都需要与内边框相匹配，例如内边框为三角形时，剪裁图片同样为三角形，且剪裁图片的尺寸与内边框相适配，进而可以很好的与边框进行融合，融合得到的边框图片的视觉效果也更佳。

本申请实施例中，将用户操作之后的待剪裁图片，例如放大或者移动之后的图片，通过本地存储编码方式存储在本地，在进行图片的剪裁时，则可以直接从本地加载待剪裁图片进行剪裁，避免将待剪裁图片上传到后台服务器，又再次请求后台服务器下载待剪裁图片后，再对待剪裁图片进行剪裁，减少与后台服务器的网络交互时间。

本申请实施例中，各个边框素材的命名中携带了该边框的尺寸参数数据，后续在需要使用尺寸参数数据时，可以直接从命名中获取，无需再单独发起网络请求来获取尺寸参数数据，同样减少了与后台服务器的网络交互时间。

在介绍完本发明实施例的设计思想之后，下面对本发明实施例的技术方案能够适用的应用场景做一些简单介绍，需要说明的是，以下介绍的应用场景仅用于说明本发明实施例而非限定。在具体实施过程中，可以根据实际需要灵活地应用本发明实施例提供的技术方案。

请参见图5所示，为本发明实施例中的技术方案能够适用的一种应用场景，在该场景中，可以包括M个终端设备101以及服务器102，M个终端设备101即图5中所示的终端设备101～1至终端设备101～M，M为正整数，M的值本发明实施例并不进行限制。

终端设备101可以是手机、个人电脑(personal computer，PC)、平板电脑(PAD)、掌上电脑(Personal Digital Assistant，PDA)、笔记本电脑或者智能穿戴式设备(例如智能手表和智能手环)等终端设备。终端设备101中可以安装包括为图片添加边框功能的应用程序，例如该应用程序可以是图片美化应用、手账日志应用，或者，该应用程序还可以为社交平台应用，社交平台应用可以包括需要增加图片的功能，例如用户在社交平台中发布动态，或者发表日志时，均可以在动态中或者日志中添加图片，那么既可以添加边框图片，进而可以使用到为图片添加边框功能，或者，应用程序还可以为浏览器应用，在浏览器中，可以打开图片美化、手帐日志或者社交平台的网站，进行实现与图片美化应用、手账日志应用或者社交平台应用相同的功能。

终端101可以包括一个或多个处理器1011、存储器1012、与服务器102交互的I/O接口1013以及显示面板1014等。其中，终端101的存储器1012中可以存储上述包括为图片添加边框功能的应用程序的程序指令，这些程序指令被处理器1011执行时能够用以实现应用程序的功能，以及在显示面板1014显示该应用程序的相应显示页面。

服务器102可以为包括为图片添加边框功能的应用程序或者应用程序对应网站的后台服务器。服务器102可以包括一个或多个处理器1021、存储器1022以及与终端设备交互的I/O接口1023等。此外，服务器102还可以配置数据库1024，数据库1024可以用于存储各用户边框素材以及用户上传的边框图片等信息。

终端设备101与服务器102之间可以通过一个或者多个网络103进行通信连接。该网络103可以是有线网络，也可以是无线网络，例如无线网络可以是移动蜂窝网络，或者可以是无线保真(WIreless-Fidelity，WIFI)网络，当然还可以是其他可能的网络，本发明实施例对此不做限制。

示例性的，当应用程序为社交平台应用时，用户可以通过社交平台发布日志，在用户撰写日志时，用户可以选择添加图片，并且可以选择为图片添加边框，以增加日志的整体美观程度，那么在用户为图片添加边框时，则可以利用本申请实施例提供的图片处理方法对为图片添加相应的边框，并在得到边框图片之后，将边框图片插入到日志的相应位置，在用户的添加边框的过程中，或者撰写日志的过程中，则可以与服务器102进行交互，以保存当前的编辑进度，并在日志撰写完成后，将日志上传服务器102，服务器102则会将该日志推送给相应的社交平台账号，以使得相应用户得以查看到该日志。

当然，本发明实施例提供的方法并不限用于图5所示的应用场景中，还可以用于其他可能的应用场景，本发明实施例并不进行限制。对于图5所示的应用场景的各个设备所能实现的功能将在后续的方法实施例中一并进行描述，在此先不过多赘述。

为进一步说明本发明实施例提供的技术方案，下面结合附图以及具体实施方式对此进行详细的说明。虽然本发明实施例提供了如下述实施例或附图所示的方法操作步骤，但基于常规或者无需创造性的劳动在所述方法中可以包括更多或者更少的操作步骤。在逻辑上不存在必要因果关系的步骤中，这些步骤的执行顺序不限于本发明实施例提供的执行顺序。所述方法在实际的处理过程中或者装置执行时，可以按照实施例或者附图所示的方法顺序执行或者并行执行。

请参见图6，为本发明实施例提供的图片处理方法的流程示意图，该方法例如可以应用于如图5所示的场景中，该方法的流程描述如下。

步骤601：响应针对显示界面包括的图片获取按钮进行的操作，获取待处理图片。

本申请实施例中，显示界面是指终端设备中应用程序的显示界面，该应用程序可以包括为图片添加边框的功能。以该应用程序为社交平台应用为例，社交平台可以包括手账日志功能或者发布动态功能，发布的手账日志或者动态均可以携带边框图片。

示例性的，以发布动态为例，如图7所示，为发布动态的操作示意图。图7中左侧图为用户的个人主页示意图，在个人主页中，可以包括个人信息显示区域和功能显示区域，个人信息显示区域用于显示用户的头像、昵称以及主页背景等个人信息，功能显示区域主要用于显示社交平台提供的一些功能，例如动态、日志或者相册等功能，如动态图标对应位置显示的数值“1234”则为用户发布的动态数量。在用户想要发布新的动态时，则可以对“动态”图标进行操作，当然，图7所示的“动态”图标仅为动态页面的一种入口，在社交平台的其他页面，同样可以有类似于图7所示的“动态”图标这样的动态页面的入口。

在用户对“动态”图标进行操作之后，终端设备中的应用程序则可以相应的接收到用户的操作，并对其进行响应，跳转至动态页面，如图7中中间图所示，动态页面可以包括动态撰写区域和已发布动态显示区域，其中，在动态撰写区域中用户可以撰写新的动态，已发布动态显示区域可以查看到用户以往发布的动态。其中，用户进行动态撰写时，则可以选择添加图片，那么用户可以对动态撰写区域中的图片获取按钮进行操作，以获取待处理图片。

用户对图片获取按钮进行操作之后，终端设备中的应用程序则可以相应的接收到用户对图片获取按钮的操作，并对其进行响应，调用图片采集控件采集待处理图片，从而获取图片采集控件采集的待处理图片。

具体的，图片采集控件可以包括如下控件中的一种或者多种的组合：

本地图片拍摄控件；或者，

本地图片上传控件；或者，

从网络获取图片的控件。

当应用程序可以利用多种图片采集控件进行图片采集时，用户可以选择自己想要的图片采集控件对应的图片采集方式。如图7右侧图所示，当用户对图片获取按钮进行操作之后，则可以跳转至图片采集方式选择界面，用户可对自己想要的图片采集方式对应按钮进行操作，相应的，终端可以采集到用户的操作，并提供给应用程序，进而应用程序可以接收到用户在图片采集方式选择界面输入的操作对应的图片采集方式确认指示，并进行响应，调用图片采集方式确认指示对应的图片采集控件采集待处理图片。其中，图片采集方式选择页面中包括“拍摄”按钮、“本地相册选取”按钮以及“网络选取”按钮，当然，图7所示的图片采集方式选择界面仅仅为一种可能的显示页面，在实体实施过程中，还可以针对具体需求对页面中的内容进行合理的设置，本发明实施例中对此并不进行限制。

“拍摄”按钮对应于拍摄新的图片作为待处理图片，当用户对“拍摄”按钮进行操作后，则会调用相应的本地图片拍摄控件进行待处理图片的拍摄。

“本地相册选取”按钮对应于从本地相册中选择已经拍摄好的图片作为待处理图片，当用户对“本地相册选取”按钮进行操作后，则会调用本地图片上传控件为用户显示图片选择页面，并在图片选择页面中显示本地已存储的图片，用户进行选择后，则可以将用户选择的图片作为待处理图片。

“网络选取”按钮对应于从网络中选择图片作为待处理图片，当用户对“网络选取”按钮进行操作后，则会调用从网络获取图片的控件为用户显示图片选择页面，并在图片选择页面中显示网络中图片，用户进行选择后，则可以将用户选择的图片作为待处理图片；或者，显示图片链接输入页面，用户输入图片链接后，则可以将基于该链接下载的图片作为待处理图片。

示例性的，以手账日志功能为例，如图8所示，为手账日志功能的操作示意图。如图8中所示的个人主页，在功能显示区域可以包括日志图标，在用户想要发布新的手帐日志时，则可以对“日志”图标进行操作，同理，图8所示的“日志”图标仅为日志页面的一种入口，在社交平台的其他页面，同样可以有类似于图8所示的“日志”图标这样的日志页面的入口。

在用户对“日志”图标进行操作之后，终端设备中的应用程序则可以相应的接收到用户的操作，并对其进行响应，跳转至日志页面，如图8中日志页面所示，可以包括“写日志”和“写手帐”两选择按钮，“写日志”按钮对应于撰写普通日志，“写手帐”按钮对应撰写手帐日志，相较于普通日志，手帐日志可以添加图片或者贴纸等多种元素，内容更为丰富，此外，在日志页面上还可以呈现用户以往发布的日志。当用户想要撰写手帐日志时，用户可以对“写手帐”按钮进行操作，相应的，应用程序对该操作进行响应之后，则可以跳转至手帐模板选择页面，手帐模板选择页面可以显示多种可供用户选择的手帐模板，用户选择自己想要的手帐模板，则可以进入手帐编辑界面。在手帐编辑界面中，用户可以添加多种手帐元素，例如可以包括手帐背景、图片、文字以及贴纸等，相对应的设置有手帐背景获取按钮、图片获取按钮、添加文字按钮以及贴纸选择按钮。

用户对手帐编辑界面中的图片获取按钮进行操作之后，终端设备中的应用程序则可以相应的接收到用户对图片获取按钮的操作，并对其进行响应，调用图片采集控件采集待处理图片，从而获取图片采集控件采集的待处理图片。相对应的，当应用程序利用多种图片采集控件进行图片采集时，用户可以选择自己想要的图片采集控件对应的图片采集方式。如图8所示，用户对图片获取按钮进行操作之后，则可以跳转至图片采集方式选择界面，用户可对自己想要的图片采集方式对应按钮进行操作，相应的，终端可以采集到用户的操作，并提供给应用程序，进而应用程序可以接收到用户在图片采集方式选择界面输入的操作对应的图片采集方式确认指示，并进行响应，调用图片采集方式确认指示对应的图片采集控件采集待处理图片。例如，用户选择“本地相册选取”选取方式之后，则可以跳转到图片选择页面，用户可从中选取想要添加的图片，来作为待处理图片。

在具体实施时，应用程序进行的每一次页面跳转均包含了应用程序与其后台服务器的至少一次交互，例如应用程序需要向后台服务器发送页面请求，后台服务器将页面数据提供给应用程序，应用程序基于页面数据进行跳转后的页面显示。

步骤602：将当前显示界面切换到图片编辑界面，并在图片编辑界面中显示待处理图片。

本申请实施例中，用户选择好待处理图片之后，可以通过图片选择页面中的确认按钮进行确认操作，这样，终端设备可以检测到用户进行了确认操作，相应的，应用程序同样可以通过终端设备知晓用户进行了确认操作，那么应用程序则会跳转至图片编辑界面，并在图片编辑界面中显示待处理图片。

在具体应用时，用户选择的待处理图片可以是一张，也可以是多张，本申请实施例对此不做限制。

具体的，如图9所示，为图片编辑界面的显示示意图。其中，图片编辑界面中包括图片处理区，由于图片处理区与待处理图片的尺寸可能并不完全一致，因此，在图片处理区中需要适应性的显示待处理图片。

例如，当图片处理区的尺寸大于待处理图片的尺寸，即图片处理区的宽和高均大于待处理图片的宽和高时，待处理图片能够在图片处理区中完整显示，且未能将待处理图片填充完整；或者，当图片处理区的尺寸小于待处理图片的尺寸，即图片处理区的宽和高均小于待处理图片的尺寸，或者其中一项大于待处理图片时，则可以根据图片处理区的尺寸显示待处理图片的部分区域，或者，还可以根据待处理图片的尺寸和图片处理区的尺寸，对待处理图像的尺寸进行调整，以使得调整后的待处理图片能够在图片处理区中完整显示，图9中具体以此为例。

示例性的，针对于图片处理区的尺寸小于待处理图片的尺寸的情况，当待处理图片的宽高比例值大于或者等于图片处理区的宽高比例值时，一般待处理图片为宽型图片，那么要想在图片处理区完整的显示待处理图片，通常需要对待处理图片的高度值进行调整，再将调整后的待处理图片在图片处理区中进行显示。调整后的待处理图片的尺寸如下：

其中，L′_a为待处理图片的原始宽度值，H′_a为待处理图片的原始高度值，L_a为调整后的待处理图片的宽度值，H_a为调整后的待处理图片的高度值，L_b为图片处理区的宽度值，H_b为图片处理区的高度值。

当待处理图片的高宽比例值大于或者等于图片处理区的高宽比例值时，一般待处理图片为高型图片，那么要想在图片处理区完整的显示待处理图片，通常需要对待处理图片的宽度值进行调整，则调整后的待处理图片的尺寸如下：

在实际应用中，当图片处理区的尺寸大于待处理图片的尺寸时，除了可以按照待处理图片的原始尺寸进行显示之外，同样可以对待处理图片的原始尺寸进行调整，使得待处理图片的至少一对同向边与图片处理区边缘重合，当然，实际可以根据具体需求进行设置，本申请实施例对此不做限制。

具体的，在确定了待处理图片在图片处理区中的显示尺寸之后，还需要确定待处理图片在图片处理区中的位置，一般而言，为了方便后续剪裁时的定位，通常可以将待处理图片在图片处理区居中显示。具体而言，在进行居中显示时，待处理图片的位置如下：

其中，△H_图片为待处理图片顶部与图片处理区顶部之间的距离，或者为待处理图片底部与图片处理区底部之间的距离，△L_图片为待处理图片左侧边与图片处理区左边缘之间的距离，或者为待处理图片右侧边与图片处理区右边缘之间的距离。

当然，待处理图片也可以在图片处理区中居中显示，例如可以在任意位置显示，或者左对齐显示等，本申请实施例对此不做限制。

本申请实施例中，图9中仅示出了一个图片处理区，在实际应用时，还可以包括多个图片处理区，每个图片处理区可以用于一张或者多张待处理图片的处理，本申请实施例对此不做限制。

步骤603：获取待处理图片的待合成边框。

本申请实施例中，用户选择待处理图片之后，由于用户还未选择边框，因此图片处理区中可以不显示边框和遮罩效果，图9具体以此为例，当然，也可以是显示默认的边框和遮罩效果，本申请实施例对此不做限制。

具体的，用户可以在待选边框显示区域中查看边框，并针对自身心仪的边框进行选择操作，相应的，应用程序可以获取到用户进行的选择操作，并进行响应，以获取待合成边框以及待合成边框的尺寸参数数据。其中，边框的尺寸参数数据包括与边框的形状相对应类型的尺寸参数，也就是说，边框的尺寸参数是根据边框的形状进行设计的，不同形状的边框对应的尺寸参数的类型可能是不同的。

如图10所示，图10为矩形边框的尺寸参数示意图。其中，矩形边框的尺寸参数可以包括外边框尺寸、内边框尺寸以及内边框在边框中的位置参数，外边框尺寸是指边框的最边缘围成的矩形框的尺寸，即图10中所示的外边框宽度值w和外边框高度值h；内边框尺寸是指边框内容纳剪裁图片的区域的尺寸，即图10中所示的内边框宽度值x和内边框高度值y；内边框在边框中的位置参数可以通过位于内边框上的基准点与外边框之间的距离来表示，如图10中所示，基准点为内边框的左上角顶点，那么内边框在边框中的位置参数即为左上角顶点与外边框的顶边之间的距离b和左上角顶点与外边框的左侧边之间的距离a。当然，基准点还可以为内边框上的其他可能的点，本申请实施例对此不做限制。

如图11所示，图11为圆形边框的尺寸参数示意图。其中圆形边框的尺寸参数也可以包括外边框尺寸、内边框尺寸以及内边框在边框中的位置参数，外边框尺寸是指边框的最边缘围成的矩形框的尺寸，即图11中所示的外边框宽度值w和外边框高度值h；但是，内边框尺寸是指边框内容纳剪裁图片的区域的尺寸，由于圆形边框的内边框为圆形，那么可以通过圆的半径或者直径来表示，如图10中所示为内边框的直径n；内边框在边框中的位置参数可以通过基准点与外边框之间的距离来表示，如图10中所示，基准点为内边框的外切矩形的左上角顶点，那么内边框在边框中的位置参数即为左上角顶点与外边框的顶边之间的距离b和左上角顶点与外边框的左侧边之间的距离a。当然，基准点还可以为其他可能的点，例如圆心或者内切矩形的顶点等，本申请实施例对此不做限制。

需要声明的是，这里所指的内边框并不是指边框的内边缘，而是指边框内容纳剪裁图片的区域，一般而言，内边框都会比内边缘的尺寸稍大一些，但不会超出边框的外边缘，如图10和图11所示的内边框，均位于边框的内边缘和外边缘之间。

当然，针对于其他形状的边框，也可以根据边框的特性进行参数的设计，例如三角形的内边框可以通过其中两条边的边长以及与水平线或者垂直线的夹角进行限定等，本申请实施例对此不做限制。

本申请实施例中，为了节省应用程序再次向后台服务器请求获取边框的尺寸参数数据的网络交互时间，在边框命名中采用指定的命名格式携带边框的尺寸参数数据，那么，在获取待合成边框之后，则可以从待合成边框的边框命名中获取待合成边框的尺寸参数数据。例如，边框命名中各参数可以通过“_”分隔，每个参数以“参数名_参数值”形式进行表示。

示例性的，如图10所示的矩形边框的命名可以为：

BK001_w＝612_h＝534_x＝53＝_y＝380_a＝71_b＝112.png

其中，“BK001”为边框的标识，“w＝612_h＝534_x＝53＝_y＝380_a＝71_b＝112”为矩形边框的尺寸参数的具体值，“png”为边框的格式。

如图11所示的圆形边框的命名可以为：

BK002_w＝574_h＝574_n＝530_a＝35_b＝24.png

其中，“BK002”为边框的标识，“w＝574_h＝574_n＝530_a＝35_b＝24”为圆形边框的尺寸参数的具体值，“png”为边框的格式。

具体的，用户选择待合成边框之后，应用程序可以从后台服务器请求获取待合成边框，也可以是预先下载好了边框素材，那么从终端设备中存储的边框素材中获取待合成边框即可。其中，边框的资源文件可以部署在内容分发网络(Content Delivery Network，CDN)设备上，且获取资源文件访问的域名可以部署在了与当前页面相同的域名上，这样，相比将获取资源文件访问的域名部署在非同域名，而需要通过跨域头加载资源的方式，同域请求的速度会更快。例如在应用程序为QQ，且在QQ应用中的QQ空间页面上进行添加边框的操作，QQ空间的域名为“h5.qzone.qq.com”时，那么边框资源文件的域名也可以部署在“h5.qzone.qq.com”上。

步骤604：获取具有剪裁图片预览窗口的遮罩。

本申请实施例中，为了便于用户区分待处理图片的保留区域和待剪除区域，为待处理图片增加了遮罩，被遮罩覆盖的待处理图片的区域为待剪除区域，剪裁图片预览窗口为剪裁图片的预览区域，也就是说，位于剪裁图片预览窗口的的待处理图片的区域即为待处理图片的保留区域，经剪裁后，保留区域则作为剪裁图片。其中，遮罩的外沿周边至少延伸到待处理图片的周边，例如，可以延伸至待处理图片的周边，还可以延伸至图片处理区的周边，本申请实施例对此不做限制。

具体的，剪裁图片预览窗口与待合成边框的内边框是相匹配的，因而在生成遮罩时，可以根据待合成边框的内边框的形状和尺寸来确定遮罩剪裁图片预览窗口。其中，相匹配是指剪裁图片预览窗口的形状与待合成边框的内边框的形状相匹配，以及剪裁图片预览窗口的尺寸与待合成边框的内边框的尺寸相匹配。一般而言，剪裁图片预览窗口的形状与待合成边框的内边框的形状是相同的，且剪裁图片预览窗口的尺寸与待合成边框的内边框的尺寸也是相同的。当然，针对不同的需求，也可以将裁图片预览窗口的尺寸与待合成边框的内边框的尺寸设置的不同，例如裁图片预览窗口的尺寸可以稍大于待合成边框的内边框的尺寸。

遮罩可以是根据用户选择的待合成边框适应性生成的，针对不同类型的待合成边框，确定遮罩的过程是不同的，类型的区分主要在于矩形边框和非矩形边框的区分。其中，可以根据待合成边框的尺寸参数数据确定待合成边框的类型，例如当尺寸参数数据中携带“x”和“y”参数时，则表明待合成边框为矩形边框，或者，当当尺寸参数数据中携带“n”参数时，则表明待合成边框为圆形边框。

具体的，当待合成边框为矩形边框时，待合成边框对应的遮罩为矩形遮罩，且遮罩内剪裁图片预览窗口的尺寸参数数据可以根据矩形边框的内边框的尺寸参数数据来确定。如图12所示，为矩形边框对应的矩形遮罩的示意图，其中，剪裁图片预览窗口的宽度值即为矩形边框的内边框的宽度值x，剪裁图片预览窗口的高度值即为矩形边框的内边框的高度值y，剪裁图片预览窗口的左上角顶点与矩形边框的外边框的顶边之间的距离为b，剪裁图片预览窗口的左上角顶点与矩形边框的外边框的左侧边之间的距离为a。

具体的，当待合成边框为非矩形边框时，待合成边框对应的遮罩包括矩形遮罩和非矩形遮罩两部分，矩形遮罩的内沿和非矩形遮罩的外沿重合，且剪裁图片预览窗口为非矩形遮罩的内沿包围的区域，且矩形遮罩和非矩形遮罩的尺寸参数数据也可以根据矩形边框的内边框的尺寸参数数据来确定。如图13所示，为圆形边框对应的遮罩的示意图，其中，圆形边框对应的遮罩包括两部分，即图13所示的矩形遮罩和非矩形遮罩，矩形遮罩的内沿即为圆形边框的内边框的外切矩形，内沿的每一边长为圆形边框的内边框的直径n，非矩形遮罩的外沿为圆形边框的内边框的外切矩形，也就是说，矩形遮罩的内沿和非矩形遮罩的外沿是重合的，非矩形遮罩的内沿即为圆形边框的内边框，需要声明的是，图13中为方便区分矩形遮罩和非矩形遮罩，使用不同灰度值进行表示，但是在实际应用中，矩形遮罩和非矩形遮罩的颜色和灰度值等均是相同的，在用户看来，矩形遮罩和非矩形遮罩是一个完整的遮罩，并无明显区分。

对于其他非矩形边框，均是与圆形边框类似，遮罩均由矩形遮罩和非矩形遮罩两部分构成，因此，对于其他非矩形边框可参照上述圆形边框部分的描述，对此不再过多赘述。

步骤605：将待合成边框、遮罩以及待处理图片叠加显示。

本申请实施例中，在用户选择边框之后，为了方便用户预览边框图片的效果，会将待合成边框、遮罩以及待处理图片进行叠加显示。叠加显示是指在指定区域中同时显示待合成边框、遮罩以及待处理图片，并且同时显示时，待合成边框、遮罩以及待处理图片之间存在一定的显示顺序，例如待合成边框通常需要显示在遮罩的上一层，遮罩则通常需要显示在待处理图片的上一层，从而实现待合成边框覆盖遮罩，遮罩覆盖待处理图片的效果，最终方便用户最终合成的预览边框图片的效果。具体的，可以在图片编辑界面中的图片处理区中将待合成边框、遮罩以及待处理图片进行叠加显示。

如图14所示，为图片处理区的图层示意图，其中，图片处理区可以包括边框图层、遮罩图层和图片图层，分别用于显示待合成边框、遮罩与待处理图片，三个图层的顺序如图14所示，边框图层置顶，遮罩图层位于边框图层与图片图层之间，图片图层位于最底层。

其中，待处理图片的显示在上述过程中已经介绍，在此不过多赘述，下面针对待合成边框和遮罩的显示进行介绍。由于图片处理区与待合成边框和遮罩的尺寸可能并不完全一致，因此，在图片处理区中需要适应性的显示待合成边框和遮罩。具体而言，可以根据待合成边框的尺寸参数数据以及预设缩放比例，调整待合成边框的尺寸，以及根据遮罩的尺寸参数数据以及预设缩放比例，调整遮罩的尺寸，再将调整后的待合成边框以及调整后的遮罩按照设定顺序叠加显示在待处理图片上。其中，预设缩放比例是基于图片处理区的尺寸以及边框设计基准值确定的，设定顺序例如可以为如图14所示的顺序。

在实际应用时，相较图片处理区而言，边框的尺寸都会较大，当然，也不排除边框尺寸小于图片处理区的情况，当边框尺寸小于图片处理区时，则可以直接在图片处理区中显示，或者将边框放大以铺满图片处理区显示。

针对于边框尺寸大于图片处理区的情况，通常需要将边框进行缩小。由于一般而言，边框都为宽图或者正方形图，因此比较关注于宽度方向的缩小，因此而下面以宽度缩小为例，对待合成边框的显示进行介绍，而对于高度较大的边框实质上原理也是相同的，因而可以参考一下描述，后续不再过多赘述。

具体的，图像处理区的宽度值是已定的，例如终端设备为手机时，图片处理区的宽度一般为屏幕宽度，而当终端设备为笔记本电脑或者个人计算机等设备时，图片处理区的宽度则不是屏幕宽度，但是一般而言宽度值是已设计好的，因此，可以根据图像处理区的尺寸确定边框和遮罩的缩小比例，缩小比例如下：

scale＝L_b/L₀

其中，scale为缩小比例，L_b为图像处理区的宽度值，L₀为边框设计基准值，边框设计基准值一般为固定值，例如可以为750，当然，也可以为其他可能的值，本申请实施例对此不做限制。

那么相对应的，需要对待合成边框进行调整，即整体进行缩小之后再图片处理区中进行显示。调整后的待合成边框的尺寸如下：

其中，w′_边框为调整后的待合成边框的宽度值，h′_边框为调整后的待合成边框的高度值，w_边框为待合成边框的原始宽度值，h_边框为待合成边框的原始高度值。

同理，遮罩也需要进行调整，以矩形边框的遮罩为例，调整后的遮罩的尺寸如下：

其中，x′_遮罩为调整后的遮罩的剪裁图片预览窗口的宽度值，y′_遮罩为调整后的遮罩的剪裁图片预览窗口的高度值，x_遮罩为遮罩的剪裁图片预览窗口的原始宽度值，y_遮罩为遮罩的剪裁图片预览窗口的原始高度值。

具体的，在确定了待合成边框和遮罩在图片处理区中的显示尺寸之后，还需要确定待合成边框和遮罩在图片处理区中的位置，一般而言，为了方便后续剪裁时的定位，通常可以将待合成边框和遮罩在图片处理区居中显示。具体而言，在进行居中显示时，待合成边框的位置如下：

其中，△H_边框为待合成边框的外边框顶边与图片处理区顶部之间的距离，或者为待合成边框的外边框底边与图片处理区底部之间的距离，△L_边框为待合成边框的外边框左侧边与图片处理区左边缘之间的距离，或者为待合成边框的外边框右侧边与图片处理区右边缘之间的距离。

同理，在进行居中显示时，以矩形边框的遮罩为例，遮罩的位置如下：

其中，△H_遮罩为遮罩的剪裁图片预览窗口顶边与图片处理区顶部之间的距离，或者为遮罩的剪裁图片预览窗口底边与图片处理区底部之间的距离，△L_遮罩为遮罩的剪裁图片预览窗口左侧边与图片处理区左边缘之间的距离，或者为遮罩的剪裁图片预览窗口右侧边与图片处理区右边缘之间的距离。

当然，待合成边框和遮罩也可以在图片处理区中不进行居中显示，例如可以在任意位置显示，或者左对齐显示等，本申请实施例对此不做限制。

如图15所示，为待合成边框、遮罩以及待处理图片叠加显示后的效果示意图。其中，被遮罩覆盖的待处理图片区域为待剪除区域，位于剪裁图片预览窗口中的区域为剪裁图片的预览区域，通过遮罩将待剪除区域覆盖，用户可以很直观的感受到剪裁图片和边框结合的边框图片的效果，方便用户进行图片的裁剪。

步骤606：将待处理图片中待剪除区域剪除，获得剪裁图片。

本申请实施例中，待合成边框、遮罩以及待处理图片叠加显示后，待处理图片位于遮罩的剪裁图片预览窗口中的部分是可以调整的，用户可以对待处理图片进行图片调整操作，以调整待处理图片在图片处理区中的尺寸和/或位置，从而调整待处理图片于预览区域中的显示部分，当预览区域中的剪裁图片和边框结合的边框图片达到用户想要的效果时，用户则可以对图片编辑界面中的剪裁操作按钮进行操作，以确定进行剪裁，应用程序接收到该操作对应的指示时，则会响应用户针对剪裁操作按钮进行的操作，将图片处理区中当前显示的待剪裁图片中除被所述剪裁图片预览窗口包围的部分之外的其余部分剪除，获得剪裁图片。

其中，图片调整操作例如可以为放大操作、移动操作或者旋转操作等。

当然，在实际应用时，除可以对图片进行调整操作之外，也可以对待合成边框进行调整操作，相对应的，遮罩会随着待合成边框的调整而变化。

具体的，在进行图片剪裁时，是针对用户调整之后的图片进行剪裁，也就是将图片处理区中当前显示的图片作为待剪裁图片。如图16所示，用户对待处理图片进行放大操作，图片处理区中仅显示了待处理图片的部分区域，那么后续在进行剪裁时，是将图片处理区显示的部分区域作为待剪裁图片进行的。

本申请实施例中，在用户确认进行剪裁之后，可以调用图片剪裁工具进行图片的剪裁，其中图片剪裁工具例如可以是canvas、webGL或者SVG等工具。具体以canvas为例，可以通过canvas导出用户调整操作后的图片图层，也就是待剪裁图片，存储至本地存储空间，也就是通过canvas将待剪裁图片采用设定的本地存储编码方式对待剪裁图片进行编码，并将编码后的待剪裁图片存储至本地存储空间。其中，设定的本地存储编码方式例如可以为base64编码方式，相应的，则可以获得一个图片base64字符串。这样，在后续需要使用待剪裁图片时，则可以直接加载编码字符串即可，相较于将剪裁图片上传至后台服务器，再从后台服务器请求待剪裁图片的方案，可以节省与后台服务器的网络交互时间。

导出待剪裁图片之后，则会根据边框的类型进行形状剪裁。具体的，可以通过canvas根据待合成边框的尺寸参数数据创建图片剪裁图层，并从本地存储空间中加载编码后的待剪裁图片至图片剪裁图层中，进而将位于图片剪裁图层区域之外的部分剪除，以得到剪裁图片，这里主要是根据待合成边框的内边框参数进行图层的创建，使得剪裁图片与内边框更契合。其中，根据遮罩的尺寸参数数据创建图片剪裁图层，可以是创建与待合成边框的尺寸参数数据相同的图层。在生成图片剪裁图层时，可以直接从边框命名中获取尺寸参数数据，不需要再单独发起网络请求来获取宽高，同样节省与后台服务器的网络交互时间。当然，由于遮罩的尺寸参数数据已计算得到，也可以根据遮罩的尺寸参数数据创建图片剪裁图层。

获得剪裁图片后，同样可以采用本地存储编码方式对剪裁图片进行编码，并将编码得到的编码字符串存储至本地存储空间，例如可以采用base64编码方式对剪裁图片进行编码，得到剪裁图片的base64字符串。

步骤607：将剪裁图片与待合成边框进行融合，以得到目标边框图片。

本申请实施例中，获取剪裁图片之后，则可以将剪裁图片与待合成边框进行融合，以将剪裁图片与待合成边框合成一张图片，从而得到目标边框图片。

沿用上述通过canvas进行剪裁的例子，获取剪裁图片之后，则可以将根据剪裁图片的编码字符串，以及待合成边框的链接，在相同的图层中依次绘制剪裁图片与待合成边框，以得到目标边框图片。

在具体应用中，在得到目标边框图片之后，则可以将目标边框图片应用于其他用途，例如发布动态时，可以将目标边框图片作为待发布图片显示在动态撰写区域，或者，在撰写日志时，则可以将目标边框图片插入日志中，如图17所示，为在日志撰写界面中显示目标边框图片的示意图。其中，插入的目标边框图片中边框附近可以显示透底效果，不会对目标边框图片底部的其他内容产生遮挡

下面以一具体的例子对边框、遮罩和图片叠加显示的过程进行介绍，请参见图18所示，为叠加显示过程的流程示意图。

步骤1801：获取待处理图片。

步骤1802：判断待处理图片的宽高比例是否大于或者等于传图片处理区的宽高比例。

步骤1803：若步骤1802的判断结果为是，则根据待处理图片的原始宽度值与图片处理区的宽度值自适应居中显示待处理图片。

步骤1804：若步骤1802的判断结果为否，则根据待处理图片的原始高度值与图片处理区的高度值自适应居中显示待处理图片。

步骤1805：获取待合成边框和待合成边框的尺寸参数数据。

步骤1806：根据待合成边框的w和h参数以及缩放比例scale计算待合成边框的外边框在图片处理区中的宽高。

待合成边框居中显示时，计算得到外边框在图片处理区中的宽高后，可以根据外边框在图片处理区中的宽高与图片处理区的宽高定位外边框在图片处理区中的位置。

步骤1807：根据待合成边框的a和b参数以及缩放比例scale对待合成边框的内边框进行定位。

步骤1808：根据待合成边框的a、b和内边框参数以及缩放比例scale计算遮罩的剪裁图片预览窗口的宽高，以及剪裁图片预览窗口的各边与图片裁剪区之间的距离。

当待合成边框为非矩形边框时，步骤1808计算得到的为矩形遮罩的尺寸和定位。

步骤1809：判断待合成边框是否为矩形边框。

步骤1810：若步骤1809的判断结果为否，则在遮罩层添加非矩形遮罩。

步骤1811：在图片处理区中叠加显示待合成边框、遮罩和待处理图片。

若步骤1809的判断结果为是，则直接基于计算的尺寸展示待合成边框和尺寸，若步骤1809的判断结果为是，则在展示时，还会将非矩形遮罩一通进行展示。

本申请实施例的图片处理方法，可以应用多种应用程序中，例如可以应用于包括手帐日志功能的应用程序，并且手帐日志编辑页面或者图片编辑页面可以采用H5技术，实现的手帐日志添加边框功能，有效的减少安装包大小，占用更少内存，对用户下载安装体验更为友好。

综上所述，通过本申请实施例的图片处理方法，可以支持用户添加各种形状的边框，如图19所示，为本申请实施例的提供多种边框图片的显示效果示意图，可以看到，除了方形边框和圆形边框，还可以支持心形边框和星形边框等能够在canvas等绘图工具中内被绘制的封闭不规则图形，满足用户的多种需求。并且，最终生成的边框图片中，除边框和剪裁图片部分，其他像素为透明，呈现透底效果，即叠加在其他页面中可直接透显底部图层的内容，图片背景不会遮挡手账原有文字或其他贴图元素，手帐背景能够完美融合，提升边框的美观度，方便用户对手账进行多图层装饰。此外，还支持用户单步同时完成裁剪和添加边框，即用户确认剪裁之后，则可以直接生成目标边框图片，提升用户操作的便捷度。

请参见图20，基于同一发明构思，本申请实施例还提供了一种图片处理装置200，该装置包括：

边框获取单元2001，用于获取待处理图片的待合成边框；

遮罩获取单元2002，用于用于获取具有剪裁图片预览窗口的遮罩，遮罩的外沿周边至少延伸到待处理图片的周边，且剪裁图片预览窗口是根据待合成边框的内边框的形状和尺寸确定的；

叠加显示单元2003，用于用于将待合成边框、遮罩以及待处理图片叠加显示，其中，被遮罩覆盖的待处理图片的区域为待剪除区域；

剪裁单元2004，用于将待处理图片中待剪除区域剪除，获得剪裁图片；

图片融合单元2005，用于将剪裁图片与待合成边框进行融合，以得到目标边框图片。

可选的，边框获取单元2001，具体用于：

响应针对图片编辑界面显示的边框进行的选择操作，获取待合成边框以及待合成边框的尺寸参数数据，其中，尺寸参数数据包括与待合成边框的形状相对应类型的尺寸参数。

可选的，边框获取单元2001，具体用于：

获取待合成边框以及待合成边框的边框命名，边框命名采用指定的命名格式携带待合成边框的尺寸参数数据；

从边框命名中获取待合成边框的尺寸参数数据。

可选的，遮罩获取单元2002，具体用于：

根据待合成边框的尺寸参数数据确定待合成边框的边框类型，边框类型包括矩形边框和非矩形边框；

在确定待合成边框为矩形边框时，确定遮罩为矩形遮罩，并根据矩形边框的内边框的尺寸参数数据，确定剪裁图片预览窗口的尺寸参数数据；或者，

在确定待合成边框为非矩形边框时，确定遮罩包括矩形遮罩和非矩形遮罩，并分别根据非矩形边框的内边框的尺寸参数数据，确定矩形遮罩和非矩形遮罩的尺寸参数数据，其中，矩形遮罩的内沿和非矩形遮罩的外沿重合，且剪裁图片预览窗口为非矩形遮罩的内沿包围的区域。

可选的，该装置还包括图片获取单元2006，用于：

响应针对显示界面包括的图片获取按钮进行的操作，获取待处理图片；

叠加显示单元，还用于将当前显示界面切换到图片编辑界面，并在图片编辑界面中显示待处理图片。

可选的，图片获取单元2006，具体用于：

调用图片采集控件采集待处理图片；

获取图片采集控件采集的待处理图片。

可选的，图片获取单元2006，具体用于：

显示图片采集方式选择界面；

接收通过图片采集方式选择界面输入的图片采集方式确认指示；

调用图片采集方式确认指示对应的图片采集控件采集待处理图片。

可选的，图片采集控件包括：

本地图片拍摄控件；或者，

本地图片上传控件；或者，

从网络获取图片的控件。

可选的，叠加显示单元2003，具体用于：

根据待处理图片的尺寸和图片处理区的尺寸，对待处理图像的尺寸进行调整，以使得调整后的待处理图片能够在图片处理区中完整显示；其中，图片编辑界面包括图片处理区；

将调整后的待处理图片在图片处理区中进行显示。

可选的，叠加显示单元2003，具体用于：

根据待合成边框的尺寸参数数据以及预设缩放比例，调整待合成边框的尺寸；其中，预设缩放比例是基于图片处理区的尺寸以及边框设计基准值确定的；以及,

根据遮罩的尺寸参数数据以及预设缩放比例，调整遮罩的尺寸；

将调整后的待合成边框以及调整后的遮罩按照设定顺序叠加显示在待处理图片上。

可选的，调整后的待合成边框、调整后的遮罩以及待处理图片在图片处理区中均居中显示。

可选的，位于剪裁图片预览窗口中的区域为剪裁图片的预览区域，装置还包括调整单元2007，用于：

响应通过图片编辑界面输入的图片调整操作，以调整待处理图片于预览区域中的显示部分；

剪裁单元，具体用于：响应针对图片编辑界面的剪裁操作按钮进行的操作，将图片处理区中当前显示的待剪裁图片的待剪除区域剪除，获得剪裁图片。

可选的，剪裁单元2004，具体用于：

采用设定的本地存储编码方式对待剪裁图片进行编码，并将编码后的待剪裁图片存储至本地存储空间；

根据待合成边框的尺寸参数数据创建图片剪裁图层，并从本地存储空间中加载编码后的待剪裁图片至图片剪裁图层中；

将位于图片剪裁图层区域之外的部分剪除，以得到剪裁图片。

可选的，图片融合单元2005，具体用于：

根据剪裁图片的编码字符串，以及待合成边框的链接，在相同的图层中依次绘制剪裁图片与待合成边框，以得到目标边框图片。

该装置可以用于执行图5～图18所示的实施例中涉及的方法，因此，对于该装置的各功能模块所能够实现的功能等可参考图5～图18所示的实施例的描述，不多赘述。其中，图片获取单元2006和调整单元2007并非必选的功能单元，因此在图20中以虚线示出。

请参见图21，基于同一技术构思，本申请实施例还提供了一种计算机设备210，可以包括存储器2101和处理器2102。

所述存储器2101，用于存储处理器2102执行的计算机程序。存储器2101可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据计算机设备的使用所创建的数据等。处理器2102，可以是一个中央处理单元(central processing unit，CPU)，或者为数字处理单元等等。本申请实施例中不限定上述存储器2101和处理器2102之间的具体连接介质。本申请实施例在图21中以存储器2101和处理器2102之间通过总线2103连接，总线2103在图21中以粗线表示，其它部件之间的连接方式，仅是进行示意性说明，并不引以为限。所述总线2103可以分为地址总线、数据总线、控制总线等。为便于表示，图21中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

存储器2101可以是易失性存储器(volatile memory)，例如随机存取存储器(random-access memory，RAM)；存储器2101也可以是非易失性存储器(non-volatilememory)，例如只读存储器，快闪存储器(flash memory)，硬盘(hard disk drive，HDD)或固态硬盘(solid-state drive，SSD)、或者存储器2101是能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。存储器2101可以是上述存储器的组合。

处理器2102，用于调用所述存储器2101中存储的计算机程序时执行如图5～图18中所示的实施例涉及的方法。

在一些可能的实施方式中，本申请提供的方法的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在计算机设备上运行时，所述程序代码用于使所述计算机设备执行本说明书上述描述的根据本申请各种示例性实施方式的方法中的步骤，例如，所述计算机设备可以执行如图5～图18中所示的实施例涉及的方法。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

尽管已描述了本申请的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims (15)

1.一种图片处理方法，其特征在于，所述方法包括：

获取为待处理图片选定的待合成边框；

根据所述待合成边框的尺寸参数数据确定所述待合成边框的边框类型；

在确定所述待合成边框为非矩形边框时，分别根据所述非矩形边框的内边框的尺寸参数数据，确定矩形遮罩和非矩形遮罩的尺寸参数数据，以获得包括所述矩形遮罩和所述非矩形遮罩的遮罩；其中，所述内边框为所述待合成边框内容纳剪裁图片的区域，所述矩形遮罩的外沿周边至少延伸到所述待处理图片的周边，所述矩形遮罩的内沿和所述非矩形遮罩的外沿重合，且所述非矩形遮罩的内沿包围的区域为剪裁图片预览窗口；

将所述待合成边框、所述遮罩以及所述待处理图片叠加显示，其中，被所述遮罩覆盖的待处理图片的区域为待剪除区域；

将待处理图片中所述待剪除区域剪除，获得剪裁图片；

将所述剪裁图片与所述待合成边框进行融合，以得到目标边框图片。

2.如权利要求1所述的方法，其特征在于，所述获取待处理图片的待合成边框，包括：

响应针对图片编辑界面显示的边框进行的选择操作，获取所述待合成边框以及所述待合成边框的尺寸参数数据，其中，所述尺寸参数数据包括与所述待合成边框的形状相对应类型的尺寸参数。

3.如权利要求2所述的方法，其特征在于，获取所述待合成边框以及所述待合成边框的尺寸参数数据，包括：

获取所述待合成边框以及所述待合成边框的边框命名，所述边框命名采用指定的命名格式携带所述待合成边框的尺寸参数数据；

从所述边框命名中获取所述待合成边框的尺寸参数数据。

4.如权利要求1所述的方法，其特征在于，在根据所述待合成边框的尺寸参数数据确定所述待合成边框的边框类型之后，所述方法还包括：

在确定所述待合成边框为矩形边框时，确定所述遮罩为矩形遮罩，并根据所述矩形边框的内边框的尺寸参数数据，确定所述剪裁图片预览窗口的尺寸参数数据。

5.如权利要求1所述的方法，其特征在于，在获取待处理图片的待合成边框之前，所述方法包括：

响应针对显示界面包括的图片获取按钮进行的操作，获取所述待处理图片；

将当前显示界面切换到图片编辑界面，并在所述图片编辑界面中显示所述待处理图片。

6.如权利要求1所述的方法，其特征在于，所述获取所述待处理图片，包括：

调用图片采集控件采集待处理图片；

获取所述图片采集控件采集的待处理图片。

7.如权利要求6所述的方法，其特征在于，所述调用图片采集控件采集待处理图片，包括：

显示图片采集方式选择界面；

接收通过所述图片采集方式选择界面输入的图片采集方式确认指示；

调用图片采集方式确认指示对应的图片采集控件采集待处理图片。

8.如权利要求7所述的方法，其特征在于，所述图片采集控件包括：

本地图片拍摄控件；或者，

本地图片上传控件；或者，

从网络获取图片的控件。

9.如权利要求5所述的方法，其特征在于，图片编辑界面包括图片处理区，则在所述图片编辑界面中显示所述待处理图片，包括：

根据所述待处理图片的尺寸和所述图片处理区的尺寸，对所述待处理图像的尺寸进行调整，以使得调整后的待处理图片能够在所述图片处理区中完整显示；

将调整后的待处理图片在所述图片处理区中进行显示。

10.如权利要求1～9任一所述的方法，其特征在于，将所述待合成边框、所述遮罩以及所述待处理图片叠加显示，包括：

根据所述待合成边框的尺寸参数数据以及预设缩放比例，调整所述待合成边框的尺寸；其中，所述预设缩放比例是基于图片处理区的尺寸以及边框设计基准值确定的；以及,

根据所述遮罩的尺寸参数数据以及所述预设缩放比例，调整所述遮罩的尺寸；

将调整后的待合成边框以及调整后的遮罩按照设定顺序叠加显示在所述待处理图片上。

11.如权利要求10所述的方法，其特征在于，所述调整后的待合成边框、调整后的遮罩以及所述待处理图片在所述图片处理区中均居中显示。

12.如权利要求1～9任一所述的方法，其特征在于，位于所述剪裁图片预览窗口中的区域为剪裁图片的预览区域，则在所述将待处理图片中所述待剪除区域剪除，获得剪裁图片之前，所述方法还包括：

响应通过图片编辑界面输入的图片调整操作，以调整所述待处理图片于所述预览区域中的显示部分；

则所述将待处理图片中所述待剪除区域剪除，获得剪裁图片，包括：

响应针对所述图片编辑界面的剪裁操作按钮进行的操作，将所述图片处理区中当前显示的待剪裁图片的待剪除区域剪除，获得所述剪裁图片。

13.如权利要求12所述的方法，其特征在于，所述将待处理图片中所述待剪除区域剪除，获得剪裁图片，包括：

采用设定的本地存储编码方式对所述待剪裁图片进行编码，并将编码后的待剪裁图片存储至本地存储空间；

根据所述待合成边框的尺寸参数数据创建图片剪裁图层，并从所述本地存储空间中加载编码后的待剪裁图片至所述图片剪裁图层中；

将位于所述图片剪裁图层区域之外的部分剪除，以得到所述剪裁图片。

14.如权利要求13所述的方法，其特征在于，将所述剪裁图片与所述待合成边框进行融合，以得到目标边框图片，包括：

根据所述剪裁图片的编码字符串，以及所述待合成边框的链接，在相同的图层中依次绘制所述剪裁图片与所述待合成边框，以得到所述目标边框图片。

15.一种图片处理装置，其特征在于，所述装置包括：

边框获取单元，用于获取为待处理图片选定的待合成边框；

遮罩获取单元，用于根据所述待合成边框的尺寸参数数据确定所述待合成边框的边框类型；在确定所述待合成边框为非矩形边框时，分别根据所述非矩形边框的内边框的尺寸参数数据，确定矩形遮罩和非矩形遮罩的尺寸参数数据，以获得包括所述矩形遮罩和所述非矩形遮罩的遮罩；其中，所述内边框为所述待合成边框内容纳剪裁图片的区域，所述矩形遮罩的外沿周边至少延伸到所述待处理图片的周边，且所述剪裁图片预览窗口是根据所述待合成边框的内边框的形状和尺寸确定的，所述矩形遮罩的内沿和所述非矩形遮罩的外沿重合，且所述非矩形遮罩的内沿包围的区域为剪裁图片预览窗口；

叠加显示单元，用于将所述待合成边框、所述遮罩以及所述待处理图片叠加显示，其中，被所述遮罩覆盖的待处理图片的区域为待剪除区域；

剪裁单元，用于将待处理图片中所述待剪除区域剪除，获得剪裁图片；

图片融合单元，用于将所述剪裁图片与所述待合成边框进行融合，以得到目标边框图片。

Images