Получить картинку с Canvas средствами PHP

Доброго времени суток. Имеются 4 картинки в виде зверушек и скрипт JavaScript который задаёт случайные цвета нашим зверушкам, и помещает на страницу в виде canvas. Так сказать, чтобы у каждого юзера был собственный уникальный питомец.

На странице /generator/index.html открывается работает скрипт и при обновлении страницы успешно генерится новый.

Проблема следующая, у меня есть PHP-скрипт, который после регистрации юзера заносит его данные в БД. Как можно средствами PHP, после регистрации открыть страницу /generator/index.html, вытащить оттуда нашу зверушку и сохранить где-то на сервере в PNG-формате?

Сам генератор нниже:

var h = 388, w = 344;
var img = document.createElement('img');
var canvas = document.createElement('canvas');
var randNum = Math.floor(Math.random() * 4 + 1);
canvas.height = h;
canvas.width = w;
var ctx = canvas.getContext('2d');
img.src = "img/soboken.jpg";
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    var image = ctx.getImageData(0, 0, w, h);
    changeColor(image);
};
document.body.appendChild(canvas); //добавляет канвас на страницу, можно удалить
var changeColor = function(image){
    var rand1 = [getColor(), getColor(), getColor()];
    var rand2 = [getColor(), getColor(), getColor()];
    for(var i = 0; i < image.data.length; i+=4){
        if(i%5 === 0){//при этом ифе заливка становится градиентной
          var irand = Math.floor(Math.random()*2);
            rand1[irand] *= 1.00011;
            rand2[irand] *= 1.00011;
        }
        c1(image.data, i, rand1);//для первой пары цвета
        c2(image.data, i, rand2);//для второй пары цвета
        c3(image.data, i, rand1);//для двух пар сразу
    }
    ctx.putImageData(image, 0, 0);
};
var getColor = function() {
  return Math.floor(Math.random()*255);
};
var c1 = function (c, i, rand) {
    if(c[i] <= 30 && c[i+1] >= 230 && c[i+2] >= 220){
        c[i] = rand[0];
        c[i + 1] = rand[1];
        c[i + 2] = rand[2];
    }
    if(c[i] <= 30 && c[i+1] >= 230 && c[i+2] <= 30){
        c[i] = rand[0] * 0.8;
        c[i + 1] = rand[1] * 0.8;
        c[i + 2] = rand[2] * 0.8;
    }
};

var c2 = function (c, i, rand) {
    if(c[i] >= 240 && c[i+1] >= 240 && c[i+2] <= 10){
        c[i] = rand[0];
        c[i + 1] = rand[1];
        c[i + 2] = rand[2];
    }
    if(c[i] >= 240 && c[i+1] <= 10 && c[i+2] <= 10){
        c[i] = rand[0] * 0.6;
        c[i + 1] = rand[1] * 0.6;
        c[i + 2] = rand[2] * 0.6;
    }
};

var c3 = function (c, i, rand) {
      if (c[i] <= 30 && c[i + 1] >= 230 && c[i + 2] >= 220) {
          c[i] = rand[0];
          c[i + 1] = rand[1];
          c[i + 2] = rand[2];
      }
      if (c[i] <= 30 && c[i + 1] >= 230 && c[i + 2] <= 30) {
          c[i] = rand[0] * 0.8;
          c[i + 1] = rand[1] * 0.8;
          c[i + 2] = rand[2] * 0.8;
      }
      if (c[i] >= 240 && c[i + 1] >= 240 && c[i + 2] <= 10) {
          c[i] = rand[0] * 0.6;
          c[i + 1] = rand[1] * 0.6;
          c[i + 2] = rand[2] * 0.6;
      }
      if (c[i] >= 240 && c[i + 1] <= 10 && c[i + 2] <= 10) {
          c[i] = rand[0] * 0.4;
          c[i + 1] = rand[1] * 0.4;
          c[i + 2] = rand[2] * 0.4;
      }
};