質問: ### 実現したいこと 下記のようなリピートされる背景画像の最小単位を切り出したいのですが、どうしても時間がかかってしまいます。 今は目視での確認をしています。 また切り出す形に関しては回転のない、四角形を想定しています。 目視よりも何か早く最小単位を見つけられる方法がありますでしょうか? ※参考画像 ![](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/d236454d55fac6dcec7287c67018706b.jpeg)
回答: HTMLとCSSだけでやろうとしていますか? ピクセル単位で色を取得して、繰り返し文で複雑にプログラム組む必要があると思うんですが、JSはわかりますか? すみませんが私はPHPはわからないのでお役に立てませんが、JSであればこちらのページの「画素値の取得と変更」というところが参考になるんじゃないかと思います。 試してはいませんが、アルゴリズムとしてはこんな感じになると思います。 確認はできてないので、あくまで参考程度に。 1. まず上から1px目の横方向の規則的な並びと最小単位を調べて、color[][]に入れる。。 ``` int color[][] = new int[最小単位(px)][4]; // rgbaなので color = {{r, g, b, a}, {r, g, b, a}, ...};となる for(int i = 0; i < color.length; i ++){ color[i][0] = 左からi(px)番目の色(R)を取得; color[i][1] = 左からi(px)番目の色(G)を取得; color[i][2] = 左からi(px)番目の色(B)を取得; color[i][3] = 左からi(px)番目の色(A)を取得; } ``` 1. 上から2px目の0~color.length番目までの色をindex[][]に入れる(上のコードのaをbに変えるだけ)。 2. color[][]とindex[][]が全て同じ 又は 色の差が許容範囲かどうか調べる。 3. 1の方法を改良して、縦方向でも規則的な並びと最小単位を調べる。 4. もしリピートが見つからなければcolor[]のlengthを2倍、3倍にして4.を繰り返す。 最終的に、リピートする画像の最小単位はWidth = color.length, Height = 4.の結果 となります。