JavaScript と PHP で画像をクロップ (切り抜き) する方法 - Web/DB プログラミング徹底解説

Web 画面上で画像を切り取るプログラムの作り方を説明します。 まずは出来上がりをご覧ください。ボタンを押すと右側に、切り取られた画像が表示されます。 これは単にその部分を「表示」しているだけではなく、切り取った部分だけの JPEG ファイルを作成してそれを表示しています。 このプログラムの作り方を解説します。が、いろいろな項目を知らないといけないので順を追って説明します。 プログラムの概要 まずはクライアント側は下図のようにいくつかの HTML 要素を重ね合わせています。 一番下にあるのは元画像。それに被さるのは同じ大きさの黒いレイヤーです。 これには透明度が設定されているので、一番下の画像が透けて見えます。 その上にクロップ領域を現す要素を配置しています。これは DIV 要素であり、 この要素の背景画像として元画像が指定されています。画像の内側一部を背景画像と するには backgro

[volonte]

画像の切り抜きプログラム

[hagihide]

javascript+phpによる、GUIで画像の切り抜き・生成する仕組み。

[ladado]

JavaScript と PHP を用いてオンラインで画像を切り抜くプログラムの実装方法。デモ・サンプルコード有り。