CN106168874B - 一种基于网页的彩信编辑方法和装置 - Google Patents

一种基于网页的彩信编辑方法和装置 Download PDF

Info

Publication number
CN106168874B
CN106168874B CN201610532647.8A CN201610532647A CN106168874B CN 106168874 B CN106168874 B CN 106168874B CN 201610532647 A CN201610532647 A CN 201610532647A CN 106168874 B CN106168874 B CN 106168874B
Authority
CN
China
Prior art keywords
multimedia message
picture
editing
width
switching
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
CN201610532647.8A
Other languages
English (en)
Other versions
CN106168874A (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.)
Shenzhen Ai Pai Network Polytron Technologies Inc
Original Assignee
Shenzhen Ai Pai Network Polytron Technologies Inc
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 Shenzhen Ai Pai Network Polytron Technologies Inc filed Critical Shenzhen Ai Pai Network Polytron Technologies Inc
Priority to CN201610532647.8A priority Critical patent/CN106168874B/zh
Publication of CN106168874A publication Critical patent/CN106168874A/zh
Application granted granted Critical
Publication of CN106168874B publication Critical patent/CN106168874B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/106—Display of layout of documents; Previewing
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/117—Tagging; Marking up; Designating a block; Setting of attributes
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/60—Editing figures and text; Combining figures or text
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048—Indexing scheme relating to G06F3/048
    • G06F2203/04806—Zoom, i.e. interaction techniques or interactors for controlling the zooming operation

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Human Computer Interaction (AREA)
  • Processing Or Creating Images (AREA)

Abstract

一种基于网页的彩信编辑方法和装置，方法包括1.创建彩信编辑环境；2.设置彩信默认属性；3.调用图片上传方法，上传图片；4.根据缩放规则，对图片的尺寸进行调整；5.按照三种常见尺寸对彩信图片进行裁剪；6.定义原图与新建图片对象不同的长宽属性，通过属性变换实现动态截图效果；7.获取图片对象信息，使图片还原；8.处理彩信文字；9.对彩信声音进行处理，声音调用系统标签，可自动播放；10.展示彩信内容并自动播放，预览彩信。装置包括彩信编辑器以及彩信前台编辑装置；本发明的彩信编辑方法和装置，提供了分开编辑，集中预览的彩信编辑方式，解决了在网页上发送彩信时，图片、声音、文字编辑困难的问题，优化了彩信编辑流程，方便了用户操作。

Description

