画像のトリミングも、Canvas API の機能だけで実現しています。鍵になるのは ctx.drawImage() という関数で、引数を工夫することで「元画像の一部だけをキャンバスに描画する」ことができます。
少し詳しく説明すると、ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) の引数はこういう意味です。sx, sy は元画像のどの座標から切り取り始めるか、sw, sh は切り取る幅・高さ、dx, dy, dw, dh はキャンバス上のどこに描くかです。つまり「元画像の左上 (sx, sy) から幅 sw・高さ sh の範囲だけを、キャンバスに貼り付ける」という動作になります。
ドラッグ操作でクロップ枠を動かすと、その矩形の座標が sx, sy, sw, sh の値にリアルタイムで反映されます。「クロップしてダウンロード」ボタンを押すと、その値をそのまま使って描画し、PNG として書き出します。
変換・ダウンロードまですべてブラウザ内で完結するため、画像がサーバーに渡ることはありません。