问题
I'm making a little web-game and I'm looking for a method to manipulate an image per pixel and store it in a mysql db. To be precise, I need to be able to do the following:
- load image (250 x 250px) from mysql db on screen (image is not visible. For example, the alpha of each pixel is 0);
- Randomly pick a few pixels en set the alpha to 1;
- Save the new image over the old image in the mysql db
- load new image with a number of pixels visible;
- randomly pick a few pixels en set the alpha to 1; etc..
I've managed to get this thing worked, but in an very inefficient way. I have thousands of records in my mysql db and in each record is a pixel stored with the right position, color and visibility. When the image is rendered to the screen, each record needs to be read out.
I've looked at html5 canvas but haven't been able yet to figure out the right way. Actually, at this moment I don't know what the best way is. Hope someone can help here.
回答1:
There are a few ways to do this.
Yes, canvas is what you want. You can use canvas to manipulate image data (see pixel manipulation with Canvas on the MDN).
For saving to your server and restoring you should not be using thousands of records. You should be using something like a single base64 string that describes your image. The canvas API has a method for retrieving this called toDataURL().
回答2:
Sounds to me like what you want is a linear congruential random number generator. They are actually a LOT LOT LOT more complicated to describe (or even write the name of!) than they are to program and use. They're really easy to use.
http://en.wikipedia.org/wiki/Linear_congruential_generator
Using these, you can pass just the current seed value (which is the pixel you picked to set first, or which pixel you previously set, into the expression:
seed = ((seed * multiplier) + increment) % modulus.
Pick the values as follows:
seed = your initial value must be bigger than 0 and smaller than modulus.
modulus = the total number of pixels in your image (ie, width * height), which must be 2^31 or less to work in PHP. It can be a bit more, though your code will be less efficient: the next power of 2 larger than the number of pixels might be a good choice.
increment = Easiest: "1". Or, a prime number at most 23,622,320,123. Or if not that, then at the very least relatively prime with the modulus, and smaller than (2^53-(modulus*multiplier)).
multiplier:
- one more than a number divisible by all prime factors of the modulus.
- one more than a multiple of 4 if the modulus is a multiple of 4.
- less than 2^22.
- If you pick a modulus that's a power of 2, then this multiplier can just be (smallish prime number * 4) + 1. So, 5, or 9, or something.
This careful selection of values will mean that when you repeat that seed generation code modulus times, you will never get a repeated number - you will semi-randomly "select" every single pixel only once.
If your modulus is larger than width * height, you will sometimes select a pixel that's not "in" your image: if your image is 10x10, or 100 pixels, and you picked a modulus of 128 (next largest power of 2), then you'd have a chance of it picking numbers between 100 and 127. In this case you can just loop it again until you get a valid pixel, or just change fewer pixels.
But if it picked a pixel from 0 to 99, that'd be the pixel to use. So for a 10x10 image, a seed of 37 might mean fourth row, eighth pixel.
Specifically:
$pixelX = $seed / $width;
$pixelY = $seed % $width;
来源：https://stackoverflow.com/questions/13146323/change-image-per-pixel-and-save-to-db