pattern = [
0, 1,
0, 2,
1, 2,
1, 0,
2, 0,
2, 1,
];
break ;
}
case1: //VIDEO_TYPE.VIDEO_TRIPED:
{
pattern = [
0,
1,
2,
];
break ;
}
case2: //VIDEO_TYPE.VIDEO_3X3:
{
pattern =
[
0, 1, 2,
2, 0, 1,
1, 2, 0,
];
break ;
}
default :
{
pattern =
[
0, 1, 2, 0, 0,
1, 1, 1, 2, 0,
0, 1, 2, 2, 2,
0, 0, 1, 2, 0,
0, 1, 1, 1, 2,
2, 0, 1, 2, 2,
0, 0, 0, 1, 2,
2, 0, 1, 1, 1,
2, 2, 0, 1, 2,
2, 0, 0, 0, 1,
1, 2, 0, 1, 1,
2, 2, 2, 0, 1,
1, 2, 0, 0, 0,
1, 1, 2, 0, 1,
1, 2, 2, 2, 0,
];
break ;
}
}
var pattern_width = [ 2, 1, 3, 5 ];
var pattern_height = [6, 3, 3, 15 ];
|
3.获取过滤数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
for ( var x = 0; x < canvasData.width; x++) {
for ( var y = 0; y < canvasData.height; y++) {
// Index of the pixel in the array
var idx = (x + y * canvasData.width) * 4;
var r = canvasData.data[idx + 0];
var g = canvasData.data[idx + 1];
var b = canvasData.data[idx + 2];
var nWidth = pattern_width[m_VideoType];
var nHeight = pattern_height[m_VideoType];
var index = nWidth * (y % nHeight) + (x % nWidth);
index = pattern[index];
if (index == 0)
var r = fclamp0255(2 * r);
if (index == 1)
var g = fclamp0255(2 * g);
if (index == 2)
var b = fclamp0255(2 * b);
// assign gray scale value
canvasData.data[idx + 0] = r; // Red channel
canvasData.data[idx + 1] = g; // Green channel
canvasData.data[idx + 2] = b; // Blue channel
canvasData.data[idx + 3] = 255; // Alpha channel
// 加上黑色的边框
if (x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))
{
canvasData.data[idx + 0] = 0;
canvasData.data[idx + 1] = 0;
canvasData.data[idx + 2] = 0;
}
}
}
|
4.写入过滤后的数据
1
|
context.putImageData(canvasData, 0, 0); |
5.效果预览
点击这里预览
相关推荐
css3实现图片模糊,canvas实现交互设计,简单,简单,简单,简单,简单,简单单
好了,canvas的介绍就先到这里,下面我们来看看javascript结合canvas实现图片的裁剪代码: 代码如下: var selectObj = null; function ImageCrop(canvasId, imageSource, x, y, width, height) { var c
3.12_Canvas来实现更复杂的滤镜效果(灰度___黑白___反色___模糊___马赛克滤镜算法)|使用Canvas进行像素
使用canvas利用像素操作实现图片马赛克效果
HTML5 canvas实现的图片三角形灰度滤镜效果源码.zip
是一个模拟摄像机拍摄电视屏幕画面时出现点状颗粒的效果,有兴趣研究的朋友可以尝试更多的效果,代码没有经过优化,只是一个粗糙的Demo,喜欢的朋友可以研究下
纯JavaScript实现HTML5 Canvas六种特效滤镜 小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件。
原生JavaScript+canvas实现图片裁剪功能,介绍css属性clip
使用canvas实现的 导入图片,图片扩大,图片缩小,选中图片,支持图片的事件,可以移动图片
2、将图片转换为canvas,canvas.toDataURL()方法设置为我们需要的格式,如:”image/webp”,”image/jpeg”,”image/png”。 3、最后将canvas转换为图片,显示在网页中。点击右键保存,就得到了不同格式的图片了。 ...
实现涂鸦基本功能、更改笔触大小颜色、更改背景图、橡皮檫、历史记录、清屏和保存功能
我们使用HTML5的canvas标签可对图片进行旋转操作,对于ie8版本以下不支持HTML5的浏览器,可使用IE特有的滤镜效果来实现... 更详细canvas图片左右旋转效果教程,http://www.sucaihuo.com/js/27.html。你也可以在素材...
使用js+canvas绘图,结合svg图形,实现标尺栏和网格效果。
使用canvas实现粒子流动效果示例的源代码,含有非常详细的代码注释。
本文实例为大家分享了canvas实现画图、滤镜效果的具体代码,供大家参考,具体内容如下 1、用canvas来实现画图的代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...
最新canvas实现曲线进度条效果 最新canvas实现曲线进度条效果
html5 canvas画布实现液体波浪动画效果 html5 canvas画布实现液体波浪动画效果
美图秀秀处理图片的功能真是没的说,那些什么小美好、小森林、白兔糖、小纸条等等的特效,说白了都是滤镜的作用,只不过滤镜的参数需要调整才能起到美化的作用,再接着起个小美好、小森林这样毫无关系却又优美无比的...
Js之canvas获取图片主色调,近似色,互补色,以及根据图片颜色获取主题配色方案详解、插件。