用像素块遮挡图片的某部分，它可将图像变得不可识别。效果图：
HTML5代码：
<!DOCTYPE html >
<html>
<head>
<meta charset="gb2312" />
<title>canvas 图片像素化</title>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageload(){
var cnv=$$("cnvMain");
var context=cnv.getContext("2d");
var image = new Image();
image.src = "example.jpg";
image.onload=function(){
context.drawImage(image, 0, 0, 500, 736);
var imageData = context.getImageData(0, 0, cnv.width, cnv.height);
var pixels = imageData.data;
var numPixels = pixels.length;
var numTileRows = 20;
var numTileCols = 20;
var tileWidth = imageData.width/numTileCols;
var tileHeight = imageData.height/numTileRows;
for (var r = 0; r < numTileRows; r++) {
for (var c = 0; c < numTileCols; c++) {
var x = (c*tileWidth)+(tileWidth/2);//圆心坐标
var y = (r*tileHeight)+(tileHeight/2);
// Use Math.floor to convert the pixel positions to integers
var pos = (Math.floor(y)*(imageData.width*4))+(Math.floor(x)*4);
var red = pixels[pos];
var green = pixels[pos+1];
var blue = pixels[pos+2];
var a=0.9;
context.fillStyle = "rgba("+red+", "+green+", "+blue+", "+a+")";
//正方形像素化
if(3<r&&r<7&&c>8&&c<15){
context.fillRect(x-(tileWidth/2), y-(tileHeight/2), tileWidth, tileHeight);
}
};
};
}
}
</script>
</head>
<body onload="pageload();">
<canvas id="cnvMain" width="500" height="736"> </canvas>
</body>
</html>
效果及源码下载：
http://www.108js.com/article/article7/70071.html
- 大小: 134.6 KB
分享到：
相关推荐
总的来说，"Unity Shader 被遮挡的部分半透高亮显示"涉及到的知识点包括：Unity Shader基础、遮挡检测、Screen Space Occlusion、深度纹理、顶点着色器和片段着色器的使用，以及Shader中的颜色和透明度处理。...
6. **优化**：由于遮挡透明处理会增加渲染开销，因此需要对复杂场景进行优化，例如使用屏幕空间遮挡，或者对部分物体禁用遮挡透明效果。 了解并掌握Unity中的遮挡透明技术，可以帮助开发者创造出更真实、更具深度的...
针对第一张图片，由于遮挡物较窄，我使用了 Fast Marching Method 算法来实现去遮挡，该算法运算较快，对窄遮挡物去除效果较好，但对宽遮挡物（宽度大于 15 像素）进行修复时会出现模糊现象(Telea, 2004)。...
在图像处理中，可以将每个图像块视为一个向量，向量的每个维度对应像素的特征值（如颜色、亮度等）。 5. **阈值判断**：设定一个相似度阈值。如果矩形区域间的相似度高于这个阈值，那么可以认为图像大部分区域都是...
针对第一张图片，由于遮挡物较窄，我使用了 Fast Marching Method 算法来实现去遮挡，该算法运算较快，对窄遮挡物去除效果较好，但对宽遮挡物（宽度大于 15 像素）进行修复时会出现模糊现象(Telea, 2004)。...
将目标整体相关匹配算法和目标各子块相关匹配作表决的算法相结合,有效解决了运动目标被遮挡的跟踪问题.目标被遮挡,表现为某些子块被遮挡且匹配错误.对被遮挡的子块使其不参与表决,也不参与整体相关匹配的计算, 只...
行人数据集部分遮挡
本教程将深入探讨如何使用Flash技术来实现多层遮挡效果，并附带源码供学习参考。 首先，我们要理解遮挡关系的基本概念。遮挡是指在二维空间中，位于前景的物体可以部分或完全遮挡住背景的物体。在Flash中，我们通常...
在3D场景中，由于视角限制，许多物体可能被其他物体遮挡，这部分被遮挡的物体对最终的画面效果并无贡献，但仍然会占用计算资源进行渲染。"实时遮挡剔除"技术就是为了解决这个问题，它可以在不进行预处理烘焙的情况下...
基于深度学习的部分遮挡人脸识别技术是一种前沿的人脸识别方法，利用深度卷积神经网络（CNN）模型对部分遮挡的人脸图像进行有效识别。该技术在人像遮挡比例较低的情况下可以取得较好的识别效果。该技术的发展与应用...
例如，当一个不透明物体位于半透明物体前时，可以使用copyPixels将不透明物体的像素覆盖到半透明物体上，从而实现遮挡效果。 在45度游戏中，由于物体通常都是以相同的角度放置，所以可以采用一些优化策略来简化深度...
部分遮挡条件下光伏系统的MATLAB仿真研究.pdf
针对第一张图片，由于遮挡物较窄，我使用了 Fast Marching Method 算法来实现去遮挡，该算法运算较快，对窄遮挡物去除效果较好，但对宽遮挡物（宽度大于 15 像素）进行修复时会出现模糊现象(Telea, 2004)。...
针对多车辆跟踪过程中的遮挡问题, 提出一种基于梯度方向直方图的子块带权模板匹配方法。该方法先对目标分块, 并提取每块的梯度方向直方图, 然后利用核函数为各块赋予不同权值, 并采用子块带权特征匹配度度量方法计算...
《部分遮挡人脸识别的研究进展》 人脸识别作为生物特征识别技术的一种，已经在金融、教育、医疗等领域广泛应用。然而，尽管近年来技术取得了显著进步，仍面临多种挑战，其中部分遮挡问题尤为棘手。部分遮挡，如戴...
2. **优先权计算**：根据轮廓上各像素的梯度信息和可信度，计算出每个目标块的优先级。 3. **填充顺序确定**：依据优先级高低，确定修补的先后顺序。 4. **纹理合成**：根据优先级，从源区域中选取合适的样本块进行...
在这个图片库中，包含了不同类型的遮挡情况，如墨镜和帽子，这对于研究和改进遮挡人脸识别算法具有极大的价值。 首先，我们要理解“遮挡人脸识别”的概念。在正常情况下，人脸识别系统通过分析面部特征点，如眼睛、...
在压缩包内的“字幕1”文件，可能是测试用的字幕文件，或者是工具使用的配置文件，用于演示或配置遮挡功能。通常，VB6项目会包含多个文件，如.vbp项目文件、.frm窗体文件、.bas模块文件等，但由于提供的信息有限，...
本资料“关于使用上下文和深度排序的部分遮挡对象检测”深入探讨了如何通过结合上下文信息和深度排序来改善这种情况。 一、上下文信息的应用 1. **全局上下文**：全局上下文是指图像中的所有像素或区域，包括目标...
SOC是一种处理遮挡的有效方法，它旨在去除图像中的遮挡物，将遮挡部分与人脸主体分离。这一过程可能包括多个步骤，如预处理、特征提取和遮挡去除。通过使用SOC，可以分析图像中遮挡的结构特性，例如遮挡物的形状、...