[发明专利]一种基于Canvas的广告图片处理系统

说明书

一种基于Canvas的广告图片处理系统，包括系统实现流程模块、系统模块、模板结构模块；所述系统模块包括用户模块、模板创意模块和可视化编辑模块；由于设置可视化编辑模块，使得使用者以所见即所得的方式，设计出精美的广告创意模板，让使用者可以通过轻松地修改文字内容，替换图片等操作，瞬间生成多张属于自己的广告图片，因此本发明具有能让用户无需安装photoshop之类图片加工软件，就能直接在线使用浏览器，进行基本的图片裁剪和抠图加工，实现了最基本和常用的图片加工功能，并可按需要添加各种效果的像素算法，对图片进行反色，黑白，锐化，液化等高级的处理功能，具有良好的兼容性，可扩展性和易用性。

技术领域

本发明涉及图片的处理系统，具体为一种基于Canvas的广告图片处理系统。

背景技术

广告主在向各个平台投放广告时，根据广告位的大小，要提供多种规格的图片。广告图片创作系统，提供了大量的广告素材，广告主只需简单的修改里面的图片和文字，就能立即生成属于自己的，多种规格的广告图片目前国内提供对应服务的产品有“百度创意专家”和“腾讯社交广告”(原名广点通)等。“百度创意专家”是基于flash实现图片的合成及加工处理，而“腾讯社交广告”(原名广点通)是基于SVG实现图片的合成。使用flash来实现图片的合成及加工处理，优点在于可以实现swf动画，缺点在于flash因为安全问题，已逐渐被各大浏览器摒弃。使用SVG实现图片的合成，优点在于矢量图片在缩放时的清晰度，缺点在于难以实现图片的加工处理。

发明内容

本发明提供一种基于Canvas的广告图片处理系统。

本发明采用的技术方案是：一种基于Canvas的广告图片处理系统，包括系统实现流程模块、系统模块、模板结构模块；

所述系统实现流程模块包括待处理的文本素材、图片素材或图形素材的元素、将元素实例化的前端页面以及接收前端页面压缩的具有储存原始元素数据以及储存最终生成图片的后台；

所述系统模块包括用户模块、模板创意模块和可视化编辑模块；

所述模板结构模块包括多个方便用户批量操作的分组。

作为本发明的优选技术方案：所述前端包括：

将元素实例化为内存对象，并存为Json字符串；

用户对元素进行对应操作时，修改对应对象的属性；

Canvas将元素对象渲染到和合成到页面上；

使用getImageData方法，获取Canvas上的位图(RGBA)数据；

对位图对象进行Base64编码用于数据传输；

对图像进行算法操作；

根据图片规格，偏移和缩放对应全局元素的位置和大小；

对设置了裁剪和抠图的图片元素进行裁剪和容差计算；

之后进行位图(RGBA)操作，色度，对比度，饱和度，反相，各种滤镜效果；

最后前端将完成的创意数据(Json串)和生成的图片(Base64编码)进行压缩后发送给后台。

作为本发明的优选技术方案：所述后台接收前端完成的创意数据(Json串)和生成的图片(Base64编码)的压缩文件；将创意数据存储数据库，作为模板给其他用户使用，并将生成后的图片，存储在图片下载目录，用户也可直接下载图片使用。

作为本发明的优选技术方案：所述用户模块包括用户注册，登陆、邮箱验证，密码找回、用户信息完善和权限管理；所述模板创意模块包括首页条幅、再营销素材和模板审核；所述可视化编辑模块包括文本元素编辑、图片元素编辑、图形元素编辑和图片加工处理模块。