一种基于网页的彩信编辑方法和装置
技术领域
本发明涉及网络数据通信技术领域，更具体地说，涉及一种在PC端对网页上的彩信进行编辑的方法和装置。
背景技术
目前通过PC发送彩信的功能在企业营销、信息发布等领域使用普遍，但大多数WEB系统提供的彩信编辑方式都参考手机上的处理方法，在一个界面编辑所有图片、文字、声音等素材，不能体现PC WEB界面大屏幕的优势，使用起来进常不方便。现有网页编辑彩信技术不便用户操作，编辑一个彩信往往要花费大量时间，本发明在总结前人经验的基础上，优化了彩信编辑流程，方便了用户操作。
本发明实现的彩信编辑方法体现了PC端屏幕大的优势，彩信内容编辑清晰，鼠标操作要方便，且增加了图片编辑，包括放大缩小裁剪旋转，声音选择，文字编辑以及在线预览等功能。
发明内容
本发明旨在克服现有技术网页编辑彩信技术的不足，提供一种基于网页的彩信编辑方法和装置，提供了分开编辑，集中预览的彩信编辑方式，支持在线图裁剪，即时预览效果，支持文字编排方式自定义，解决了传统系统在网页上发送彩信时，图片、声音、文字编辑困难的问题且不能体现PC WEB界面大屏幕优势的问题。
本发明上述技术问题这样解决，构造一种基于网页的彩信编辑方法，使用彩信编辑器和彩信前台编辑装置对网页彩信进行编辑，所述彩信编辑器用于创建彩信对象信息、创建用来存放帧对象的集合对象、存储帧对象、获取帧内容、图片上传处理以及素材上传方法调用处理，所述基于网页的彩信编辑方法包括以下步骤：
S1)、利用彩信编辑器，创建彩信编辑环境；
S2)、利用彩信前台编辑装置，设置彩信默认属性；
S3)、利用图片上传装置选择图片，调用图片上传方法，对图片的大小、格式进行校验，在上传不成功时提示不通过的原因；
S4)、根据缩放规则，利用图片缩放装置对图片的尺寸进行调整，缩放后的宽度在55-1024，缩放后的高度在34-768，将缩放后的值赋给原图；
S5)、利用图片裁剪装置，按照三种常见尺寸对彩信图片进行裁剪；
S6)、利用图片裁剪切换装置定义原图与新建图片对象不同的长宽属性，通过属性变换实现动态截图效果；
S7)、利用图片还原装置获取图片对象信息，重新刷新帧对象列表和右侧编辑区域，将初始上传的文件重新加载到对应的区域，使图片还原；
S8)、利用文字处理装置处理彩信文字，选择文字选项卡，在文本区域编辑文字后，通过勾选文字在前选项框来指定文字在彩信内容中展示的区域，获取文字位置选项框的选中属性，保存勾选状态到彩信对象信息中；
S9)、利用声音处理装置选择声音选项卡，在声音编辑区域，点击上传特定格式的音频文件，对彩信声音进行处理，声音调用系统标签，可自动播放；
S10)、利用彩信预览装置调用彩信展示方法，展示彩信内容，且自动播放，预览彩信。
在本发明上述基于网页的彩信编辑方法中，步骤S1编辑彩信编辑环境还包括以下子步骤：
S11)、初始化：进入编辑页面，默认加载左边帧列表和右边对应的当前帧信息内容，并且在内存中创建彩信对象信息；
S12)、创建帧列表集合对象，所述帧列表集合对象是用来存放彩信内容中帧对象的列表；
S13)、存储帧文本、图片以及声音，构造彩信对象编辑方法；
S14)、构造获取彩信帧内容方法；
S15)、添加帧对象处理图片，用一个上传文件来填充图片材质，复制文件至指定目录，以同样的方法来处理彩信的声音、文字；
S16)、通过调用素材上传方法获取系统内存中的彩信编辑对象信息，调用素材上传方法，如图片上传方法，添加当前帧对象信息，且更新到彩信编辑对象中，重新返回到前台页面，进行展示。
在本发明上述基于网页的彩信编辑方法中，步骤S3上传图片还包括以下步骤：
S31)、首先校验图片格式，校验通过，异步提交到后台，后台校验文件大小，不通过则调用回调函数，提示不通过原因；
S32)、彩信图片提交通过后，即图片上传成功后，调用回调函数，刷新右侧彩信编辑区域，将图片写到彩信编辑区域；
S33)、通知调用帧列表方法，加载最新的帧对象信息；
S34)、定义当前操作对象属性，并使裁剪属性可用。
在本发明上述基于网页的彩信编辑方法中，步骤S4中，图片缩放装置处理图片放大和缩小，还包括以下步骤：
S41)、获取图片对象，新建图片对象，将获取的图片对象属性赋给新建的图片对象，定义获取图片对象长宽属性为(第一长度，第一宽度)，定义新建图片对象属性为(第二长度，第二宽度)，定义原图属性为(第三长度，第三宽度)；如果获取图片对象的长宽如果小于特定最小图片参数值，同时特定最小图片参数值也是每次缩放大小，则不允许缩小；
S42)、按照缩放规则计算，如果第一长度值>第一宽度值，参数为缩小，则第二长度值＝第一长度值-特定最小图片参数值，参数为放大则第二长度值＝第一长度值+特定最小图片参数值，而第二宽度值＝(第二长度值*第一宽度值)/第一长度值；
S43)、如果第一长度值<第一宽度值参数为缩小时，则第二宽度值＝第一宽度值-特定最小图片参数值，参数为放大时，则第二宽度值＝第一宽度值+特定最小图片参数值；而第二长度值＝(第二宽度值*第一长度值)/第一宽度值；其中缩放后图片的宽度必须在55～1024之间，缩放后图片的高度必须在34～768之间；
S44)、缩放处理，将缩放后的值第二长度值，第二宽度值分别赋给原图属性第三长度，第三宽度；
在本发明上述基于网页的彩信编辑方法中，步骤S5中图片裁剪装置对彩信图片的裁剪功能设置，还包括以下步骤：
S51)、初始化裁剪方法；
S52)、调用JAVA中的插件功能，鼠标选择截图范围，鼠标变更事件，调用自定义函数给截取后的图片赋值，设置位置属性和图片大小属性；
S53)、执行裁剪方法，重新刷新左侧帧列表和右侧编辑区域，将新的图片文件刷新到编辑区域。
在本发明上述基于网页的彩信编辑方法中，步骤S6中裁剪彩信图片尺寸切换功能设置，还包括以下步骤：
S61)、在图片上定位，且获取图片对象A，新建一个图片对象B，将A对象属性赋给B，定义原图片长宽属性第三切换长度，第三切换宽度；
S62)、获取切换的当前尺寸，如裁剪切换长度x裁剪切换宽度，定义新长宽属性第一切换长度，第一切换宽度；如果第三切换长度值>裁剪切换长度值，第一切换长度值＝(第三切换长度值-裁剪切换长度值)/2；第三切换宽度值>裁剪切换宽度值，第一切换宽度值＝(第三切换宽度值-裁剪切换宽度值)/2；
S63)、定义新的长宽属性第四切换长度，第四切换宽度；第四切换长度值＝第一切换长度值+裁剪切换长度值；第四切换宽度值＝第一切换宽度值+裁剪切换宽度值二
S64)、递归调用裁剪插件，调用动画效果切换([第一切换长度，第一切换宽度，第四切换长度，第四切换宽度])方法，其中[第一切换长度，第一切换宽度，第四切换长度，第四切换宽度]属性均为复合属性，通过属性变化，实现动态截图效果，双击即可保存当前裁剪尺寸，并重新刷新帧对象类表和右侧编辑区域。
按照本发明另一方面提供的一种基于网页的彩信编辑装置，包括彩信编辑器以及彩信前台编辑装置，所述彩信编辑器用来在内存中创建彩信对象信息和彩信内容的帧对象列表，将彩信的图片、文本以及声音帧内容存储在内存空间中，构建彩信编辑对象方法，构造彩信帧内容获取方法，添加帧对象处理方法以及调用素材上传方法。
在本发明上述基于网页的彩信编辑装置中，所述彩信内容的帧对象列表包括彩信本体结构体、彩信声音播放结构体、彩信内容结构体以及彩信内容类型结构体，它们用来存放彩信内容中的帧对象列表，所述彩信本体结构体用来存放彩信标题、请求ID以及帧内容体等对象列表，所述彩信声音播放结构体用来存放播放时长、内容单元数以及内容单元体等对象列表，所述彩信内容结构体用来存放内容体类型、文件名、内容体的实际字节数以及内容体的内容等对象列表，所述彩信内容类型结构体用来存放各种图片类型对象列表。
在本发明上述基于网页的彩信编辑装置中，所述彩信前台编辑装置包括图片上传装置、图片缩放装置、图片裁剪装置、图片尺寸切换装置、图片还原装置、文字处理装置、声音处理装置以及彩信预览装置。
在本发明上述基于网页的彩信编辑装置中，所述图片上传装置用以对图片的大小、格式进行校验，在上传不成功时提示不通过的原因；所述图片缩放装置根据缩放规则对图片的尺寸进行调整，缩放后的宽度在55-1024，缩放后的高度在34-768，将缩放后的值赋给原图；所述图片裁剪装置包括自定义裁剪装置和自选尺寸裁剪装置，按照三种常见尺寸对图片进行裁剪；所述裁剪尺寸切换装置用以通过属性变换，实现动态截图效果；所述图片还原装置用以获取图片对象信息，重新刷新帧对象列表，将初始上传的文件重新加载到对应的区域；所述文字处理装置用以编辑文字并指定文字显示区域，所述声音处理装置用以上传音频文件并实现其播放功能，所述彩信预览装置用来展示编辑好的彩信内容，并自动播放彩信音频，以查看是否达到编辑彩信的效果。
本发明针对现有网页编辑彩信技术用户操作不便，编辑一个彩信往往要花费大量时间，本发明在研究和总结现有技术基础上，提出了一种基于网页的彩信编辑方法和装置，提供了分开编辑，集中预览的彩信编辑方式，支持在线图裁剪，即时预览效果，支持文字编排方式自定义，解决了传统系统在网页上发送彩信时，图片、声音、文字编辑困难的问题，优化了彩信编辑流程，方便了用户操作。
附图说明
下面将结合附图及实施例，对本发明方法和装置的特点作进一步说明，附图中：
图1是本发明实施例的彩信编辑装置组成逻辑示意图
图2是本发明实施例中的帧对象列表组成逻辑示意图
图3是本发明实施例中的彩信前台编辑装置组成逻辑示意图
图4是本发明实施例中的彩信前台编辑装置页面部分组成示意图
图5是本发明实施例中的彩信前台编辑装置的文字处理装置页面示意图
图6是本发明实施例中的彩信前台编辑装置的文字处理装置页面测试示意图
图7是本发明实施例中的彩信前台编辑装置的声音处理装置页面示意图
图8是本发明实施例中的彩信前台编辑装置的预览装置页面示意图
图9是本发明实施例中的彩信编辑方法流程图
图10是本发明实施例中的彩信编辑彩信编辑环境设置方法流程图
图11是本发明实施例中的彩信图片缩放方法流程图
图12是本发明实施例中的彩信图片裁剪功能设置方法流程图
图13是本发明实施例中的彩信图片尺寸切换功能设置方法流程图
具体实施方式
图1是本发明实施例中的彩信编辑装置100组成逻辑示意图，图2是本发明实施例中的帧对象列表200组成逻辑示意图，图3是本发明实施例中的彩信前台编辑装置102组成逻辑示意图，请参考图1-图3，彩信编辑装置100包括彩信编辑器101以及彩信前台编辑装置102。
彩信编辑器101用来在内存中创建彩信对象信息和彩信内容的帧对象列表，将彩信的图片、文本以及声音帧内容存储在内存空间中，构建彩信编辑对象方法，构造彩信帧内容获取方法，添加帧对象处理方法以及调用素材上传方法，彩信编辑器101主要用来创建彩信编辑环境，并对彩信前台编辑装置102的参数进行初始化，为进一步设置、编辑彩信做准备，例如创建彩信对象信息，request.getSession().setAttribute(″mmsEditer"，mmsEditer)，mmsEditer对象包含有彩信相关信息，如文件临时目录，文件名，彩信文字信息，声音临时目录等基础数据存放的相关信息，为一帧图片信息内容；创建LinkedListframeList＝new LinkedList()；在mmsEditer中对frameList进行定义，frameList集合对象是用来存放彩信内容中的帧对象列表。
彩信内容的帧对象列表200包括彩信本体结构体201、彩信声音播放结构体202、彩信内容结构体203以及彩信内容类型结构体204，它们用来存放彩信内容中的帧对象列表200。
彩信本体结构体201用来存放彩信标题、请求ID以及帧内容体等对象列表：
彩信声音播放结构体202用来存放播放时长、内容单元数以及内容单元体等对象列表：
字段名 类型 描述
nPlayTime int 播放时长秒
nMMSUnitNum int 内容单元数
MMSContent[0] 内容体
彩信内容结构体203用来存放内容体类型、文件名、内容体的实际字节数以及内容体的内容等对象列表：
字段名 类型 描述
pucFileName[255] int 内容体类型
pucFileName Char 文件名
ulMMSCotentSize int 内容体的实际字节数，不包括头的内容
pueMMSContent[1] Char 内容体内容体内容
彩信内容类型结构体204用来存放各种图片类型对象列表。
彩信编辑器101还要定义帧对象Frame frame＝new Frame(this)，Frame内容包括文本private Material textMat、图片private Material imageMat以及声音privateMaterial soundMat；构造彩信编辑对象方法，public Frame(MmsEditer mmsEditer){this.mmsEditer＝mmsEditer；}。
彩信编辑器101通过public LinkedList getAllMat()获取帧内容方法，添加帧对象处理(声音、文字同理)，用一个上传文件来填充图片材质，复制文件至指定目录；调用素材上传方法mmsEditer＝(MmsEditer)RequestUtil.getSessionObj(request，”mmsEditer")，获取系统内存中的彩信编辑对象信息，调用素材上传方法，添加当前帧对象信息，且更新到mmsEditer彩信编辑对象中，通过HttpServletRequest方法(request.setAttribute(″mmsEditer"，mmsEditer)；)重新返回到前台页面，进行展示。
图4是本发明实施例中的彩信前台编辑装置102页面部分组成示意图，图5是本发明实施例中的彩信前台编辑装置102的文字处理装置306页面示意图，图6是本发明实施例中的彩信前台编辑装置的文字处理装置306页面测试示意图，图7是本发明实施例中的彩信前台编辑装置的声音处理装置307页面示意图，图8是本发明的彩信前台编辑装置的预览装置308页面示意图，请参考图4-图8，彩信前台编辑装置102包括图片上传装置301、图片缩放装置302、图片裁剪装置303、图片尺寸切换装置304、图片还原装置305、文字处理装置306、声音处理装置307以及彩信预览装置308。
图片上传装置301调用uploadimg(obj)方法，首先校验图片格式，如jpg、png、bmp、gif等，校验通过，通过ajax的请求，post提交方式，异步提交到后台，后台校验文件大小，不通过则调用回调函数，提示不通过原因；通过，即图片上传成功后，调用回调函数，刷新右侧彩信编辑区域，将图片写到彩信编辑区域；通知调用帧列表方法，加载最新的帧对象信息；定义属性var jcrop_api。即当前操作对象，并启用裁剪属性。
图片缩放装置302调用resizeImage(flag)方法，参数＝false/true，首先定义获取图片对象长宽属性为(第一长度width，第一宽度height)，定义新建图片对象属性为(第二长度w，第二宽度h)，定义原图属性为(第三长度A.width，第三宽度A.height)；如果获取图片对象的长宽如果小于特定最小图片参数值，如果A的长宽如果小于最小图片参数size＝80像素或者其它规定的像素数，同时size也是每次缩放大小，则不允许缩小；其次，计算缩放规则计算，如果第一长度width>第一宽度height，参数为缩小，则第二长度w＝第一长度width-size；参数为放大第二长度w＝第一长度width+size；而第二宽度h＝(第二长度w*第一宽度height)/第一长度width；如果第一长度width<第一宽度height，参数为缩小时，则第二宽度h＝第一宽度height-size，参数为放大时，第二宽度h＝第一宽度height+size；而第二长度w＝(第二宽度h*第一长度width)/第一宽度height；其中缩放后图片的宽度必须在55～1024之间，缩放后图片的高度必须在34～768之间，经过缩放处理后，第二长度w＝Math.round第二长度(w)；第二宽度h＝Math.round(第二宽度h)，将缩放后的值，赋给原图属性，第三长度A.width＝第二长度w；第三宽度A.height＝第二宽度h。
图片裁剪装置304包括自定义裁剪装置和自选尺寸裁剪装置，功能提供三种常见尺寸裁剪功能；图片上传成功后，初始化裁剪方法initJcrop()，调用jquery中的Jcrop插件功能，鼠标选择截图范围，鼠标变更事件，调用自定义函数showPreview()，给截取后的图片赋值，位置属性和图片大小属性；最后执行裁剪方法，sureCrop()；重新刷新左侧帧列表和右侧编辑区域，将新的图片文件刷新到编辑区域。
裁剪尺寸切换装置303调用animateTo()方法，在图片上定位，且获取图片对象A，新建一个图片对象B，将A对象属性赋给B，定义原图片长宽属性为(第一切换长度A.width，第一切换宽度A.height)；获取切换的当前尺寸，如裁剪切换长度cjwidthx裁剪切换宽度cjheight，定义新长宽属性(第二切换长度w、第二切换宽度h)，如果第一切换长度值width>裁剪切换长度值parseInt(cjwidth)，第二切换长度值w＝(第一切换长度值width-裁剪切换长度值parseInt(cjwidth))/2；如果第一切换宽度值height>裁剪切换宽度值parseInt(cjheight)，第二切换宽度值h＝(第一切换宽度值height-裁剪切换宽度值parseInt(cjheight))/2。
定义新的长宽属性为(第三切换长度ww，第三切换宽度hh)，第三切换长度值ww＝第二切换长度值w+裁剪切换长度值parseInt(cjwidth)；第三切换宽度值hh＝第二切换宽度值h+裁剪切换宽度值parseInt(cjheight)。
jcrop_api上递归调用jcrop_api，animateTo([第二切换长度w，第二切换宽度h，第三切换长度ww，第三切换宽度hh])方法，其中[第二切换长度w，第二切换宽度h，第三切换长度ww，第三切换宽度hh]属性均为css属性，通过属性变化，实现动态截图效果。双击即可保存当前裁剪尺寸，并重新刷新帧对象类表和右侧编辑区域。
图片还原装置305调用cancelCrop()方法，获取图片对象信息，重新刷新帧对象列表和右侧编辑区域，将初始上传的文件重新加载到对应的区域。
文字处理装置306选择文字选项卡，在文本区域编辑文字后，通过勾选文字在前选项框来指定文字在彩信内容中展示的区域，调用setTextBefore()方法，获取文字位置选项框的选中属性，保存勾选状态到彩信对象信息中。
声音处理装置307选择声音选项卡，在声音编辑区域，点击上传音频文件。
彩信预览装置308调用Pop(′showMmsPreviewer.ipi？timestamp＝′+(new Date()).valueOf()，′pop_mms′)方法，弹出层，展示彩信内容，且自动播放。彩信编辑过程中，所有彩信内容已被保存在系统缓存中，预览时需要获取缓存信息。获取session中的MmsEditer对象信息，其中包含彩信所有内容，并通过request.setAttribute(”mmsEditer"，mmsEditer)方式返回到页面上，前台解析过程，在mmsEditer对象中获取frameList列表，即当前彩信帧列表信息，解析frameList列表，遍历帧对象展示，其中，在同一帧内，需要注意文字位置标识，如果文字在前，展示顺序为文字图片声音，反之图片文字声音
图9是本发明的彩信编辑方法流程图，图10是本发明的彩信编辑彩信编辑环境设置方法流程图，图11是本发明的彩信图片缩放方法流程图，图12是本发明的彩信图片裁剪功能设置方法流程图，图13是本发明的彩信图片尺寸切换功能设置方法流程图，请参考图9-图13，一种基于网页的彩信编辑方法，使用彩信编辑器101和彩信前台编辑装置102对网页彩信进行编辑，彩信编辑器101用于创建彩信对象信息、创建用来存放帧对象的集合对象、存储帧对象、获取帧内容、图片上传处理以及素材上传方法调用处理，彩信编辑方法包括以下步骤：
S1)、利用彩信编辑器101，创建彩信编辑环境；
S2)、利用彩信前台编辑装置102，设置彩信默认属性；
S3)、利用图片上传装置301选择图片，调用图片上传方法，对图片的大小、格式进行校验，在上传不成功时提示不通过的原因；
S4)、根据缩放规则，利用图片缩放装置302对图片的尺寸进行调整，缩放后的宽度在55-1024，缩放后的高度在34-768，将缩放后的值赋给原图；
S5)、利用图片裁剪装置304，按照三种常见尺寸对彩信图片进行裁剪；
S6)、利用图片裁剪切换装置303定义原图与新建图片对象不同的长宽属性，通过属性变换实现动态截图效果；
S7)、利用图片还原装置305获取图片对象信息，重新刷新帧对象列表和右侧编辑区域，将初始上传的文件重新加载到对应的区域，使图片还原；
S8)、利用文字处理装置306处理彩信文字，选择文字选项卡，在文本区域编辑文字后，通过勾选文字在前选项框来指定文字在彩信内容中展示的区域，获取文字位置选项框的选中属性，保存勾选状态到彩信对象信息中；
S9)、利用声音处理装置307选择声音选项卡，在声音编辑区域，点击上传特定格式的音频文件，对彩信声音进行处理，声音调用系统标签，可自动播放；
S10)、利用彩信预览装置308调用彩信展示方法，展示彩信内容，且自动播放，预览彩信。
进一步地，步骤S1编辑彩信编辑环境还包括以下子步骤：
S11)、初始化：进入编辑页面，默认加载左边帧列表和右边对应的当前帧信息内容，并且在内存中创建彩信对象信息；
S12)、创建帧列表集合对象，帧列表集合对象是用来存放彩信内容中的帧对象列表200；
S13)、存储帧文本、图片以及声音，构造彩信对象编辑方法；
S14)、构造获取彩信帧内容方法；
S15)、添加帧对象处理图片，用一个上传文件来填充图片材质，复制文件至指定目录，以同样的方法来处理彩信的声音、文字；
S16)、通过调用素材上传方法获取系统内存中的彩信编辑对象信息，调用素材上传方法，如图片上传方法，添加当前帧对象信息，且更新到彩信编辑对象中，重新返回到前台页面，进行展示。
进一步地，利用图片上传装置301对图片进行上传的步骤S3还包括以下子步骤：
S31)、首先校验图片格式，校验通过，异步提交到后台，后台校验文件大小，不通过则调用回调函数，提示不通过原因；
S32)、彩信图片提交通过后，即图片上传成功后，调用回调函数，刷新右侧彩信编辑区域，将图片写到彩信编辑区域；
S33)、通知调用帧列表方法，加载最新的帧对象信息；
S34)、定义当前操作对象属性，并使裁剪属性可用。
进一步地，利用图片缩放装置302处理图片放大和缩小的步骤S4还包括以下子步骤：
S41)、图片缩放装置302调用resizeImage(flag)方法，参数＝false/true，首先定义获取图片对象长宽属性为(第一长度width，第一宽度height)，定义新建图片对象属性为(第二长度w，第二宽度h)，定义原图属性为(第三长度A.width，第三宽度A.height)；如果获取图片对象的长宽如果小于特定最小图片参数值，如果A的长宽如果小于最小图片参数size＝80像素或者其它规定的像素数，同时size也是每次缩放大小，则不允许缩小；
S42)、计算缩放规则计算，如果第一长度width>第一宽度height，参数为缩小，则第二长度w＝第一长度width-size；参数为放大第二长度w＝第一长度width+size；而第二宽度h＝(第二长度w*第一宽度height)/第一长度width；
S43)、如果第一长度width<第一宽度height，参数为缩小时，则第二宽度h＝第一宽度height-size，参数为放大时，第二宽度h＝第一宽度height+size；而第二长度w＝(第二宽度h*第一长度width)/第一宽度height；其中缩放后图片的宽度必须在55～1024之间，缩放后图片的高度必须在34～768之间，经过缩放处理后，第二长度w＝Math.round第二长度(w)；第二宽度h＝Math.round(第二宽度h)；
S44)、将缩放后的值，赋给原图属性，第三长度A.width＝第二长度w；第三宽度A.height＝第二宽度h
根据本发明的彩信编辑方法，彩信图片的裁剪功能设置步骤S5还包括以下步骤：
S51)、初始化裁剪方法initJcrop()；
S52)、调用jquery中的Jcrop插件功能，鼠标选择截图范围，鼠标变更事件，调用自定义函数showPreview()，给截取后的图片赋值，位置属性和图片大小属性；
S53)、执行裁剪方法sureCrop()，重新刷新左侧帧列表和右侧编辑区域，将新的图片文件刷新到编辑区域。
根据本发明的彩信编辑方法，裁剪彩信图片尺寸切换功能设置步骤S6还包括以下步骤：
S61)、裁剪尺寸切换装置303调用animateTo()方法，在图片上定位，且获取图片对象A，新建一个图片对象B，将A对象属性赋给B，定义原图片长宽属性为(第一切换长度A.width，第一切换宽度A.height)；
S62)、获取切换的当前尺寸，如裁剪切换长度cjwidthx裁剪切换宽度cjheight，定义新长宽属性(第二切换长度w、第二切换宽度h)，如果第一切换长度值width>裁剪切换长度值parseInt(cjwidth)，第二切换长度值w＝(第一切换长度值width-裁剪切换长度值parseInt(cjwidth))/2；如果第一切换宽度值height>裁剪切换宽度值parseInt(cjheight)，第二切换宽度值h＝(第一切换宽度值height-裁剪切换宽度值parseInt(cjheight))/2；
S63)、定义新的长宽属性为(第三切换长度ww，第三切换宽度hh)，第三切换长度值ww＝第二切换长度值w+裁剪切换长度值parseInt(cjwidth)；第三切换宽度值hh＝第二切换宽度值h+裁剪切换宽度值parseInt(cjheight)；
S64)、jcrop_api上递归调用jcrop_api，animateTo([第二切换长度w，第二切换宽度h，第三切换长度ww，第三切换宽度hh])方法，其中[第二切换长度w，第二切换宽度h，第三切换长度ww，第三切换宽度hh]属性均为css属性，通过属性变化，实现动态截图效果。双击即可保存当前裁剪尺寸，并重新刷新帧对象类表和右侧编辑区域。
以上所述，仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何属性本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应该以权利要求的保护范围为准。

