CN110955477B - 图像自定义方法、装置、设备及存储介质 - Google Patents

图像自定义方法、装置、设备及存储介质 Download PDF

Info

Publication number
CN110955477B
CN110955477B CN201910975676.5A CN201910975676A CN110955477B CN 110955477 B CN110955477 B CN 110955477B CN 201910975676 A CN201910975676 A CN 201910975676A CN 110955477 B CN110955477 B CN 110955477B
Authority
CN
China
Prior art keywords
image
preset
processed
calling
spliced
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
Application number
CN201910975676.5A
Other languages
English (en)
Other versions
CN110955477A (zh
Inventor
易晓霆
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ping An Property and Casualty Insurance Company of China Ltd
Original Assignee
Ping An Property and Casualty Insurance Company of China Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Ping An Property and Casualty Insurance Company of China Ltd filed Critical Ping An Property and Casualty Insurance Company of China Ltd
Priority to CN201910975676.5A priority Critical patent/CN110955477B/zh
Publication of CN110955477A publication Critical patent/CN110955477A/zh
Application granted granted Critical
Publication of CN110955477B publication Critical patent/CN110955477B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Abstract

本发明涉及图像处理领域，公开一种图像自定义方法、装置、设备及存储介质，该方法包括：将待处理图像添加至HTML5页面的图像调整区域；监听图像调整区域触发的点击事件并调用图像绘制标签对待处理图像进行调整获得基准图像；将基准图像展示至HTML5页面的元素组合区域；在接收到元素添加指令时，根据该指令对基准图像进行图像元素添加获得待拼接图像；获取待拼接图像中各图像元素的位置信息，根据位置信息调用预设图像绘制标签对待拼接图像进行绘制获得目标图像。由于是通过HTML5页面进行图像自定义从而使得用户无需单独下载图像处理App，节省了网络流量，也避免了不同App不兼容导致用户自定义的图像无法正常显示的问题。

Description

图像自定义方法、装置、设备及存储介质
技术领域
本发明涉及图像处理技术领域，尤其涉及一种图像自定义方法、装置、设备及存储介质。
背景技术
随着智能手机、平板电脑等移动设备的普及，人们对个性化页面交互的要求越来越高，多样化，个性化的个人定制理念逐渐深入人心。在众多的社交场合，人们渴望将自己的个性展示给他人，例如将拍摄的图片进行合成来展示自己的动态，通过给自己的微信头像+V来展示自己社交账号等级等。而现阶段，用户在实现上述需求时，往往需要先下载实现该功能的应用程序(Application，App)然后再进行图像的自定义，一方面用户需要花费大量的网络流量去下载App，另一方面用户在不同的App上分享自定义图像时，App之间的兼容性也会导致用户自定义的图像无法正常显示。
上述内容仅用于辅助理解本发明的技术方案，并不代表承认上述内容是现有技术。
发明内容
本发明的主要目的在于提供了一种图像自定义方法、装置、设备及存储介质，旨在解决现有技术在用户进行图像自定义时面临的流量耗费以及图像无法正常显示的技术问题。
为实现上述目的，本发明提供了一种图像自定义方法，所述方法包括以下步骤：
获取待处理图像，将所述待处理图像添加至预设HTML5页面的图像调整区域；
监听基于所述图像调整区域触发的点击事件，根据所述点击事件调用预设图像绘制标签对所述待处理图像进行调整，以获得基准图像；
将所述基准图像展示至所述预设HTML5页面的元素组合区域；
在接收到基于所述元素组合区域输入的元素添加指令时，根据所述元素添加指令对所述基准图像进行图像元素添加，获得待拼接图像；
获取所述待拼接图像中各图像元素的位置信息，根据所述位置信息调用所述预设图像绘制标签对所述待拼接图像进行绘制，获得目标图像。
优选地，所述获取待处理图像，将所述待处理图像添加至预设HTML5页面的图像调整区域的步骤，包括：
获取待处理图像，调用预置JavaScript脚本读取所述待处理图像对应的可交换图像文件格式数据；
根据所述可交换图像文件格式数据确定所述待处理图像在预设HTML5页面上的图像方向；
检测所述图像方向是否满足预设方向条件，若满足则将所述待处理图片添加至所述预设HTML5页面的图像调整区域。
优选地，所述获取待处理图像，调用预置JavaScript脚本读取所述待处理图像对应的可交换图像文件格式数据的步骤，包括：
获取待处理图像，通过预置JavaScript脚本调用预设文件读取对象按字节读取所述待处理图像的可交换图像文件格式数据；
所述根据所述可交换图像文件格式数据确定所述待处理图像在预设HTML5页面上的图像方向的步骤，包括：
将读取的所述可交换图像文件格式数据放入数据缓存对象；
调用数据视图对象从所述数据缓存对象中读取对应的图片方向字节；
根据所述图片方向字节确定所述待处理图像在预设HTML5页面上的图像方向。
优选地，所述监听基于所述图像调整区域触发的点击事件，根据所述点击事件调用预设图像绘制标签对所述待处理图像进行调整，以获得基准图像的步骤，包括：
监听基于所述图像调整区域触发的点击事件，获取所述点击事件对应的图像调整参数；
根据所述图像调整参数调用预设图像绘制标签对所述待处理图像进行调整，获得待绘制图像；
通过所述预设图像绘制标签对所述待绘制图像进行绘制，并将绘制后的图像转换为预设编码格式的基准图像。
优选地，所述图像调整参数包括图像偏移量和图像缩放比例；
所述根据所述图像调整参数调用预设图像绘制标签对所述待处理图像进行调整，获得待绘制图像的步骤，包括：
根据所述图像偏移量和所述图像缩放比例确定所述待处理图像对应的截图宽高比；
根据所述截图宽高比调用预设图像绘制标签对所述待处理图像进行图像截取，获得待绘制图像。
优选地，所述获取所述待拼接图像中各图像元素的位置信息，根据所述位置信息调用所述预设图像绘制标签对所述待拼接图像进行绘制，获得目标图像的步骤，包括：
获取所述待拼接图像中各图像元素的位置信息，所述位置信息包括位置坐标，旋转角度以及缩放比例；
根据所述位置信息对所述待拼接图像的预设图像属性进赋值，获得赋值后的目标图像属性；
根据所述目标图像属性调用所述预设图像绘制标签对所述待拼接图像进行绘制，获得目标图像。
优选地，所述根据所述目标图像属性调用所述预设图像绘制标签对所述待拼接图像进行绘制，获得目标图像的步骤，包括：
读取所述目标图像属性对应的属性值，根据所述属性值构建属性矩阵；
按所述属性矩阵对canvas画布进行矩阵变换，并对矩阵变换后的canvas画布进行中心点设置，以获得目标canvas画布；
调用所述预设图像绘制标签在所述目标canvas画布中对所述待拼接图像进行绘制，获得目标图像。
此外，为实现上述目的，本发明还提出一种图像自定义装置，所述装置包括：
图像截取模块，用于获取待处理图像，将所述待处理图像添加至预设HTML5页面的图像调整区域；
图像调整模块，用于监听基于所述图像调整区域触发的点击事件，根据所述点击事件调用预设图像绘制标签对所述待处理图像进行调整，以获得基准图像；
元素组合模块，用于将所述基准图像展示至所述预设HTML5页面的元素组合区域；
元素拼接模块，用于在接收到基于所述元素组合区域输入的元素添加指令时，根据所述元素添加指令对所述基准图像进行图像元素添加，获得待拼接图像；
图像绘制模块，用于获取所述待拼接图像中各图像元素的位置信息，根据所述位置信息调用所述预设图像绘制标签对所述待拼接图像进行绘制，获得目标图像。
此外，为实现上述目的，本发明还提出一种图像自定义设备，所述设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的图像自定义程序，所述图像自定义程序配置为实现如上文所述的图像自定义方法的步骤。
此外，为实现上述目的，本发明还提出一种存储介质，所述存储介质上存储有图像自定义程序，所述图像自定义程序被处理器执行时实现如上文所述的图像自定义方法的步骤。
本发明通过获取待处理图像，将待处理图像添加至预设HTML5页面的图像调整区域；监听基于图像调整区域触发的点击事件，根据点击事件调用预设图像绘制标签对待处理图像进行调整获得基准图像；将基准图像展示至预设HTML5页面的元素组合区域；在接收到元素添加指令时，根据元素添加指令对基准图像进行图像元素添加获得待拼接图像；获取待拼接图像中各图像元素的位置信息，根据位置信息调用预设图像绘制标签对待拼接图像进行绘制获得目标图像。本发明通过HTML5页面进行图像自定义使得用户无需单独下载图像处理App节省了网络流量，也避免了不同App不兼容导致用户自定义的图像无法正常显示问题。
附图说明
图1是本发明实施例方案涉及的硬件运行环境的图像自定义设备的结构示意图；
图2为本发明图像自定义方法第一实施例的流程示意图；
图3为本发明图像自定义方法第二实施例的流程示意图；
图4为本发明图像自定义方法第三实施例的流程示意图；
图5为本发明图像自定义装置第一实施例的结构框图。
本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。
参照图1，图1为本发明实施例方案涉及的硬件运行环境的图像自定义设备结构示意图。
如图1所示，该图像自定义设备可以包括：处理器1001，例如中央处理器(CentralProcessing Unit，CPU)，通信总线1002、用户接口1003，网络接口1004，存储器1005。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)、输入单元比如键盘(Keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如无线保真(WIreless-FIdelity，WI-FI)接口)。存储器1005可以是高速的随机存取存储器(RandomAccess Memory，RAM)存储器，也可以是稳定的非易失性存储器(Non-Volatile Memory，NVM)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。
本领域技术人员可以理解，图1中示出的结构并不构成对图像自定义设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。
如图1所示，作为一种存储介质的存储器1005中可以包括操作系统、数据存储模块、网络通信模块、用户接口模块以及图像自定义程序。
在图1所示的图像自定义设备中，网络接口1004主要用于与网络服务器进行数据通信；用户接口1003主要用于与用户进行数据交互；本发明图像自定义设备中的处理器1001、存储器1005可以设置在图像自定义设备中，所述图像自定义设备通过处理器1001调用存储器1005中存储的图像自定义程序，并执行本发明实施例提供的图像自定义方法。
本发明实施例提供了一种图像自定义方法，参照图2，图2为本发明图像自定义方法第一实施例的流程示意图。
本实施例中，所述图像自定义方法包括以下步骤：
步骤S10：获取待处理图像，将所述待处理图像添加至预设HTML5页面的图像调整区域；
需要说明的是，本实施例方法的执行主体可以是具有图像数据处理、网络通信以及程序运行功能的客户端应用程序(即App)，也可以是装载有该App的图像处理设备，例如智能手机、平板电脑、个人电脑等。
本步骤中，所述待处理图像可以是用户使用具有图像自定义功能的App中集成的input标签上传的图像，或者是调用上述图像处理设备上集成的摄像头拍摄的图像。所述预设HTML5页面即采用第五代超文本标记语言(Hyper Text Markup Language5，HTML5)编写的界面或页面。所述图像调整区域可以是用来进行图像的平移、旋转、缩放以及截取的页面区域。
本实施例通过将待处理的图像显示在App对应的HTML5页面上供用户进行图像自定义，能够避免用户单独下载专用的图像处理App，既简化了用户操作，也为用户节省了网络流量。
在具体实现中，客户端在获取到用户上传的待处理图像时，即可将待处理图像添加至预设HTML5页面的图像调整区域。
步骤S20：监听基于所述图像调整区域触发的点击事件，根据所述点击事件调用预设图像绘制标签对所述待处理图像进行调整，以获得基准图像；
应理解的是，Canvas为HTML5新添加的标签，可以理解为画布。用户可利用Canvas标签相关的应用程序编程接口来绘画包含线条、形状、字符等元素的图像，也可以对画布进行旋转，缩放和平移等操作。
可理解的是，为对用户在进行图像绘制时的操作进行捕捉，本实施例中客户端可调用预先设置的JavaScript脚本来监听canvas画布中用户触发的touchStart，touchMove，touchEnd等点击事件，然后根据这些点击事件对待处理图像进行旋转、缩放或平移从而获得基准图像。本实施例中所述基准图像为进行图像元素添加前的图像。另外，为了防止不期望的绘制效果，例如用户将待处理图像移出canvas画布的图像绘制区域，本实施例需要预先设置图像缩放和移动的边界条件。
在具体实现中，客户端可通过预置JavaScript脚本来对图像调整区域中用户触发的点击事件进行监听并记录监听结果，然后根据记录的监听结果调用预设图像绘制标签(canvas标签)对待处理图像进行旋转、缩放或平移等调整，获得基准图像。
步骤S30：将所述基准图像展示至所述预设HTML5页面的元素组合区域；
需要说明的是，所述元素组合区域可以是为用户提供图像元素个性化设定的区域。在该区域中用户可以根据自身喜好进行图像元素的选取和添加。所述元素组合区域包含有html div标签+img标签。其中，div标签是一种网页结构标签，是用来进行网页布局的一种HTML标签；而img标签则通常用来在网页页面中嵌入图像。
在具体实现中，客户端在获取到基准图像后，即可将基准图像展示至预设HTML5页面的元素组合区域。
步骤S40：在接收到基于所述元素组合区域输入的元素添加指令时，根据所述元素添加指令对所述基准图像进行图像元素添加，获得待拼接图像；
可理解的是，所述元素添加指令可以是用户基于元素组合区域输入的图像元素(如贴纸、图标、文字等)的选取命令，本实施例中这些元素选取命令包括但不限于对图像元素进行拖拽、缩放、旋转等。用户在元素组合区域通过点击需要添加的图像元素，客户端即在文档对象模型(dom)中增加对应img标签来展示这些元素图像。
在具体实现中，客户端可根据用户选取的图像元素对基准图像进行元素添加以及调整，在调整结束时将该时刻HTML页面上展示的dom元素所呈现的图像作为所述待拼接图像，该待拼接图像并非真正意义上的图像，而是由需要进行组合的“零散”图像标签构成的“图像”，因此还需要对该待拼接图像进行拼接或组合。
步骤S50：获取所述待拼接图像中各图像元素的位置信息，根据所述位置信息调用所述预设图像绘制标签对所述待拼接图像进行绘制，获得目标图像。
需要说明的是，本实施例中所述位置信息包括但不限于图像元素的位置坐标，旋转角度以及缩放比例等信息，且这些位置信息都必须符合预先设置的边界条件。
应理解的是，本实施例通过canvas标签进行图像绘制时需要根据待组合的图像元素的层叠样式表3级(Cascading Style Sheets Level 3，css3)transform属性对应的属性值来构建矩阵(matrix)实现。
具体的，客户端可获取待拼接图像中各图像元素的位置信息，然后根据所述位置信息对所述待拼接图像的预设图像属性(即所述css3 transform属性)进赋值，获得赋值后的目标图像属性；再根据所述目标图像属性调用所述预设图像绘制标签(canvas标签)对所述待拼接图像进行绘制，获得目标图像。
进一步地，为提高图像绘制效率，本实施例在绘制待组合的图像元素时，客户端将读取所述目标图像属性对应的属性值，根据所述属性值构建属性矩阵；然后使用CanvassetTransform()方法按所述属性矩阵对canvas画布进行矩阵变换；而由于图像在拖动时的旋转中心是图像中心点，其和canvas画布的旋转中心为左上角顶点不同，此时客户端还需要将canvsa画布旋转点设置为按图像中心点旋转，因此在进行矩阵变换后还需要通过translate方法对矩阵变换后的canvas画布进行中心点设置以获得目标canvas画布；最后调用所述预设图像绘制标签使用drawImage方法在所述目标canvas画布中对所述待拼接图像进行绘制，获得目标图像。
进一步地，客户端在将基准图像和图像元素绘制在一个canvas画布上获得上述目标图像后，还将使用canvas标签的toDataURL()方法将目标图像转成base64图片编码格式的最终图像。base64是最常见的用于传输8比特(Bit)字节码的编码方式之一。
本实施例通过获取待处理图像，将待处理图像添加至预设HTML5页面的图像调整区域；监听基于图像调整区域触发的点击事件，根据点击事件调用预设图像绘制标签对待处理图像进行调整获得基准图像；将基准图像展示至预设HTML5页面的元素组合区域；在接收到元素添加指令时，根据元素添加指令对基准图像进行图像元素添加获得待拼接图像；获取待拼接图像中各图像元素的位置信息，根据位置信息调用预设图像绘制标签对待拼接图像进行绘制获得目标图像。本实施例通过HTML5页面进行图像自定义使得用户无需单独下载图像处理App节省了网络流量，也避免了不同App不兼容导致用户自定义的图像无法正常显示问题。
参考图3，图3为本发明图像自定义方法第二实施例的流程示意图。
基于上述第一实施例，在本实施例中，所述步骤S10包括：
步骤S101：获取待处理图像，调用预置JavaScript脚本读取所述待处理图像对应的可交换图像文件格式数据；
应理解的是，可交换图像文件格式(Exchangeable image file format，Exif)是专门为数码相机的照片设定的，可以用来记录数码照片的属性信息和拍摄数据。Exif数据是由数码相机在拍摄过程中采集的一系列信息，这些信息可以放置在常见的JPEG/TIFF/RAW(三种常见的图像文件格式)文件的头部，也就是说Exif信息是镶嵌在JPEG/TIFF/RAW图像文件格式内的一组拍摄参数，包括图像宽度、高度、角度、拍摄日期、拍摄参数和GPS定位数据等信息。
本实施例中所述图片方向可以由Exif数据中对应的方向(orientation)值来确定，以终端正常使用状态下人机交互界面对应的方向为正常显示方向，图像在人机交互界面中的显示方向与正常显示方向之间的旋转角度与orientation值之间的对应关系见下表1，表1为方向(orientation)值与旋转角度之间的对应关系表。
表1方向(orientation)值与旋转角度之间的对应关系表
orientation值 旋转角度
1 0°
3 180°
6 顺时针90°
8 逆时针90°
由上述表1可知，当某一图像的orientation值为1时，表示图像正常显示；当某一图像的orientation值为3时，表示图像倒立显示。
本实施例中，客户端HTML5页面可通过JavaScript脚本调用文件读取对象(FileReader对象)的readAsArrayBuffer方法按字节读取图像的Exif数据，读取结果用数据缓存对象(ArrayBuffer对象)存放，然后使用数据视图对象(DataView对象)从ArrayBuffer对象中读取图像方向对应的字节(0x0112)，并返回处理后的图片方向结果(即上述orientation值)。
步骤S102：根据所述可交换图像文件格式数据确定所述待处理图像在预设HTML5页面上的图像方向；
在具体实现中，客户端可获取待处理图像，通过预置JavaScript脚本调用预设文件读取对象按字节读取所述待处理图像的可交换图像文件格式数据；然后将读取的所述可交换图像文件格式数据放入数据缓存对象；再调用数据视图对象从所述数据缓存对象中读取对应的图片方向字节；最后根据所述图片方向字节确定所述待处理图像在预设HTML5页面上的图像方向。
步骤S103：检测所述图像方向是否满足预设方向条件，若满足则将所述待处理图片添加至所述预设HTML5页面的图像调整区域。
应理解的是，所述预设方向条件即图像方向对应的orientation值为0，若orientation值不为0，则认定图像方向不满足预设方向条件，此时客户端需要根据图像当前的orientation值来对待处理图像进行旋转，使得旋转后的图像方向满足所述预设方向条件。
在具体实现中，若客户端检测到图像方向满足预设方向条件，则将所述待处理图片添加至所述预设HTML5页面的图像调整区域，进行后续的平移、缩放等处理。
本实施例通过获取待处理图像，调用预置JavaScript脚本读取待处理图像对应的可交换图像文件格式数据；然后根据可交换图像文件格式数据确定待处理图像在预设HTML5页面上的图像方向；再检测图像方向是否满足预设方向条件，若满足则将待处理图片添加至预设HTML5页面的图像调整区域，能够自动为用户将待处理图像正常显示，提高了用户的图像自定义体验。
参考图4，图4为本发明图像自定义方法第三实施例的流程示意图。
基于上述各实施例，在本实施例中，所述步骤S20可具体包括：
步骤S201：监听基于所述图像调整区域触发的点击事件，获取所述点击事件对应的图像调整参数；
应理解的是，所述点击事件可以是图像调整区域的canvas画布中用户触发的touchStart，touchMove，touchEnd等操作，所述图像调整参数包括图像偏移量和图像缩放比例。
在具体实现中，客户端可调用JavaScript脚本来监听canvas画布中用户触发的点击事件，根据点击事件中包含的触点对移动或缩放后画布偏移坐标和缩放比例进行计算和记录从而获得图像偏移量和图像缩放比例。
步骤S202：根据所述图像调整参数调用预设图像绘制标签对所述待处理图像进行调整，获得待绘制图像；
在具体实现中，客户端可调用canvas标签根据图像调整区域的区域大小，以及上述记录到的图像偏移量和图像缩放比例计算canvas画布中图像左上角坐标(x,y)和需截取的图像对应的宽高比，然后根据该宽高比和图像调整区域的高度或宽度中的任意一个数值确定图像截取框，再通过该图像截取框对待处理图像进行截取。
具体的，客户端可根据所述图像偏移量和所述图像缩放比例确定所述待处理图像对应的截图宽高比；然后根据所述截图宽高比调用预设图像绘制标签对所述待处理图像进行图像截取，获得待绘制图像。
步骤S203：通过所述预设图像绘制标签对所述待绘制图像进行绘制，并将绘制后的图像转换为预设编码格式的基准图像。
在具体实现中，客户端在截取到待绘制图像后，即可通过canvas标签的canvasdrawImage()方法对待绘制图像进行绘制，再通过canvas标签的toData URL()方法将图像转化为base64位编码的基准图像。
本实施例通过监听基于图像调整区域触发的点击事件，获取点击事件对应的图像调整参数；根据图像调整参数调用预设图像绘制标签对待处理图像进行调整获得待绘制图像；通过预设图像绘制标签对待绘制图像进行绘制，并将绘制后的图像转换为预设编码格式的基准图像，实现了对用户的点击操作进行快速响应，提高了图像自定义效率。
此外，本发明实施例还提出一种存储介质，所述存储介质上存储有图像自定义程序，所述图像自定义程序被处理器执行时实现如上文所述的图像自定义方法的步骤。
参照图5，图5为本发明图像自定义装置第一实施例的结构框图。
如图5所示，本发明实施例提出的图像自定义装置包括：
图像截取模块501，用于获取待处理图像，将所述待处理图像添加至预设HTML5页面的图像调整区域；
图像调整模块502，用于监听基于所述图像调整区域触发的点击事件，根据所述点击事件调用预设图像绘制标签对所述待处理图像进行调整，以获得基准图像；
元素组合模块503，用于将所述基准图像展示至所述预设HTML5页面的元素组合区域；
元素拼接模块504，用于在接收到基于所述元素组合区域输入的元素添加指令时，根据所述元素添加指令对所述基准图像进行图像元素添加，获得待拼接图像；
图像绘制模块505，用于获取所述待拼接图像中各图像元素的位置信息，根据所述位置信息调用所述预设图像绘制标签对所述待拼接图像进行绘制，获得目标图像。
本实施例通过获取待处理图像，将待处理图像添加至预设HTML5页面的图像调整区域；监听基于图像调整区域触发的点击事件，根据点击事件调用预设图像绘制标签对待处理图像进行调整获得基准图像；将基准图像展示至预设HTML5页面的元素组合区域；在接收到元素添加指令时，根据元素添加指令对基准图像进行图像元素添加获得待拼接图像；获取待拼接图像中各图像元素的位置信息，根据位置信息调用预设图像绘制标签对待拼接图像进行绘制获得目标图像。本实施例通过HTML5页面进行图像自定义使得用户无需单独下载图像处理App节省了网络流量，也避免了不同App不兼容导致用户自定义的图像无法正常显示问题。
基于本发明上述图像自定义装置第一实施例，提出本发明图像自定义装置的第二实施例。
在本实施例中，所述图像截取模块501，还用于获取待处理图像，调用预置JavaScript脚本读取所述待处理图像对应的可交换图像文件格式数据；根据所述可交换图像文件格式数据确定所述待处理图像在预设HTML5页面上的图像方向；检测所述图像方向是否满足预设方向条件，若满足则将所述待处理图片添加至所述预设HTML5页面的图像调整区域。
进一步地，所述图像截取模块501，还用于获取待处理图像，通过预置JavaScript脚本调用预设文件读取对象按字节读取所述待处理图像的可交换图像文件格式数据；将读取的所述可交换图像文件格式数据放入数据缓存对象；调用数据视图对象从所述数据缓存对象中读取对应的图片方向字节；根据所述图片方向字节确定所述待处理图像在预设HTML5页面上的图像方向。
在本实施例中，所述图像调整模块502，还用于监听基于所述图像调整区域触发的点击事件，获取所述点击事件对应的图像调整参数；根据所述图像调整参数调用预设图像绘制标签对所述待处理图像进行调整，获得待绘制图像；通过所述预设图像绘制标签对所述待绘制图像进行绘制，并将绘制后的图像转换为预设编码格式的基准图像。
进一步地，所述图像调整模块502，还用于根据图像偏移量和图像缩放比例确定所述待处理图像对应的截图宽高比；根据所述截图宽高比调用预设图像绘制标签对所述待处理图像进行图像截取，获得待绘制图像。
进一步地，所述图像绘制模块505，还用于获取所述待拼接图像中各图像元素的位置信息，所述位置信息包括位置坐标，旋转角度以及缩放比例；根据所述位置信息对所述待拼接图像的预设图像属性进赋值，获得赋值后的目标图像属性；根据所述目标图像属性调用所述预设图像绘制标签对所述待拼接图像进行绘制，获得目标图像。
进一步地，所述图像绘制模块505，还用于读取所述目标图像属性对应的属性值，根据所述属性值构建属性矩阵；按所述属性矩阵对canvas画布进行矩阵变换，并对矩阵变换后的canvas画布进行中心点设置，以获得目标canvas画布；调用所述预设图像绘制标签在所述目标canvas画布中对所述待拼接图像进行绘制，获得目标图像。
本发明图像自定义装置的其他实施例或具体实现方式可参照上述各方法实施例，此处不再赘述。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。
上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如只读存储器/随机存取存储器、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。
以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (8)

