VSCode上で画像編集がしたい | Luna Paint


VSCode上でちょっとした画像編集がしたい | Luna Paint – Image Editor

VSCode上でちょっとした画像編集がしたい。
そんな時に便利な拡張機能があります。Luna Paint。
現在プレビュー版ですが結構使えます。

今回はLuna Paintについてご紹介したいと思います。

解決したい課題

「画面キャプチャに赤枠をつけるだけ」というような簡単な画像編集をVSCode上でしたい。

僕はVSCodeでブログを書いています。
手順書系の記事も書いていますが、
ちょっとした画像編集はWindows標準のペイントソフトを使っています。

ツリー → エクスプローラーを開く → ペイントソフトで画像ファイル起動 → 編集

と、そこそこ手順が面倒くさい。
何とかVSCode上で編集できないか?というのが悩みでした。

拡張機能 Luna Paint インストール

変なアイコンクリック → Luna paintと入力 → インストール

画像を開きます。
サポートされている拡張子は.bmp .ico .jpg .png .webpとのこと(22/4/24時点)。

使い方

試しに
リサイズ → 赤枠 → 矢印の追加 → テキストの追加
の流れで作業していきます。

画像のリサイズ

少し大きすぎるので25%位にしてみます。

Menuを押す

Resize CanvasとResizeの2種類あります。
Resize Canvasだとイメージを切り取って全体を小さくします。
Resizeは画像自体を縮小します。ですのでResize。

幅の縮小率:25%と入力(%を入れると比率で縮小)

高さの縮小率:25%と入力(%を入れると比率で縮小)

圧縮タイプ:Smooth Edge or Hard Edge
圧縮する時にピクセルの色を平均値にするか一番近いピクセルにするかのようです。

4000px→1000pxの圧縮なら僕にはわかりません。

← Smooth (約1000px) Hard →

256pxくらいまで圧縮すると少しだけ違いがわかります。
気のせいかもしれません。

← Smooth (約250px) Hard →

赤枠の追加

□のアイコン

少し太さを調整

マウスで選択

Ctrl + Sで画像を保存したり、
適当なところをクリックすると確定します。

矢印の追加

矢印オブジェクトは無さそうなのでひし形と線でいきます。
直線の組み合わせで矢印というのもありだと思います。
△〇のアイコン → ◇のアイコン → Fill and outline

マウスで選択

線を書きます。
線のアイコン → Outline Size 3

マウスで線を引く

テキストの追加

Tのアイコン → テキストを入力する位置をマウスで選択

選択している枠をダブルクリック → 文字を入力 → OK
(ここがわからず、バグだと思い込んでテキスト入力を諦めそうになった)

文字が書き込まれる

文字が小さいのでFont sizeを調整。
フォントサイズの項目にフォーカスを合わせると矩形選択された部分が消える。
微妙に安定していなさそう(22/4/24時点)。

Fontの動きも微妙。1個しか出ない。

sans-serifを一度消せば選択できる。

まとめ

画像のがっつり編集には向きませんが、
簡単な四角やちょっとした文字を入れたい場合に便利そうです。
今後に期待の拡張機能です。

おわり

C# DXの設計書 Git GitHub GitHubサーベイ MovingWordpress Python Twapi Visual Studio VSCode Wordpress WPF ソフトウェア開発実演 ツール データサイエンス フォロワーを増やしたい ブログ収益化 ブログ記事整理プロジェクト プログラマーとは プログラミング ワードプレスの引っ越し 僕が会社をやめた理由


コメントを残す

メールアドレスが公開されることはありません。