Good day. There are 4 pictures in the form of little animals and a JavaScript script that sets random colors for our little animals and places them on the page in the form of a canvas. So to say, so that each user has his own unique pet.

The script opens on the /generator/index.html page and a new one is generated successfully when the page is updated.

The problem is the following, I have a PHP script, which, after registering the user, enters his data into the database. How can PHP, open the /generator/index.html page after registration, pull out our little animal from there and save it somewhere on the server in PNG format?

The generator itself is lower:

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; } };
  • There are many ways to open the page with a script, but since each opening will generate a new color for the fill, it will be best to send the fill data of the picture along with the data for registration. - Fomina Catherine
  • @ Dmitry Zavarzin Thank you very much for the answer. Yes, this is exactly what you need. But I do not even understand how to implement this. It is necessary that, when accessing, my PHP script could pull out a full picture from the generation page and save it somewhere in USER_ID.png format. I would appreciate an example. Thank. - MyZik
  • Alternatively, convert the image to base64 and send this line to the server. To get the base64 representation of the image, you need to refer to the toDataURL () method of the canvas element - Fomina Ekaterina

0