Claims (7)

1.一种基于网页的彩信编辑方法，其特征在于，提供了分开编辑，集中预览的彩信编辑方式，使用彩信编辑器(101)和彩信前台编辑装置(102)对网页彩信进行编辑，所述彩信编辑器(101)用于创建彩信对象信息、创建用来存放帧对象的集合对象、存储帧对象、获取帧内容、图片上传处理以及素材上传方法调用处理，所述彩信前台编辑装置(102)用于对彩信进一步编辑和设置，所述基于网页的彩信编辑方法包括以下步骤：
S1)、利用所述彩信编辑器(101)，创建彩信编辑环境；
S2)、利用所述彩信前台编辑装置(102)，设置彩信默认属性；
S3)、利用图片上传装置(301)选择图片，调用图片上传方法，对图片的大小、格式进行校验，在上传不成功时提示不通过的原因；
S4)、根据缩放规则，利用图片缩放装置(302)对图片的尺寸进行调整，缩放后的宽度在55-1024之间，缩放后的高度在34-768之间，将缩放后的值赋给原图；
S5)、利用图片裁剪装置(304)，按照三种常见尺寸对彩信图片进行裁剪；
S6)、利用图片裁剪切换装置(303)定义原图与新建图片对象不同的长宽属性，通过属性变换实现动态截图效果；
S7)、利用图片还原装置(305)获取图片对象信息，重新刷新帧对象列表和右侧编辑区域，将初始上传的文件重新加载到对应的区域，使图片还原；
S8)、利用文字处理装置(306)处理彩信文字，选择文字选项卡，在文本区域编辑文字后，通过勾选文字在前选项框来指定文字在彩信内容中展示的区域，获取文字位置选项框的选中属性，保存勾选状态到彩信对象信息中；
S9)、利用声音处理装置(307)选择声音选项卡，在声音编辑区域，点击上传特定格式的音频文件，对彩信声音进行处理，声音调用系统标签，可自动播放；
S10)、利用彩信预览装置(308)调用彩信展示方法，展示彩信内容并自动播放，预览彩信。
2.根据权利要求1所述基于网页的彩信编辑方法，其特征在于，步骤S1创建彩信编辑环境还包括以下子步骤：
S11)、初始化：进入编辑页面，默认加载左边帧列表和右边对应的当前帧信息内容，并且在内存中创建彩信对象信息；
S12)、创建帧列表集合对象，所述帧列表集合对象是用来存放彩信内容中帧对象的列表；
S13)、存储帧文本、图片以及声音，构造彩信对象编辑方法；
S14)、构造获取彩信帧内容方法；
S15)、添加帧对象处理图片，用一个上传文件来填充图片材质，复制文件至指定目录，以同样的方法来处理彩信的声音、文字；
S16)、通过调用素材上传方法获取系统内存中的彩信编辑对象信息，调用素材上传方法，如图片上传方法，添加当前帧对象信息，且更新到彩信编辑对象中，重新返回到前台页面，进行展示。
3.根据权利要求1所述基于网页的彩信编辑方法，其特征在于，步骤S3上传图片还包括以下步骤：
S31)、首先校验图片格式，校验通过，异步提交到后台，后台校验文件大小，不通过则调用回调函数，提示不通过原因；
S32)、彩信图片提交通过后，即图片上传成功后，调用回调函数，刷新右侧彩信编辑区域，将图片写到彩信编辑区域；
S33)、通知调用帧列表方法，加载最新的帧对象信息；
S34)、定义当前操作对象属性，并使裁剪属性可用。
4.根据权利要求1所述基于网页的彩信编辑方法，其特征在于，步骤S4中图片缩放装置302处理图片放大和缩小，还包括以下步骤：
S41)、获取图片对象，新建图片对象，将获取的图片对象属性赋给新建的图片对象，定义获取图片对象长宽属性为(第一长度，第一宽度)，定义新建图片对象属性为(第二长度，第二宽度)，定义原图属性为(第三长度，第三宽度)；如果获取图片对象的长宽如果小于特定最小图片参数值，同时特定最小图片参数值也是每次缩放大小，则不允许缩小；
S42)、按照缩放规则计算，如果第一长度值＞第一宽度值，参数为缩小，则第二长度值＝第一长度值-特定最小图片参数值，参数为放大则第二长度值＝第一长度值+特定最小图片参数值，而第二宽度值＝(第二长度值*第一宽度值)/第一长度值；
S43)、如果第一长度值＜第一宽度值参数为缩小时，则第二宽度值＝第一宽度值-特定最小图片参数值，参数为放大时，则第二宽度值＝第一宽度值+特定最小图片参数值；而第二长度值＝(第二宽度值*第一长度值)/第一宽度值；其中缩放后图片的宽度必须在55～1024之间，缩放后图片的高度必须在34～768之间；
S44)、缩放处理，将缩放后的值第二长度值，第二宽度值分别赋给原图属性第三长度，第三宽度。
5.根据权利要求1所述基于网页的彩信编辑方法，其特征在于，步骤S5中图片裁剪装置(304)对彩信图片的裁剪功能设置，还包括以下步骤：
S51)、初始化裁剪方法；
S52)、调用JAVA中的插件功能，鼠标选择截图范围，鼠标变更事件，调用自定义函数给截取后的图片赋值，设置位置属性和图片大小属性；
S53)、执行裁剪方法，重新刷新左侧帧列表和右侧编辑区域，将新的图片文件刷新到编辑区域。
6.根据权利要求1所述基于网页的彩信编辑方法，其特征在于，步骤S6中图片裁剪切换装置(303)裁剪切换彩信图片尺寸属性，还包括以下步骤：
S61)、在图片上定位，且获取图片对象A，新建一个图片对象B，将A对象属性赋给B，定义原图片长宽属性第三切换长度，第三切换宽度；
S62)、获取切换的当前尺寸，如裁剪切换长度x裁剪切换宽度，定义新长宽属性第一切换长度，第一切换宽度；如果第三切换长度值＞裁剪切换长度值，第一切换长度值＝(第三切换长度值-裁剪切换长度值)/2；第三切换宽度值＞裁剪切换宽度值，第一切换宽度值＝(第三切换宽度值-裁剪切换宽度值)/2；
S63)、定义新的长宽属性第四切换长度，第四切换宽度；第四切换长度值＝第一切换长度值+裁剪切换长度值；第四切换宽度值＝第一切换宽度值+裁剪切换宽度值；
S64)、递归调用裁剪插件，调用动画效果切换([第一切换长度，第一切换宽度，第四切换长度，第四切换宽度])方法，其中[第一切换长度，第一切换宽度，第四切换长度，第四切换宽度]属性均为复合属性，通过属性变化，实现动态截图效果，双击即可保存当前裁剪尺寸，并重新刷新帧对象类表和右侧编辑区域。
7.一种基于网页的彩信编辑装置(100)，其特征在于，提供了分开编辑，集中预览的彩信编辑方式，包括彩信编辑器(101)以及彩信前台编辑装置(102)，所述彩信编辑器(101)用来在内存中创建彩信对象信息和彩信内容的帧对象列表，将彩信的图片、文本以及声音帧内容存储在内存空间中，构建彩信编辑对象方法，构造彩信帧内容获取方法，添加帧对象处理方法以及调用素材上传方法；
所述彩信内容的帧对象列表(200)包括彩信本体结构体(201)、彩信声音播放结构体(202)、彩信内容结构体(203)以及彩信内容类型结构体(204)，它们用来存放彩信内容中的帧对象列表(200)，所述彩信本体结构体(201)用来存放彩信标题、请求ID以及帧内容体，所述彩信声音播放结构体(202)用来存放播放时长、内容单元数以及内容单元体，所述彩信内容结构体(203)用来存放内容体类型、文件名、内容体的实际字节数以及内容体的内容，所述彩信内容类型结构体(204)用来存放各种图片类型对象列表；
所述彩信前台编辑装置包括图片上传装置(301)、图片缩放装置(302)、图片裁剪装置(304)、图片尺寸切换装置(303)、图片还原装置(305)、文字处理装置(306)、声音处理装置(307)以及彩信预览装置(308)；
所述图片上传装置(301)用以对图片的大小、格式进行校验，在上传不成功时提示不通过的原因；所述图片缩放装置(302)根据缩放规则对图片的尺寸进行调整，缩放后的宽度在55-1024，缩放后的高度在34-768，将缩放后的值赋给原图；所述图片裁剪装置(304)包括自定义裁剪装置和自选尺寸裁剪装置，按照三种常见尺寸对图片进行裁剪；所述裁剪尺寸切换装置(303)用以通过属性变换，实现动态截图效果；所述图片还原装置(305)用以获取图片对象信息，重新刷新帧对象列表，将初始上传的文件重新加载到对应的区域；所述文字处理装置(306)用以编辑文字并指定文字显示区域，所述声音处理装置(307)用以上传音频文件并实现其播放功能，所述彩信预览装置(308)用来展示编辑好的彩信内容，并自动播放彩信音频，以查看是否达到编辑彩信的效果。
CN201610532647.8A 2016-07-07 2016-07-07 一种基于网页的彩信编辑方法和装置 Active CN106168874B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610532647.8A CN106168874B (zh) 2016-07-07 2016-07-07 一种基于网页的彩信编辑方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610532647.8A CN106168874B (zh) 2016-07-07 2016-07-07 一种基于网页的彩信编辑方法和装置

