shingoushori's dialy

音信号処理を専ら研究していた元博士後期課程の学生によるメモ

canvas で画像の円形な一部分を回してみた

エフェクターの改造とかやってみています。
つまみグリグリしながらオリジナルと比較動画とかやりたいんですけど、
一枚撮った画像でグリグリ回せれば?と思ってしまったので作ってみました。
これ自体はソフトでやればってものですが、この先にもっとやりたいことがある!!
Drop files here に画像ファイルを Drag and Drop してみてください ↓ 
↓ 画像の下にずれていった窓たちで操作できます 説明は下にて ↓

Drop files here

 

水平 垂直 (画像上でクリックすると値が入ります)
半径 (回す)角度 を入れて [処理] ボタン押すと回るはずです
複数回せるので、回すやつを選ぶのが "対象" です 回すやつは"clip"と呼びます
別の "対象" にかつて設定した値 = [現状] を [現状] ボタンで復帰できます
その回すやつ "clip" を [clip追加] で追加できます
そして [exportPNG] で PNG がダウンロードできるはずです


[参考文献]

Javascriptでcanvas画像を回転させる

HTML5のCanvasで画像をパス(丸)でマスクする

canvasでクリックされた位置の座標を取得・表示する

JavaScriptでselect要素にoptionを追加する方法を現役エンジニアが解説【初心者向け】

Canvas.toDataURL() - キャンパスをデータURIに変換する

Exporting to image #989

html5において、複数のcanvasでレイヤーを作っていて、一枚の画像に書き出したいの...