メニューを閉じる

テクノモバイルグループ

メニューを開く

2017.11.27

プログラミング

javascriptで画像を分割してみた

アイキャッチで使用させていただいた画像はPixabay様からお借りしました。

こんにちは、新卒のshiroです。

便利なフレームワークなどが多々存在する現在、今回はあえてそれらを使わずjavascript(と、記述の簡便さを求めてjQuery)で画像の分割処理を作成していきます。

作成するものはセンタリングしてトリミングであったり、幅や高さに合わせたトリミングであったりはしません。
同一サイズのタイルが複数枚で1つになっている画像ファイルを分割するものになります。
下記がイメージとなります。

sample

なお、今回はローカルでの動作はfirefoxで確認しました。
chromeの場合、通常はクロスドメイン制約で弾かれます。

まずは画面呼出後の処理です。

onloadの中で、segmentationImage関数に画像データを渡しています。
srcを設定する前にonloadを設定しないと、動かない場合があるらしいので注意してください。
ここも関数作ってやればよかったかも……。

次に画像分割処理を作成します。

画像の分割はcanvasで行うため、作成します。
canvasを作成する際、同時にwidthとheightを指定することでcanvasサイズが初期値になってしまうトラブルを回避しています。
トラブルに関して詳しく知りたい人は調べてください。
wLengthとhLengthは画像の幅と高さをそれぞれ、先ほど指定していた幅と高さで割った数を入れています。
for文では横の数と縦の数を掛けた回数未満繰り返すようにします。
先ほどの文で

と書いている箇所があります。
ここを説明していきます。

drawImageには引数で違うものが3種類あります。
今回はその中の

を使用します。
他のdrawImageに関してはMDNを確認してください。
まずはわかりやすいsWidth以降です。
順に「切り取る幅、切り取る高さ、描写するx座標、描写するy座標、描写する幅、描写する高さ」になります。
なので最初に指定した幅、高さで切り取り、それを原点から最初に指定した幅、高さで描写するようにしています。
sxは「num % wLength」で、num=wLength-1まで1ずつ増やしていき、num=wLengthのとき再び0になるようにしています。それをwidthと掛けることで、画像の端まで行ったら最初に戻るのを繰り返すようにしています。
syは「Math.floor(num / wLength)」で0行目から始まる何行目を取得するか判定し、それにheightを掛けて高さを取得しています。
こうすることで左上から右に進み、端に着いたら一段下がって再び右に……と取得していくことが可能です。

最後に分割した画像を表示します。

“); list.css(“background-image”, “url(” + imgList[num] + “)”); $(“ul”).append(list); } }

imgListの要素数だけ回してli要素を作成、ul要素の中に入れています。
この書き方ではhtml内にul要素があり、cssでli要素のサイズが指定されている前提ですが、これで分割した画像を表示することができます。

実際作ってみると、意外と簡単ですね。

快適な画像処理ライフを!

EOF.


【テクノモバイルではエンジニア/デザイナーを積極採用中です!】

下記項目に1つでも当てはまる方は是非、詳細ページへ!
  • 自分でアプリを作ってみたい
  • ITで世の中にワクワクを生み出したい
  • 使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら


Qangaroo(カンガルー)

  • 徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
  • テストの進捗が見える。開発がスマートに進む。
  • クラウド型テスト管理ツール『Qangaroo(カンガルー)』
https://qangaroo.jp/

最近の記事

SNS共有

X CLOSE
X CLOSE
X CLOSE