Delaunay Triangles

function getPointsAndColours($image_path, $gridsize = 50, $variance = 5){
 
    //lazy way of opening the source image
    $image = imagecreatefromstring(file_get_contents($image_path));
 
    $width  = imagesx($image);
    $height = imagesy($image);
 
    //snap the width/height by rounding up to the nearest gridsize multiple 
    $width  = $width  + $gridsize - ($width  % $gridsize);
    $height = $height + $gridsize - ($height % $gridsize);      
 
    $points = [];
 
    //Loop over the image and populate the points
    //We add a bit of variance to make each copy unique 
    //(0 variance will pixelate/create squares)
    for($x = 0; $x <= $width; $x+=$gridsize){
        for($y = 0; $y <= $height; $y+=$gridsize){        
            $pixel = imagecreatetruecolor(1,1);    
 
            //A cheap way get the average colour of the block
            //We just resample the block to 1x1 and let the resampler worry about it,
            //After resizing the pixel colour will always be the average colour.
            imagecopyresampled($pixel, $image, 0, 0, $x, $y, 1, 1, $gridsize, $gridsize);
            $rgb = imagecolorat($pixel, 0, 0);
            $r   = ($rgb >> 16) & 0xFF;
            $g   = ($rgb >> 8) & 0xFF;
            $b   = $rgb & 0xFF;
            imagedestroy($pixel);
 
            $colour   = sprintf("#%02x%02x%02x",$r,$g,$b);
            $points[] = array($x + (rand(-$variance,$variance)),$y + rand(-$variance,$variance), $colour);                  
        }
    }
 
    return $points;
}

<div class="post_header triangles"
     data-src="/uploads/1920__60_345_Selection_048.png" 
     data-width="936" 
     data-height="468" 
     data-points=" <--snip--> ">    
</div>

var delaunay = Delaunay;
 
//Find all .triangles
var triangleImages = document.getElementsByClassName('triangles');
 
//Where we'll hold references to the source images
var fullImages = [];
 
for(var idx = 0; idx < triangleImages.length; idx++){
    var triangleImage = triangleImages[idx];
    var imageSrc = triangleImage.dataset.src;                    
    var points = triangleImage.dataset.points;
    points = eval(points); //filthy, I know.
 
    var pointsWidth = triangleImage.dataset.width;
    var pointsHeight = triangleImage.dataset.height;
 
    //Scale the points up to meet the container's size    
    //This needs a bit of work (crop/aspect ratio etc)
    //But the nifty thing is the triangles scale like a 
    //vector image.
    scale = (triangleImage.offsetWidth) / pointsWidth;
    points.forEach(function(point,idx){
        points[idx][0] = points[idx][0] * scale;
    });
 
    //Scale the height if we have it, as above.
    if(pointsHeight !== undefined){
        scale = (triangleImage.offsetHeight+50) / pointsHeight;
        points.forEach(function(point,idx){
            points[idx][1] = points[idx][1] * scale;
        });
    }
 
    //Setup a canvas and resize it to fit it's container
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = triangleImage.offsetWidth;
    canvas.height = triangleImage.offsetHeight;
 
    //The magic happens here
    var triangle_indices = delaunay.triangulate(points);
    var triangles = [];
 
    var lookup_point = function(i){ return points[i]; };
    for (var i=0; i < triangle_indices.length; i += 3) {
        var vertices = [triangle_indices[i], triangle_indices[i+1], triangle_indices[i+2]].map(lookup_point);            
        triangles.push(vertices);
    }             
 
    //Draw all the triangles.
    triangles.forEach(function(triangle){                
        ctx.fillStyle = ctx.strokeStyle = triangle[2][2];            
        ctx.beginPath();
        ctx.moveTo.apply(ctx, triangle[0]);
        ctx.lineTo.apply(ctx, triangle[1]);
        ctx.lineTo.apply(ctx, triangle[2]);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
    });            
 
    //Grab the final image and set it to the background 
    //image of the container.
    data = canvas.toDataURL();
    triangleImage.style.backgroundImage = 'url(' + data + ')';
 
    //Add an onload handler to each image to update 
    //the background to the full image once loaded
    fullImages[idx] = document.createElement('img');
    fullImages[idx].idx = idx;
    fullImages[idx].src = imageSrc;
    fullImages[idx].onload = function(idx){
        triangleImages[this.idx].style.backgroundImage = 'url(' + this.src + ')';                    
    }
}