毕设题目：基于HTML5概要.ppt

毕设题目：基于HTML5的图像油画效果处理 答辩人： 冯新新 指导老师： 芮雄丽 答辩日期：2015年6月4日 主要研究内容 课题研究背景与意义 如今，HTML5发展的越来越快，它不仅简化了网页的结构，而且新加入的标签，它使得HTML5更易让人理解。HTML5给予网页更好的意义，它具有良好的移动性，在设备兼容等方面都有良好的支持特性。人们对图像处理成油画效果的要求越来越高。生活里有许多软件可以对图片作油画处理，有些的油画效果并不另人满意。本设计在油画处理方面的优势在于：一方面这是专门使图片呈现油画效果的程序；另一方面这是通过新兴的语言HTML5编写出的，这具有很大的发展潜力。 主要的算法思想 用当前点四周一定范围任意一点的颜色来替代当前点颜色，最常用的是随机的采用相邻点进行替代。 2. 该算法遍历图上的每个像素，针对当前位置 (x, y) 像素，将模板范围内的所有像素灰度化，即把图像变成灰度图像，然后把像素值进一步离散化，即根据像素的灰度落入的区间，把模板内的像素依次投入到相应的桶 中。然后从这些桶中找到一个落入像素个数最多的桶，并对该桶中的所有像素求出颜色平均值，作为位置 (x, y) 的结果值。 　　上面的算法描述，用下面的示意图来表示。中间的图像是从原图灰度化+离散化（相当于 Photoshop 中的色调分离）的结果，小方框表示的是模板。下方表示的是桶阵列（8 个桶，即把0~255的灰度值离散化成 8 个区间段）。 各个功能模块的简介 1.图片的预览及显示 2.图片的灰度化 3图片马赛克处理 4油画效果处理一 5油画效果处理二 图片的预览及显示 在页面中插入图像有三步要走：第一点在HTML代码中，将光标放置在图片显示的位置；二输入img src=”image.url”，在代码中，image.url指示图像文件在服务器上的位置；三输入一个空格和/。 图像的灰度化处理 在进行灰度化的操作时，要了解RGB颜色空间模型。 R,G,B分别代表红、绿、蓝三基色的值。灰度就是黑白图像里的颜色深度，范围一般是从0到255，黑色为0，白色为255，所以黑白图片也叫灰度的图像，我们可以通过好几种方法计算灰度。 本设计所采用的算法为Gray=0.299*R+0.587*G+0.144*B; 将原来的RGB里的用Gray来替换，这样形成RGB（Gray，Gray，Gray），用它来替换以前的灰度图。 图片的马赛克处理 用RGB来作例子，红，绿，蓝。这三个颜色都有256种取值，数字越大越亮。马赛克就是圈出一个范围，一般用长方形或者正方形来圈，通过将把圈内的R值相加求平均值，同理，把G，B值的和求出，再算平均值。这样就形成了一种颜色，形成了马赛克。 本文采用当前点一定范围内的任意一点的随机一点的颜色替代当前点颜色，这样的马赛克效果还挺明显的。 油画效果处理一 其具体的运算方式如下：这个算法利用模板，会遍历图上的每个像素，针对当前的位置像素，将模板里的所有像素值灰度化，就是把图像变成灰度图像，然后把像素值进一步的离散化。至于如何使它离散，将它的像素的灰度0到255分成几个区间。依据像素的大小分在不同的区间里，计算出那个区间里的像素值最多，求出其平均值作为模板中点的像素值。经过这些操作最终使图像呈现油画效果。 油画效果处理二 另一种方式得到效果不是很明显的油画效果，最常采用当前点的四周一定范围内任意一点作为当前点的颜色，最经常采用的算法是随机的采用相邻点来代替当前点的值。如果这个范围取得太大，油画的效果就不是很明显的，所以尽量取小一点的范围，这样的油画效果会很明显。 本设计的亮点 本设计注重实际应用，与现实需求相呼应，具有很高的现实运用价值。，利用HTML5强大的脚本和布局之间的原生交互功能，可以直接用CSS和JavaScript的方式控制页面布局和操作图形图像 ，不需要借助外来插件，也不需要使用复杂的编程技巧。 同时采用两种方式得到油画效果，允许用户自由比较选择，来选出最好的一种效果。 设计时遇到的问题及解决 问题1：图片只能预览，却不能显示在网页上 解决：经查资料，知道需要创建画布。 它是通过在HTML页面中body部分，在它里面放置canvas标签创建的，当然也可以通过下面这代码创建画布实例。 Var theCanvas=document.createElement(“canvas”)； 本设计的不足和展望 油画处理的效果并不是很明显，实现的功能不是很多。 展望：希望在算法中，选取更好的模板，达