1.一种图像自定义方法，其特征在于，所述方法包括：
获取待处理图像，将所述待处理图像添加至预设HTML5页面的图像调整区域；
监听基于所述图像调整区域触发的点击事件，根据所述点击事件调用预设图像绘制标签对所述待处理图像进行调整，以获得基准图像，所述调整包括对所述待处理图像进行旋转、缩放和平移，并预先设置了图像缩放和移动的边界条件，以防止出现不期望的绘制效果；
将所述基准图像展示至所述预设HTML5页面的元素组合区域；
在接收到基于所述元素组合区域输入的元素添加指令时，根据所述元素添加指令对所述基准图像进行图像元素添加，获得待拼接图像；
获取所述待拼接图像中各图像元素的位置信息，根据所述位置信息调用所述预设图像绘制标签对所述待拼接图像进行绘制，获得目标图像；
所述获取所述待拼接图像中各图像元素的位置信息，根据所述位置信息调用所述预设图像绘制标签对所述待拼接图像进行绘制，获得目标图像的步骤，包括：
获取所述待拼接图像中各图像元素的位置信息，所述位置信息包括位置坐标，旋转角度以及缩放比例；
根据所述位置信息对所述待拼接图像的预设图像属性进赋值，获得赋值后的目标图像属性，所述预设图像属性为css3 transform属性；
读取所述目标图像属性对应的属性值，根据所述属性值构建属性矩阵；
使用CanvassetTransform()方法按所述属性矩阵对canvas画布进行矩阵变换；
通过translate方法对矩阵变换后的canvas画布进行中心点设置，获得目标canvas画布；
调用所述预设图像绘制标签使用drawImage方法在所述目标canvas画布中对所述待拼接图像进行绘制，获得目标图像；
使用canvas标签的toDataURL()方法将所述目标图像转成base64图片编码格式的最终图像。
2.如权利要求1所述的图像自定义方法，其特征在于，所述获取待处理图像，将所述待处理图像添加至预设HTML5页面的图像调整区域的步骤，包括：
获取待处理图像，调用预置JavaScript脚本读取所述待处理图像对应的可交换图像文件格式数据；
根据所述可交换图像文件格式数据确定所述待处理图像在预设HTML5页面上的图像方向；
检测所述图像方向是否满足预设方向条件，若满足则将所述待处理图像添加至所述预设HTML5页面的图像调整区域。
3.如权利要求2所述的图像自定义方法，其特征在于，所述获取待处理图像，调用预置JavaScript脚本读取所述待处理图像对应的可交换图像文件格式数据的步骤，包括：
获取待处理图像，通过预置JavaScript脚本调用预设文件读取对象按字节读取所述待处理图像的可交换图像文件格式数据；
所述根据所述可交换图像文件格式数据确定所述待处理图像在预设HTML5页面上的图像方向的步骤，包括：
将读取的所述可交换图像文件格式数据放入数据缓存对象；
调用数据视图对象从所述数据缓存对象中读取对应的图片方向字节；
根据所述图片方向字节确定所述待处理图像在预设HTML5页面上的图像方向。
4.如权利要求1所述的图像自定义方法，其特征在于，所述监听基于所述图像调整区域触发的点击事件，根据所述点击事件调用预设图像绘制标签对所述待处理图像进行调整，以获得基准图像的步骤，包括：
监听基于所述图像调整区域触发的点击事件，获取所述点击事件对应的图像调整参数；
根据所述图像调整参数调用预设图像绘制标签对所述待处理图像进行调整，获得待绘制图像；
通过所述预设图像绘制标签对所述待绘制图像进行绘制，并将绘制后的图像转换为预设编码格式的基准图像。
5.如权利要求4所述的图像自定义方法，其特征在于，所述图像调整参数包括图像偏移量和图像缩放比例；
所述根据所述图像调整参数调用预设图像绘制标签对所述待处理图像进行调整，获得待绘制图像的步骤，包括：
根据所述图像偏移量和所述图像缩放比例确定所述待处理图像对应的截图宽高比；
根据所述截图宽高比调用预设图像绘制标签对所述待处理图像进行图像截取，获得待绘制图像。
6.一种图像自定义装置，其特征在于，所述装置包括：
图像截取模块，用于获取待处理图像，将所述待处理图像添加至预设HTML5页面的图像调整区域；
图像调整模块，用于监听基于所述图像调整区域触发的点击事件，根据所述点击事件调用预设图像绘制标签对所述待处理图像进行调整，以获得基准图像，所述调整包括对所述待处理图像进行旋转、缩放和平移，并预先设置了图像缩放和移动的边界条件，以防止出现不期望的绘制效果；
元素组合模块，用于将所述基准图像展示至所述预设HTML5页面的元素组合区域；
元素拼接模块，用于在接收到基于所述元素组合区域输入的元素添加指令时，根据所述元素添加指令对所述基准图像进行图像元素添加，获得待拼接图像；
图像绘制模块，用于获取所述待拼接图像中各图像元素的位置信息，根据所述位置信息调用所述预设图像绘制标签对所述待拼接图像进行绘制，获得目标图像；
其中，所述图像绘制模块，还用于获取所述待拼接图像中各图像元素的位置信息，所述位置信息包括位置坐标，旋转角度以及缩放比例；
所述图像绘制模块，还用于根据所述位置信息对所述待拼接图像的预设图像属性进赋值，获得赋值后的目标图像属性，所述预设图像属性为css3 transform属性；
所述图像绘制模块，还用于根据所述目标图像属性调用所述预设图像绘制标签对所述待拼接图像进行绘制，获得目标图像；
所述图像绘制模块，还用于读取所述目标图像属性对应的属性值，根据所述属性值构建属性矩阵；使用CanvassetTransform()方法按所述属性矩阵对canvas画布进行矩阵变换；通过translate方法对矩阵变换后的canvas画布进行中心点设置，获得目标canvas画布；调用所述预设图像绘制标签使用drawImage方法在所述目标canvas画布中对所述待拼接图像进行绘制，获得目标图像；使用canvas标签的toDataURL()方法将所述目标图像转成base64图片编码格式的最终图像。
7.一种图像自定义设备，其特征在于，所述设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的图像自定义程序，所述图像自定义程序配置为实现如权利要求1至5中任一项所述的图像自定义方法的步骤。
8.一种存储介质，其特征在于，所述存储介质上存储有图像自定义程序，所述图像自定义程序被处理器执行时实现如权利要求1至5任一项所述的图像自定义方法的步骤。
CN201910975676.5A 2019-10-12 2019-10-12 图像自定义方法、装置、设备及存储介质 Active CN110955477B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910975676.5A CN110955477B (zh) 2019-10-12 2019-10-12 图像自定义方法、装置、设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910975676.5A CN110955477B (zh) 2019-10-12 2019-10-12 图像自定义方法、装置、设备及存储介质

