ライブラリやプラグインを使わずJavaScriptで画像のトリミングをするにはどうしたらいいか

Question

前提・実現したいこと

現在、JavaScriptを学習しているものですが、Web上で画像のトリミングをしたいなと思い調べた所、cropperというjQueryのプラグインを見つけました。しかし、学習というのもありプラグインなしのJavaScriptのみで実装したいと思うのですが、画像のトリミングのやり方を調べてもプラグインを使った記事しか見当たらずどう実装したらいいのか分かりません。

ぜひご教授いただけると幸いです。よろしくお願いいたします。

Comments

[miyabi_pudding]

どこまでやるかにもよります。
見かけ上であれば、CSSだけでもできますし、トリミングした画像をダウンロードしたり、その画像自体を出力したいのであれば、JSゴリゴリ書く必要あります。
どちらでしょうか？

[m.ts10806]

あまり、学習には向かない課題設定かと思いますが・・。
ご自身がどの程度の成果レベルを求めていて、現在どの程度の技術レベルがあるかに寄ります。

[miSaito]

JSでゴリゴリ書く方を想像していました。ゴリゴリ書くとしたらどのような流れで実装するのか教えていただきたいです。

[miSaito]

自分のレベルが一般的にどの程度かわからないですが、挑戦してみたいと思っています。

Answer 1

JavaScriptのみだと
<canvas>タグに描写して加工保存となるかな？
[HTML5] Canvasに画像を貼り付ける
Canvasを使ってお絵描きと画像の保存をしてみる【HTML5】
あと画像をどうしたいかはいろいろなパターンがあるから調べてみて

Answer 2

プラグインといってもjQueryといっても結局はJavaScriptです。
そのソースを解析してみるのが一番確実と思います。
それにトリミングといっても画像加工の技法の１つです。
「javascript 画像 加工」とかで調べて出てくる情報を参考にするのは如何でしょうか。
複数組み合わせればそれっぽいものができるかもしれません。

応用的なことを実現したい場合、大抵は小さい基礎技術の組み合わせで出来ています。
実務でする場合も要件を細分化したうえでどのような技術を組み合わせれば実現できるかを考えて検証（取捨選択も）します。

参考：teratail:プログラミングを使って作りたいものがある時の調べ方、プログラムの組み立て方