Publications (2)

Publication Number Publication Date
CN106168874A CN106168874A (zh) 2016-11-30
CN106168874B true CN106168874B (zh) 2019-12-06

Family

ID=58066258

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610532647.8A Active CN106168874B (zh) 2016-07-07 2016-07-07 一种基于网页的彩信编辑方法和装置

Country Status (1)

Country Link
CN (1) CN106168874B (zh)

Families Citing this family (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108319576A (zh) * 2017-01-18 2018-07-24 珠海金山办公软件有限公司 一种生成图片素材的方法及装置
CN106874249A (zh) * 2017-02-09 2017-06-20 北京金山安全软件有限公司 一种信息显示方法、装置及终端设备
CN108228547A (zh) * 2018-02-28 2018-06-29 国云科技股份有限公司 一种基于h5的smil智能实时编辑装置和实现方法
CN109408650A (zh) * 2018-10-18 2019-03-01 弘成科技发展有限公司 电子照片批量上传异步处理平台及方法
CN111091608A (zh) * 2019-11-06 2020-05-01 稿定（厦门）科技有限公司 一种基于移动操作系统图片编辑的图片生成方法
CN110830716B (zh) * 2019-11-08 2021-08-27 南京星云数字技术有限公司 图像生成方法、装置、计算机设备和存储介质
CN112330552A (zh) * 2020-10-21 2021-02-05 重庆锐云科技有限公司 图片处理方法、服务器及计算机可读存储介质
CN113657079B (zh) * 2021-07-26 2024-02-02 浙江中控技术股份有限公司 一种罐区管理的工业流程编辑系统

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101477697A (zh) * 2009-01-21 2009-07-08 施昊 网络信息输入编辑器、网络信息输入编辑系统及方法
CN102387481A (zh) * 2011-10-08 2012-03-21 中兴通讯股份有限公司 一种彩信编辑方法及装置
CN102984384A (zh) * 2012-11-29 2013-03-20 深圳凯虹移动通信有限公司 一种彩信编辑方法及装置
CN103150745A (zh) * 2011-12-06 2013-06-12 腾讯科技（深圳）有限公司 在线编辑图片的方法和装置

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140108941A1 (en) * 2012-10-17 2014-04-17 Christopher Stephen Joel Method and Apparatus for Automatically Optimizing the Loading of Images in a Cloud-Based Proxy Service

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101477697A (zh) * 2009-01-21 2009-07-08 施昊 网络信息输入编辑器、网络信息输入编辑系统及方法
CN102387481A (zh) * 2011-10-08 2012-03-21 中兴通讯股份有限公司 一种彩信编辑方法及装置
CN103150745A (zh) * 2011-12-06 2013-06-12 腾讯科技（深圳）有限公司 在线编辑图片的方法和装置
CN102984384A (zh) * 2012-11-29 2013-03-20 深圳凯虹移动通信有限公司 一种彩信编辑方法及装置

Also Published As

Publication number Publication date
CN106168874A (zh) 2016-11-30

Similar Documents

Publication Publication Date Title
CN106168874B (zh) 一种基于网页的彩信编辑方法和装置
US8812988B2 (en) Dynamic icons associated with remote content
CN101957730B (zh) 信息处理设备和信息处理方法
CN109669617B (zh) 用于切换页面的方法和装置
US20150058708A1 (en) Systems and methods of character dialog generation
US20190392057A1 (en) Automatic generation of animated previews for presenting document differences in enterprise messaging
CN113411664B (zh) 基于子应用的视频处理方法、装置和计算机设备
US20150054853A1 (en) Systems and methods of automatic image sizing
CN112083866A (zh) 一种表情图像的生成方法和装置
CN110968314A (zh) 一种页面生成方法及装置
CN111324836A (zh) 一种页面的处理方法、装置、计算机设备和存储介质
US10042528B2 (en) Systems and methods of dynamically rendering a set of diagram views based on a diagram model stored in memory
CN111062194A (zh) 一种文档处理方法、装置、计算机设备及可读存储介质
CN111428452A (zh) 一种批注数据保存方法及装置
CN111104777A (zh) 一种文档编辑的方法、装置、计算机存储介质及终端
US20160283445A9 (en) Method and system for providing an image effects interface
CN102012914A (zh) 一种网页图像的处理方法和装置
CN114747228A (zh) 图像纪念物生成
CN111610905A (zh) 多媒体数据处理方法、装置、客户端及存储介质
CN112632921B (zh) 对多媒体数据的显示处理方法、装置、终端及存储介质
KR100530256B1 (ko) 인터넷 메시지의 자동 검색 및 링크 방법 및 장치
CN114338709B (zh) 一种用户头像同步方法、装置、存储介质及电子设备
CN110930496B (zh) 视图绘制方法、装置、电子设备和存储介质
CN113254822B (zh) 一种对象编辑方法、装置、电子设备及存储介质
EP4080507A1 (en) Method and apparatus for editing object, electronic device and storage medium

Legal Events

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