Commentaire: Il s'agit d'un effet de simulation de l'effet des particules ponctuelles lors de la prise de vue des écrans de télévision par une caméra. Les amis qui sont intéressés par la recherche peuvent essayer plus d'effets. Le code n'a pas été optimisé, c'est juste une démo approximative. Des amis qui l'aiment peuvent l'étudier.
Il s'agit d'un effet spécial très intéressant, ce qui simule l'effet de particules en forme de point apparaissant lorsque la caméra tire l'écran du téléviseur. La taille des particules est réalisée par la matrice de transformation et peut être ajustée arbitrairement. Les amis qui sont intéressés par la recherche peuvent essayer plus d'effets. Le code n'a pas été optimisé, c'est juste une démo approximative, que tout le monde peut améliorer par eux-mêmes.1. Obtenez des données d'image
img.src = '';
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext (2d);
context.DrawImage (IMG, 0, 0);
var canvasdata = context.getImagedata (0, 0, canvas.width, canvas.height);
2. Réglez la matrice du filtre
var m_videotype = 0;
Var Pattern = new Array ();
commutateur (m_vidéotype)
{
case0: //video_type.video_staggered:
{
motif = [
0, 1,
0, 2,
1, 2,
1, 0,
2, 0,
vingt-et-un,
]]
casser;
}
case1: //video_type.video_triped:
{
motif = [
0,
1,
2,
]]
casser;
}
case2: //video_type.video_3x3:
{
modèle =
[
0, 1, 2,
2, 0, 1,
1, 2, 0,
]]
casser;
}
défaut:
{
modèle =
[
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,
]]
casser;
}
}
var pattern_width = [2, 1, 3, 5];
var pattern_height = [6, 3, 3, 15];
3. Obtenez des données filtrées
pour (var x = 0; x <canvasdata.width; x ++) {
pour (var y = 0; y <canvasdata.height; y ++) {
// Index du pixel dans le tableau
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 = motive_width [m_videotype];
var nHeight = motive_height [m_videotype];
var index = nwidth * (y% nheight) + (x% nwidth);
index = modèle [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);
// attribue la valeur de l'échelle grise
canvasdata.data [idx + 0] = r; // canal rouge
canvasdata.data [idx + 1] = g; // canal vert
canvasdata.data [idx + 2] = b; // canal bleu
canvasdata.data [idx + 3] = 255; // canal alpha
// Ajouter une bordure noire
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. Écrivez des données filtrées
context.putImagedata (Canvasdata, 0, 0);
5. Matériaux de référence
Dai Zhenjun ImageFilter Open Source Project