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.效果预览
点击这里预览
相关推荐
6. **滤镜处理**: 使用Canvas的像素操作能力，我们可以直接对图像的像素数据进行操作，实现各种滤镜效果。例如，文档中提到了灰度、黑白和反色三种滤镜。这些滤镜通过遍历像素数组并应用相应的算法来改变每个像素的...
动画是Canvas的一大亮点，这一章可能会介绍如何创建帧动画，利用requestAnimationFrame实现平滑的动画效果，以及运动物体的碰撞检测等。 8. **第八章**: 事件与交互 这一章将讲解如何监听用户与Canvas的交互，如...
4. **图像处理**：Canvas可以加载和操作图像，例如使用`drawImage()`方法绘制图片，或者通过`getImageData()`和`putImageData()`进行像素级操作，实现滤镜效果。 5. **动画**：Canvas适合创建流畅的动画，通过不断...
Canvas API主要由一系列方法和属性组成，这些工具让开发者能够绘制直线、曲线、圆形、矩形以及复杂的图形，并实现动画效果。以下是一些重要的Canvas知识点： 1. **绘图基础**：Canvas提供`fillRect()`，`strokeRect...
- 模糊效果：`filter`属性可以应用模糊效果或其他滤镜。 - 图像数据访问：`getImageData()`和`putImageData()`可用于获取和修改像素级别的数据。 此外，Canvas的安全性和性能也是开发者需要注意的问题。由于Canvas...
WebRTC 浏览器拍照加滤镜并保存技术详解 本文主要介绍了使用 WebRTC 技术在浏览器中拍照加滤镜并保存的技术实现。WebRTC（Web Real-Time Communication）是一种实时通信技术，允许浏览器之间实时地进行音视频通信。...
9. **离屏Canvas**：了解如何使用离屏Canvas提高性能，以及在多个Canvas之间进行数据传输。 10. **WebGL集成**：虽然不是HTML5 Canvas的内置功能，但了解如何与WebGL结合，可以实现更复杂的3D图形绘制。 11. **...
了解如何进行图像滤镜效果的实现。 6. **颜色与渐变**：创建线性渐变和径向渐变，以及如何应用渐变到图形和文本。 7. **混合模式**：探索不同的混合模式，使得图形或颜色相互叠加时产生特殊效果。 8. **动画制作*...
1. 图片滤镜：滤镜是图像处理中的关键元素，通过调整像素颜色、亮度、对比度等参数，实现各种视觉效果。ImageFilterForAndroid包含多种滤镜，如模糊、锐化、色彩平衡等，满足用户对图片的艺术化需求。 2. 手绘画板：...
- **集成使用**: Canvas和WebGL可以结合起来使用，实现更复杂的图形效果。 ```javascript const gl = canvas.getContext('webgl'); // WebGL相关代码 ``` - **性能优势**: 相比纯Canvas，WebGL能够利用GPU加速，...
利用 canvas 除了可以实现滤镜，还可以利用 离屏技术 放大镜功能。 为了方便讲解，本文分为 2 个应用部分： 实现水印和中心缩放 实现放大镜 1. 什么是离屏技术？ canvas 学习和滤镜实现 介绍过 drawImage 接口。...
《Android下实现Instagram滤镜效果详解》 在移动设备上，图像处理技术已经变得日益重要，尤其是在社交媒体应用中。Instagram作为一款全球知名的图片分享应用，其独特的滤镜效果深受用户喜爱。今天，我们将深入探讨...
3. 拖动功能：通过监听鼠标或触摸事件，计算出图片的当前位置，实现图片在Canvas上的平移。 4. 局部放大：当用户点击或选择图片的某一部分时，可以调用Canvas的局部放大部分，实现对选定区域的放大查看。 5. 下载...
对于更复杂的图像处理，如滤镜效果、裁剪、旋转等，可以借助OpenGL ES或第三方库如Picasso、 Glide 或 Glide4Engine 实现。 接着，音频处理方面，Android系统提供MediaPlayer类处理音频播放，它支持MP3、AAC、WAV等...
3. 绘制Bitmap：使用Canvas将带有滤镜的Bitmap绘制到新的Bitmap上，或者直接在ImageView等视图上显示。 四、MyColorMatrixDemo项目详解 MyColorMatrixDemo项目包含了多个示例，演示了如何通过色彩矩阵实现不同的...
开发者可以通过JavaScript控制Canvas上的每一个像素，实现动态的、交互式的图形效果。 二、Painter项目简介 Painter项目是一个基于HTML5 Canvas的开源画图工具，其代码库名为"Painter-master"。该项目的目标是提供...
【Canvas图片处理详解】 Canvas是HTML5中的一个重要组成部分，它为网页提供了在浏览器中动态绘制图形的能力。在本文中，我们将深入探讨如何利用Canvas对图片进行处理，包括图像的加载、绘制、数据获取、修改以及...
**像素级操作**：对于更精细的控制，Canvas 提供了像素级操作的方法，如 `createImageData()`、`getImageData()` 和 `putImageData()`，允许开发者直接读写画布上的像素数据，实现图像滤镜、像素艺术等特殊效果。...