Databases
StackOverflow2013
Postsdbo
POPHP divide rectangle (image) into grid?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPHP divide rectangle (image) into grid?
    primarykey
    data
    text
    <p>EDIT:</p> <p>Is there a way to jumble arround the pixelated elements? If I have a grid of lets say 100x100 - then the pixels get very small and you can see the image sort of. So I'd like to jumble the pixelated parts. Any idea?</p> <hr> <p>I'm trying to use PHP to divide an image into an equal grid, so that I could pixelate it into even parts.</p> <p>It has to do with a sort of game. There is an image uploaded by some user, and I want it to be divided into x blocks (the user selects how many blocks there should be), each of the blocks would then be pixelated. When other users complete some task - one part of the pixelated block is revealed, until all pixelated parts are gone and you're left with the original image. I really don't care if the grid elements are squares, or rectangles - I just want them to be even.</p> <p>As my starting points, I'm using the answer on this question <a href="https://stackoverflow.com/questions/8936601/php-image-pixelate">PHP image pixelate?</a></p> <p>To determine the x and y pixel size, I'm using this formula:</p> <pre><code>$gridElements = 9; $pixelate_x = $width/sqrt($gridElements); $pixelate_y = $height/sqrt($gridElements); </code></pre> <p>I've noticed that when using a number, whose square root is an integer - I get a more even grid.. But it's not perfect.</p> <p>When trying out with a 9 block grid, and using a 1160x680 image, I get the following:</p> <p><img src="https://i.stack.imgur.com/9Jw04.jpg" alt="Image 1"></p> <p>It may appear to look even, but the last row is bigger than the top 2 rows. </p> <p>When I scale it to 16, the difference is quite obvious</p> <p><img src="https://i.stack.imgur.com/Unh25.jpg" alt="enter image description here"></p> <p>And when trying out a 400 element grid (20x20) the 21th row appears.</p> <p><img src="https://i.stack.imgur.com/IFTbP.jpg" alt="enter image description here"></p> <p>So .. It's not working very well, I do want the grid to be even. Does anyone have any idea of how this could be done?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USMatt
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POPHP divide rectangle (image) into grid?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POPHP divide rectangle (image) into grid?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COLooks like that's actually row 20, not 21?
      singulars
      1. POPHP divide rectangle (image) into grid?
      1. USFoolishSeth
    2. COYou'd have to check whether `image_height / number_of_vertical_blocks` is `integer` which shouldn't be a problem with 4x4 or 20x20... are you sure your `image_height` = 680?
      singulars
      1. POPHP divide rectangle (image) into grid?
      1. USmichi
    3. COYes sorry I was counting another attempt.. Yes the 20th row is cut :/ Yes the image height is 680, you can copy the image URL and open it in a new tab.
      singulars
      1. POPHP divide rectangle (image) into grid?
      1. USMatt
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload