Verwenden Sie Canvas, um einen Bildtriangulationseffekt (LOW POLY) zu erzielen. Javascript-Fähigkeiten

Ich habe zufällig gesehen, wie Ovilia Threejs verwendet hat, um ein LOW POLY zu erstellen, was den Effekt der Ebenentriangulation von Bildern darstellt. Ich fand es erstaunlich, also habe ich einige Zeit damit verbracht, es selbst auszuprobieren.

Ich habe ThreeJS nicht oft verwendet, also habe ich dafür einfach die 2D-Zeichen-API von Canvas verwendet, da ThreeJS anscheinend nicht für diesen Effekt verwendet werden kann.

Gehen Sie zuerst direkt zur Demo: http://whxaxes.github.io/canvas-test/src/Funny-demo/lowpoly/index.html (Sie können es auch auf dem Handy ansehen Terminal, aber aufgrund der Berechnung ist der Betrag relativ groß und die Berechnung auf einem mobilen Gerät dauert länger als auf einem PC)

Um diesen Effekt zu erzielen, müssen Sie hauptsächlich das Bild triangulieren und eine Kantenerkennung am Bild durchführen. Von diesen beiden verwendet der erste den Delaunay-Triangulationsalgorithmus und der zweite den Sobel-Kantenerkennungsalgorithmus. Es klingt sehr hochwertig, aber beide Algorithmen verfügen über entsprechende Open-Source-Komponenten, die direkt verwendet werden können: die Delaunay-Komponente von Ironwallaby und die Sobel-Komponente von Miguel Mota.

Von diesen beiden Algorithmen ist Sobel besser, aber Delaunay ist etwas kompliziert. Wir können es in Zukunft studieren. Wenn Sie jedoch momentan nur einen Effekt erzeugen möchten, können Sie diese Komponenten trotzdem verwenden.

Nachdem nun die beiden wichtigsten Komponenten vorhanden sind, ist der Rest ganz einfach:

Zeichnen Sie zunächst das Bild auf die Leinwand:

canvas.width = (img.width > 800) ? 800 : img.width;
canvas.height = img.height * canvas.width/img.width;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height); 

Erhalten Sie dann die imgData von Canvas und geben Sie dann die neuen imgData durch Sobel-Berechnung zurück

var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var newImgData = Sobel(imgData);

Wenn wir newImgData auf die Leinwand legen, werden wir feststellen, dass das Farbbild zu einem Graustufenbild wie diesem wird:

Da die oben erwähnte Sobel-Komponente für meine Verwendung nicht sehr geeignet ist und der Code auch ungeeignet ist, habe ich entsprechende Änderungen und Optimierungen vorgenommen, die Schleifenmethode optimiert, die Berechnungsgeschwindigkeit beschleunigt und eine Rückruffunktion hinzugefügt. Einzelheiten finden Sie in der Datei sobel.js im Projekt Github

Beim Durchlaufen von imgData.data in der Sobel-Methode wird die Rückruffunktion aufgerufen und die Koordinatenpunkte mit einem Farbwert größer als 40 (dh die Graustufen liegen über RGB (40,40,40)) werden angezeigt im Rückruf aufgezeichnet. Erhalten Sie dann zufällig einen Teil der Kantenpunkte und fügen Sie dann einige zufällige Koordinaten und die Koordinatenwerte der vier Ecken hinzu. Auf diese Weise können wir die Koordinatenpunkte erhalten, die wir benötigen

var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// 收集色值大于40的边缘像素点
var collectors = [];
Sobel(imgData , function(value , x , y){
if(value > 40){collectors.push([x , y]);}
});
// 添加一些随机点
for(var i=0;i<300;i++){particles.push([Math.random()*canvas.width , Math.random()*canvas.height]);}
// 添加随机边缘点，数量为边缘点数量除于50
var length = ~~(collectors.length/50), random;
for(var l=0;l<length;l++){
random = (Math.random()*collectors.length)<<0;
particles.push(collectors[random]);
collectors.splice(random , 1);
}
// 添加四顶点坐标
particles.push([0,0] , [0,canvas.height] , [canvas.width,0] , [canvas.width,canvas.height]);

Nachdem Sie die Koordinatenpunkte erhalten haben, können Sie die Delaunay-Komponente verwenden, um das dreieckige Koordinatenarray in der richtigen Reihenfolge zu berechnen und zu erhalten. Durch Verbinden der Punkte in diesen Arrays können Sie den folgenden Effekt erzielen:

Der gewünschte Effekt besteht natürlich nicht darin, Linien zu verbinden, sondern alle Dreiecke mit Farbe zu füllen, dh die drei Koordinaten des Dreiecks zu erhalten, dann die Koordinaten des Mittelpunkts zu berechnen und dann die entsprechenden zu erhalten Koordinaten in imgData basierend auf dem RGB-Farbwert der Mittelpunktkoordinaten und füllen Sie sie dann in den dreieckigen Bereich:

// 使用delaunay三角化获取三角坐标
var triangles = Delaunay.triangulate(particles);
var x1,x2,x3,y1,y2,y3,cx,cy;
for(var i=0;i < triangles.length; i+=3) {
x1 = particles[triangles[i]][0];
x2 = particles[triangles[i+1]][0];
x3 = particles[triangles[i+2]][0];
y1 = particles[triangles[i]][1];
y2 = particles[triangles[i+1]][1];
y3 = particles[triangles[i+2]][1];
// 获取三角形中心点坐标
cx = ~~((x1 + x2 + x3) / 3);
cy = ~~((y1 + y2 + y3) / 3);
// 获取中心点坐标的颜色值
index = (cy*imgData.width + cx)*4;
var color_r = imgData.data[index];
var color_g = imgData.data[index+1];
var color_b = imgData.data[index+2];
// 绘制三角形
ctx.save();
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.closePath();
ctx.fillStyle = "rgba("+color_r+","+color_g+","+color_b+",1)";
ctx.fill();
ctx.restore();
}

Oben ist zu beachten, dass die erhaltenen Mittelpunktskoordinaten gerundet werden müssen, um die richtigen Farbparameter zu erhalten. Wenn Sie beim Abrufen des RGB-Index nicht runden möchten, können Sie Folgendes erhalten: Der Farbwert ist falsch. Weil das auf diese Weise erhaltene Pixel nicht das mittlere Pixel ist, das wir wollen.

Nachdem die Farbe erhalten wurde, ist es ein einfacher Verbindungs- und Füllvorgang. Der Endeffekt ist:

Der obige Inhalt zeigt Ihnen, wie Sie mit Leinwand den Effekt der Triangulation eines Bildes erzielen (LOW POLY). Ich hoffe, er wird Ihnen hilfreich sein!