CN109636883A - 一种基于Canvas的广告图片处理*** - Google Patents
一种基于Canvas的广告图片处理*** Download PDFInfo
- Publication number
- CN109636883A CN109636883A CN201811522079.9A CN201811522079A CN109636883A CN 109636883 A CN109636883 A CN 109636883A CN 201811522079 A CN201811522079 A CN 201811522079A CN 109636883 A CN109636883 A CN 109636883A
- Authority
- CN
- China
- Prior art keywords
- picture
- grouping
- module
- canvas
- user
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 claims abstract description 17
- 230000008569 process Effects 0.000 claims abstract description 13
- 230000000007 visual effect Effects 0.000 claims abstract description 10
- 238000009415 formwork Methods 0.000 claims abstract description 8
- 230000000694 effects Effects 0.000 claims abstract description 5
- 239000000463 material Substances 0.000 claims description 11
- 238000010422 painting Methods 0.000 claims description 10
- 238000012550 audit Methods 0.000 claims description 7
- 230000008859 change Effects 0.000 claims description 6
- 238000007726 management method Methods 0.000 claims description 5
- 238000001914 filtration Methods 0.000 claims description 3
- 230000006835 compression Effects 0.000 claims description 2
- 238000007906 compression Methods 0.000 claims description 2
- 230000006870 function Effects 0.000 abstract description 11
- 238000003754 machining Methods 0.000 abstract description 2
- 230000015572 biosynthetic process Effects 0.000 description 4
- 238000010586 diagram Methods 0.000 description 4
- 230000004048 modification Effects 0.000 description 4
- 238000012986 modification Methods 0.000 description 4
- 238000003786 synthesis reaction Methods 0.000 description 4
- 230000009471 action Effects 0.000 description 2
- 230000008901 benefit Effects 0.000 description 2
- 230000006399 behavior Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000004069 differentiation Effects 0.000 description 1
Classifications
-
- 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
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- General Engineering & Computer Science (AREA)
- Processing Or Creating Images (AREA)
Abstract
一种基于Canvas的广告图片处理***，包括***实现流程模块、***模块、模板结构模块；所述***模块包括用户模块、模板创意模块和可视化编辑模块；由于设置可视化编辑模块，使得使用者以所见即所得的方式，设计出精美的广告创意模板，让使用者可以通过轻松地修改文字内容，替换图片等操作，瞬间生成多张属于自己的广告图片，因此本发明具有能让用户无需安装photoshop之类图片加工软件，就能直接在线使用浏览器，进行基本的图片裁剪和抠图加工，实现了最基本和常用的图片加工功能，并可按需要添加各种效果的像素算法，对图片进行反色，黑白，锐化，液化等高级的处理功能，具有良好的兼容性，可扩展性和易用性。
Description
技术领域
本发明涉及图片的处理***，具体为一种基于Canvas的广告图片处理***。
背景技术
广告主在向各个平台投放广告时，根据广告位的大小，要提供多种规格的图片。广告图片创作***，提供了大量的广告素材，广告主只需简单的修改里面的图片和文字，就能立即生成属于自己的，多种规格的广告图片目前国内提供对应服务的产品有“百度创意专家”和“腾讯社交广告”(原名广点通)等。“百度创意专家”是基于flash实现图片的合成及加工处理，而“腾讯社交广告”(原名广点通)是基于SVG实现图片的合成。使用flash来实现图片的合成及加工处理，优点在于可以实现swf动画，缺点在于flash因为安全问题，已逐渐被各大浏览器摒弃。使用SVG实现图片的合成，优点在于矢量图片在缩放时的清晰度，缺点在于难以实现图片的加工处理。
发明内容
本发明提供一种基于Canvas的广告图片处理***。
本发明采用的技术方案是：一种基于Canvas的广告图片处理***，包括***实现流程模块、***模块、模板结构模块；
所述***实现流程模块包括待处理的文本素材、图片素材或图形素材的元素、将元素实例化的前端页面以及接收前端页面压缩的具有储存原始元素数据以及储存最终生成图片的后台；
所述***模块包括用户模块、模板创意模块和可视化编辑模块；
所述模板结构模块包括多个方便用户批量操作的分组。
作为本发明的优选技术方案：所述前端包括：
将元素实例化为内存对象，并存为Json字符串；
用户对元素进行对应操作时，修改对应对象的属性；
Canvas将元素对象渲染到和合成到页面上；
使用getImageData方法，获取Canvas上的位图(RGBA)数据；
对位图对象进行Base64编码用于数据传输；
对图像进行算法操作；
根据图片规格，偏移和缩放对应全局元素的位置和大小；
对设置了裁剪和抠图的图片元素进行裁剪和容差计算；
之后进行位图(RGBA)操作，色度，对比度，饱和度，反相，各种滤镜效果；
最后前端将完成的创意数据(Json串)和生成的图片(Base64编码)进行压缩后发送给后台。
作为本发明的优选技术方案：所述后台接收前端完成的创意数据(Json串)和生成的图片(Base64编码)的压缩文件；将创意数据存储数据库，作为模板给其他用户使用，并将生成后的图片，存储在图片下载目录，用户也可直接下载图片使用。
作为本发明的优选技术方案：所述用户模块包括用户注册，登陆、邮箱验证，密码找回、用户信息完善和权限管理；所述模板创意模块包括首页条幅、再营销素材和模板审核；所述可视化编辑模块包括文本元素编辑、图片元素编辑、图形元素编辑和图片加工处理模块。
作为本发明的优选技术方案：所述分组包括矩形分组、横幅分组、竖幅分组和自定义分组。
作为本发明的优选技术方案：所述元素包括全局元素、分组元素、规格元素。
作为本发明的优选技术方案：所述全局元素与矩形分组、横幅分组、竖幅分组和自定义分组对应；所述分组元素与所述矩形元素对应；所述规格元素与所述自定义分组对应。
采用上述技术方案，本发明的有益效果是：由于设置可视化编辑模块，使得使用者以所见即所得的方式，设计出精美的广告创意模板，让使用者可以通过轻松地修改文字内容，替换图片等操作，瞬间生成多张属于自己的广告图片，因此本发明具有能让用户无需安装photoshop之类图片加工软件，就能直接在线使用浏览器，进行基本的图片裁剪和抠图加工，实现了最基本和常用的图片加工功能，并可按需要添加各种效果的像素算法，对图片进行反色，黑白，锐化，液化等高级的处理功能，具有良好的兼容性，可扩展性和易用性。
附图说明
图1为本发明的主体结构示意图；
图2为本发明的***实现流程模块示意图；
图3为本发明的***模块示意图；
图4为本发明的模板结构模块示意图。
具体实施方式：
下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本发明，而不能理解为对本发明的限制。在本发明的描述中，需要理解的是，术语“上”、“下”、“前”、“后”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。
如图1所示的一种基于Canvas的广告图片处理***，包括***实现流程模块、***模块、模板结构模块；
如图2所示所述***实现流程模块包括待处理的文本素材、图片素材或图形素材的元素、将元素实例化的前端页面以及接收前端页面压缩的具有储存原始元素数据以及储存最终生成图片的后台；
如图3所示所述***模块包括用户模块、模板创意模块和可视化编辑模块；
如图4所示所述模板结构模块包括多个方便用户批量操作的分组。
进一步的：所述前端包括：
将元素实例化为内存对象，并存为Json字符串；
用户对元素进行对应操作时，修改对应对象的属性；
Canvas将元素对象渲染到和合成到页面上；
使用getImageData方法，获取Canvas上的位图(RGBA)数据；
对位图对象进行Base64编码用于数据传输；
对图像进行算法操作；
根据图片规格，偏移和缩放对应全局元素的位置和大小；
对设置了裁剪和抠图的图片元素进行裁剪和容差计算；
之后进行位图(RGBA)操作，色度，对比度，饱和度，反相，各种滤镜效果；
最后前端将完成的创意数据(Json串)和生成的图片(Base64编码)进行压缩后发送给后台。
进一步的：所述后台接收前端完成的创意数据(Json串)和生成的图片(Base64编码)的压缩文件；将创意数据存储数据库，作为模板给其他用户使用，并将生成后的图片，存储在图片下载目录，用户也可直接下载图片使用。
进一步的：所述用户模块包括用户注册，登陆、邮箱验证，密码找回、用户信息完善和权限管理；所述模板创意模块包括首页条幅、再营销素材和模板审核；所述可视化编辑模块包括文本元素编辑、图片元素编辑、图形元素编辑和图片加工处理模块，用户模块本模块的主要功能有，用户的注册和登录，邮箱的验证，密码找回，用户信息的完善及用户的权限管理；此模块的功能浅显易懂，用户以邮箱作为登录名注册，完成验证后，登录本软件。完善自身的信息后，可以申请成为设计师。管理员可以修改用户的权限。本软件的用户权限(由高到低)包括：最高管理员：最高权限一般管理员：可以修改权限低于自身用户的权限，可以审核模板审核人员：可以审核模板，可以审核成为设计师申请设计师：可以将自己的创意提交审核，通过后进入模板库供其他用户使用使用者：可以使用模板库的模板，制作自己的创意。
模板创意模块此模块的主要功能有，根据模板的分类，类型，行业，提供便捷地筛选功能，帮助使用者快速找到合适自己使用的模板。模板的使用和预览功能，设计师可将自己创意提交审核。
可视化编辑模块此模块的为本软件的核心功能，以所见即所得的方式，让设计师可以设计出精美的广告创意模板，让使用者可以通过轻松地修改文字内容，替换图片等操作，瞬间生成多张属于自己的广告图片。
参见图4所述分组包括矩形分组、横幅分组、竖幅分组和自定义分组，所述元素包括全局元素、分组元素、规格元素，所述全局元素与矩形分组、横幅分组、竖幅分组和自定义分组对应；所述分组元素与所述矩形元素对应；所述规格元素与所述自定义分组对应，首先，一个模板是有一个或者多个分组组成的。以再营销素材为例，包括矩形分组，横幅分组，竖幅分组，以及用户自己添加的自定义分组。建立分组是为了方便用户进行批量操作。例如：平台需要用户提供400*300，300*250,200*200三张广告图片，从要求图片的宽高比来看，都属于矩形分组。那么适合矩形的元素布局对于这三张图片都是适用的，用户可以直接操作矩形分组的某个分组或全局元素，本软件会根据特定的算法，对矩形内所有规格内的对于元素执行同样的操作。其次，元素分为全局元素，分组元素和规格元素。之所以为元素设置这三种属性，是为了能在统一操作的同时，保持各个分组的元素的特性。
例如：广告图片中的公司名称，不考虑特殊情况的话，不论什么规格，其文字内容应该是一样的，那么用户只需要添加一个全局的文本元素，软件就会自动为所有分组添加一个对应的文本元素，用户只要修改任意一处全局文本元素的内容，则所有分组内所有规格的对应文本的内容都会随之改变。而广告图片的背景，则应该使用分组元素，因为如果将一张横幅的图片强制拉伸为竖幅，会相当难看，此时用户应当在横幅和竖幅分组中，分别添加适合此分组宽高比的分组图片元素作为背景图。对于某些特别的规格，用户也可以添加规格元素，规格元素是独立的个体，用户可以随意调整，而不对其他分组和规格产生任何影响。最后，元素的种类有文本元素，图片元素，图形元素。不同的元素有共通的属性，位置，缩放，透明度，旋转等等。也有自己独有的属性，比如文字有字体，有阴影，图形有种类，图片有裁剪。元素的属性也有全局和独有之分。例如，上面所举例的文本元素，文本内容就是全局属性的，只要此文本元素是全局或者分组的，那么修改其内容就会自动修改全局或者分组的文本内容。但如果一家公司的名称特别长，在矩形和横幅中宽度足够显示，而在竖幅分组中宽度不足，只能设置竖排显示，如果竖排属性是全局的，就无法通过全局元素来调整了，所以文本元素的竖排属性是独立的。对分组元素进行统一操作后，虽然本软件会通过合理的算法进行批量操作，但也不能保证用户一定满意，用户会有时会需要对某个规格的元素进行微调，所以元素的位置，缩放，旋转也是独立的。通过对图片规格的分组，对元素的全局/分组设置，以及对于元素属性全局/独立的区分，本软件才很好的将便捷性和定制化做了很好地融合。
以上结合附图对本发明的实施方式作了详细说明，但本发明不限于所描述的实施方式。对于本领域的技术人员而言，在不脱离本发明原理和精神的情况下，对这些实施方式进行多种变化、修改、替换和变型，仍落入本发明的保护范围内。
Claims (7)
1.一种基于Canvas的广告图片处理***，其特征在于：包括***实现流程模块、***模块、模板结构模块；
所述***实现流程模块包括待处理的文本素材、图片素材或图形素材的元素、将元素实例化的前端页面以及接收前端页面压缩的具有储存原始元素数据以及储存最终生成图片的后台；
所述***模块包括用户模块、模板创意模块和可视化编辑模块；
所述模板结构模块包括多个方便用户批量操作的分组。
2.根据权利要求1所述的基于Canvas的广告图片处理***，其特征在于：所述前端包括：
将元素实例化为内存对象，并存为Json字符串；
用户对元素进行对应操作时，修改对应对象的属性；
Canvas将元素对象渲染到和合成到页面上；
使用getImageData方法，获取Canvas上的位图(RGBA)数据；
对位图对象进行Base64编码用于数据传输；
对图像进行算法操作；
根据图片规格，偏移和缩放对应全局元素的位置和大小；
对设置了裁剪和抠图的图片元素进行裁剪和容差计算；
之后进行位图(RGBA)操作，色度，对比度，饱和度，反相，各种滤镜效果；
最后前端将完成的创意数据(Json串)和生成的图片(Base64编码)进行压缩后发送给后台。
3.根据权利要求1所述的的基于Canvas的广告图片处理***，其特征在于：所述后台接收前端完成的创意数据(Json串)和生成的图片(Base64编码)的压缩文件；将创意数据存储数据库，作为模板给其他用户使用，并将生成后的图片，存储在图片下载目录，用户也可直接下载图片使用。
4.根据权利要求1所述的的基于Canvas的广告图片处理***，其特征在于：所述用户模块包括用户注册，登陆、邮箱验证，密码找回、用户信息完善和权限管理；所述模板创意模块包括首页条幅、再营销素材和模板审核；所述可视化编辑模块包括文本元素编辑、图片元素编辑、图形元素编辑和图片加工处理模块。
5.根据权利要求1所述的的基于Canvas的广告图片处理***，其特征在于：所述分组包括矩形分组、横幅分组、竖幅分组和自定义分组。
6.根据权利要求1所述的的基于Canvas的广告图片处理***，其特征在于：所述元素包括全局元素、分组元素、规格元素。
7.根据权利要求5或6所述的的基于Canvas的广告图片处理***，其特征在于：所述全局元素与矩形分组、横幅分组、竖幅分组和自定义分组对应；所述分组元素与所述矩形元素对应；所述规格元素与所述自定义分组对应。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811522079.9A CN109636883A (zh) | 2018-12-13 | 2018-12-13 | 一种基于Canvas的广告图片处理*** |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811522079.9A CN109636883A (zh) | 2018-12-13 | 2018-12-13 | 一种基于Canvas的广告图片处理*** |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109636883A true CN109636883A (zh) | 2019-04-16 |
Family
ID=66073464
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811522079.9A Pending CN109636883A (zh) | 2018-12-13 | 2018-12-13 | 一种基于Canvas的广告图片处理*** |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109636883A (zh) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110727493A (zh) * | 2019-09-30 | 2020-01-24 | 科大国创软件股份有限公司 | Ugc模式驱动ui可视化*** |
| CN111459369A (zh) * | 2020-04-13 | 2020-07-28 | 深圳康佳电子科技有限公司 | 一种界面元素的筛选方法、智能终端及存储介质 |
| CN112199621A (zh) * | 2020-12-07 | 2021-01-08 | 深圳市房多多网络科技有限公司 | 快速生成海报的方法、装置及计算机设备 |
| CN112215648A (zh) * | 2020-10-12 | 2021-01-12 | 上海酷量信息技术有限公司 | 一种适应多广告平台的图片处理***及方法 |
| CN112269957A (zh) * | 2020-11-11 | 2021-01-26 | 北京联创信安科技股份有限公司 | 图片处理方法、装置、设备及存储介质 |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105678581A (zh) * | 2016-01-01 | 2016-06-15 | 广州筷子信息科技有限公司 | 一种广告自动排版方法及*** |
| CA2914612A1 (en) * | 2014-12-20 | 2016-06-20 | Smart Technologies Ulc | Zones for a collaboration session in an interactive workspace |
| CN106227737A (zh) * | 2016-07-11 | 2016-12-14 | 北京创意魔方广告有限公司 | 快速生成广告图片平台 |
| CN106250561A (zh) * | 2016-08-17 | 2016-12-21 | 青岛海信电器股份有限公司 | 一种基于HTML canvas的焦点框绘制方法及装置 |
| CN107392982A (zh) * | 2017-07-27 | 2017-11-24 | 深圳章鱼信息科技有限公司 | 在线设计方法、装置及*** |
| CN107766359A (zh) * | 2016-08-17 | 2018-03-06 | 广州市动景计算机科技有限公司 | 一种将页面内容转换为图片的方法、装置以及计算设备 |
| CN108550060A (zh) * | 2018-05-08 | 2018-09-18 | 多盟睿达科技（中国）有限公司 | 一种多尺寸广告的生成方法及*** |
-
2018
- 2018-12-13 CN CN201811522079.9A patent/CN109636883A/zh active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CA2914612A1 (en) * | 2014-12-20 | 2016-06-20 | Smart Technologies Ulc | Zones for a collaboration session in an interactive workspace |
| CN105678581A (zh) * | 2016-01-01 | 2016-06-15 | 广州筷子信息科技有限公司 | 一种广告自动排版方法及*** |
| CN106227737A (zh) * | 2016-07-11 | 2016-12-14 | 北京创意魔方广告有限公司 | 快速生成广告图片平台 |
| CN106250561A (zh) * | 2016-08-17 | 2016-12-21 | 青岛海信电器股份有限公司 | 一种基于HTML canvas的焦点框绘制方法及装置 |
| CN107766359A (zh) * | 2016-08-17 | 2018-03-06 | 广州市动景计算机科技有限公司 | 一种将页面内容转换为图片的方法、装置以及计算设备 |
| CN107392982A (zh) * | 2017-07-27 | 2017-11-24 | 深圳章鱼信息科技有限公司 | 在线设计方法、装置及*** |
| CN108550060A (zh) * | 2018-05-08 | 2018-09-18 | 多盟睿达科技（中国）有限公司 | 一种多尺寸广告的生成方法及*** |
Non-Patent Citations (1)
| Title |
|---|
| ITWANGYANG520: "web前端：Canvas 基础（一）", 《CSDN》 * |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110727493A (zh) * | 2019-09-30 | 2020-01-24 | 科大国创软件股份有限公司 | Ugc模式驱动ui可视化*** |
| CN111459369A (zh) * | 2020-04-13 | 2020-07-28 | 深圳康佳电子科技有限公司 | 一种界面元素的筛选方法、智能终端及存储介质 |
| CN112215648A (zh) * | 2020-10-12 | 2021-01-12 | 上海酷量信息技术有限公司 | 一种适应多广告平台的图片处理***及方法 |
| CN112269957A (zh) * | 2020-11-11 | 2021-01-26 | 北京联创信安科技股份有限公司 | 图片处理方法、装置、设备及存储介质 |
| CN112199621A (zh) * | 2020-12-07 | 2021-01-08 | 深圳市房多多网络科技有限公司 | 快速生成海报的方法、装置及计算机设备 |
| CN112199621B (zh) * | 2020-12-07 | 2021-03-09 | 深圳市房多多网络科技有限公司 | 快速生成海报的方法、装置及计算机设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109636883A (zh) | 一种基于Canvas的广告图片处理*** | |
| Maher et al. | Understanding virtual design studios | |
| CN110991157B (zh) | 基于电子文件可信技术的工程质量评定***设计方法 | |
| US7113642B2 (en) | Method and apparatus for encoding/decoding image data | |
| US20050278625A1 (en) | Dynamic document and template previews | |
| CN104657419B (zh) | 一种定制信纸模板的处理方法和*** | |
| CN105528418B (zh) | 一种设计文档生成方法及装置 | |
| CN109933752A (zh) | 一种导出电子文档的方法和装置 | |
| CN101038650B (zh) | 网络线上即时印刷服务***与方法以及编辑器 | |
| WO2011080497A1 (en) | Systems and methods for processing online and print material | |
| US20150195421A1 (en) | Method for water-marking digital books | |
| CN102105862A (zh) | 实体交互的自动用户界面生成 | |
| CN110543303A (zh) | 一种可视化业务平台 | |
| CN109445794B (zh) | 一种页面构造方法及装置 | |
| CN105630747A (zh) | 一种应用于特种设备行业的检验报告专业化***及方法 | |
| CN108269295A (zh) | 一种幻灯片主题色彩智能引用的方法及装置 | |
| US20090063998A1 (en) | Method, system, and program product for collaborative diagram editing | |
| CN108376174A (zh) | 支持结构化与非结构化大数据融合的方法和装置 | |
| CN103942046A (zh) | 一种基于对象的统一模型开发方法 | |
| CN114296660A (zh) | 一种基于Vue框架的标签打印方法 | |
| CN109033157B (zh) | 一种基于自定义搜索条件树的复杂数据检索方法和*** | |
| CN105913102A (zh) | 一种二维码的生成方法及装置 | |
| US10402707B2 (en) | Interactive optical code creation | |
| CN117522094A (zh) | 一种***管理方法、平台、电子设备及存储介质 | |
| CN106155754A (zh) | 一种显示模板的处理方法及装置 |
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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190416 |