Publications (2)

Publication Number Publication Date
CN110955477A CN110955477A (zh) 2020-04-03
CN110955477B true CN110955477B (zh) 2023-04-11

Family

ID=69975642

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910975676.5A Active CN110955477B (zh) 2019-10-12 2019-10-12 图像自定义方法、装置、设备及存储介质

Country Status (1)

Country Link
CN (1) CN110955477B (zh)

Families Citing this family (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113744363A (zh) * 2020-05-29 2021-12-03 北京沃东天骏信息技术有限公司 网页截图方法和网页截图装置
CN112036241A (zh) * 2020-07-27 2020-12-04 北京达佳互联信息技术有限公司 一种图像处理方法、装置、电子设备及存储介质
CN112100540B (zh) * 2020-08-13 2022-04-12 福建天泉教育科技有限公司 基于canvas的图片交叉镜像平铺方法、存储介质
CN113225483B (zh) * 2021-05-10 2023-04-07 北京字跳网络技术有限公司 图像融合方法、装置、电子设备和存储介质
CN113656736A (zh) * 2021-08-19 2021-11-16 上海哔哩哔哩科技有限公司 数据处理方法及装置
CN117078803B (zh) * 2023-10-16 2024-01-19 北京龙德缘电力科技发展有限公司 一种基于svg的一次图快速绘制方法

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107369197A (zh) * 2017-07-05 2017-11-21 腾讯科技（深圳）有限公司 图片处理方法、装置及设备
CN107957997A (zh) * 2016-10-14 2018-04-24 厦门飞博共创网络科技股份有限公司 一种在html5页面中编辑图片的方法和装置
CN109598667A (zh) * 2018-11-30 2019-04-09 北京金山云网络技术有限公司 一种在图片上添加水印的方法及装置

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9348495B2 (en) * 2014-03-07 2016-05-24 Sony Corporation Control of large screen display using wireless portable computer and facilitating selection of audio on a headphone

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107957997A (zh) * 2016-10-14 2018-04-24 厦门飞博共创网络科技股份有限公司 一种在html5页面中编辑图片的方法和装置
CN107369197A (zh) * 2017-07-05 2017-11-21 腾讯科技（深圳）有限公司 图片处理方法、装置及设备
CN109598667A (zh) * 2018-11-30 2019-04-09 北京金山云网络技术有限公司 一种在图片上添加水印的方法及装置

Non-Patent Citations (7)

* Cited by examiner, † Cited by third party
Title
canvas图片合成中的坑;zhishaofei3;《博客园，https://www.cnblogs.com/zhishaofei/p/9448735.html》;20180809;第1-3页 *
Exif.js+Canvas实现移动端图片压缩、旋转、上传预览功能小结;匿名;《网页3剑客，https://www.xinran001.com/frontend/278.html》;20190801;第1-4页 *
JavaScript中的图片处理与合成(一);美图技术团队;《知乎，https://zhuanlan.zhihu.com/p/36377405》;20180503;第1-10页 *
js canvas实现二维码和图片合成的海报;匿名;《码农教程，http://www.manongjc.com/article/20217.html》;20181204;第1-7页 *
创客诚品 等.12D转换.《HTML CSS JavaScript从入门到精通》.北京希望电子出版社,2017,第257页~第258页. *
基于Vue的移动端图片裁剪组件;Alex_Zheng;《博客园，https://www.cnblogs.com/haiying-zheng/p/7655806.html》;20171103;第1-10页 *
软件项目技术点(2)——Canvas之平移translate、旋转rotate、缩放scale;方帅;《博客园，https://www.cnblogs.com/fangsmile/p/5647390.html》;20160706;第1-6页 *

Also Published As

Publication number Publication date
CN110955477A (zh) 2020-04-03

Similar Documents

Publication Publication Date Title
CN110955477B (zh) 图像自定义方法、装置、设备及存储介质
US11379108B2 (en) Display controlling method, terminal, information processing apparatus, and storage medium
CN111937046B (zh) 混合现实系统、存储介质、方法和便携式终端装置
EP3835931A1 (en) Icon display method and apparatus, and terminal and storage medium
US9141332B2 (en) Masking sensitive information in a screen sharing session
US7237227B2 (en) Application user interface template with free-form layout
US10346560B2 (en) Electronic blueprint system and method
US20170329502A1 (en) Method and device for processing image
EP2874054B1 (en) Application text adjusting method, device, and terminal
CN110750664B (zh) 图片的显示方法及装置
US20130100166A1 (en) Viewer unit, server unit, display control method, digital comic editing method and non-transitory computer-readable medium
CN111951356B (zh) 基于json数据格式的动画渲染方法
CN112016023A (zh) 业务处理方法、装置、终端及存储介质
US20140359405A1 (en) Method and device of displaying images in text information
CN111223155A (zh) 图像数据处理方法、装置、计算机设备和存储介质
CN112825020A (zh) 图片生成方法、装置、计算机设备和存储介质
CN110019037B (zh) 一种pdf文件展示方法、装置、设备及存储介质
CN114417226A (zh) 页面生成方法、显示方法、装置、电子设备和存储介质
JP5303534B2 (ja) 体裁情報処理装置及び方法
JP4874363B2 (ja) ブラウザのプラグインを用いるウェブページ表示方法
CN107608733B (zh) 图片显示方法、装置和终端设备
CN110908570B (zh) 图像处理方法、装置、终端及存储介质
JP2016091092A (ja) ブラウザ、ブラウザの制御方法およびプログラム
CN106445269B (zh) 移动终端的状态栏显示方法及移动终端
JP4391916B2 (ja) 移動通信端末およびその表示調整方法

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant