プロジェクト

全般

プロフィール

20210214 » 履歴 » バージョン 3

健二 酒井, 2021/02/14 14:47

1 1 健二 酒井
# 20210214
2 1 健二 酒井
3 1 健二 酒井
実に半年ぶりぐらい。大体こんなことをやろうとしている
4 1 健二 酒井
5 1 健二 酒井
## 出発
6 1 健二 酒井
7 1 健二 酒井
Snipping ToolsはCtrl + C でキャプチャした画像をクリップボードに入れられる。
8 1 健二 酒井
いちいちファイル保存を経由して、MarkdownEditorに貼るのは面倒なので
9 1 健二 酒井
クリップボードに保管した画像をDATA URIスキームで貼り付けたいというひと手間省くためだけの願望を実現しようと色々調べてみた結果。
10 1 健二 酒井
11 1 健二 酒井
以下、記事のお品書き
12 1 健二 酒井
13 1 健二 酒井
1. Webとクリップボード 
14 1 健二 酒井
1. PowerShellとクリップボード
15 1 健二 酒井
1. .NETのImageのbase64エンコーディング
16 1 健二 酒井
17 1 健二 酒井
### Webでのクリップボード
18 1 健二 酒井
19 1 健二 酒井
願望からやらなきゃいけないことは
20 1 健二 酒井
21 1 健二 酒井
- Clipboardのデータを読む
22 1 健二 酒井
- 生データをbase64エンコードする
23 1 健二 酒井
24 1 健二 酒井
主に前者についてのお話。
25 1 健二 酒井
今まで使っていたexecCommandはいつ削除されてもおかしくないらしい。なんということ。
26 1 健二 酒井
27 1 健二 酒井
という訳でクリップボードの正しい扱い方について情報収集していった。代替となりそうなW3C Clipboard APIだけどまだ草案段階でMDNのドキュメントも反映されきってないという素敵な状況。
28 1 健二 酒井
まだ使えないなぁということで色々ぐぐってたら出てきたのがpaste.js: https://github.com/layerssss/paste.js 先人は偉大。
29 1 健二 酒井
ソース眺めた感じ、Navigator.clipboardオブジェクトを基本的に使いつつ、Firefox対応の処理を入れている感じ。よさげ。pasteImageなるイベントも実装してくれてるし。
30 1 健二 酒井
31 1 健二 酒井
### PowerShellとクリップボード
32 1 健二 酒井
33 1 健二 酒井
さて、paste.jsで実装しようかなと思ったんだけど、「クリップボードの画像をbase64エンコードする」ってブラウザでやるべきことか?とか疑問が沸いてきたため、例えばPowerShellとか使う方法を考えてみる。
34 1 健二 酒井
35 1 健二 酒井
1. クリップボードから画像を読む
36 1 健二 酒井
1. 読んだ画像をbase64エンコードする
37 1 健二 酒井
1. base64文字列をクリップボードに入れる
38 1 健二 酒井
39 1 健二 酒井
とかそんな処理を書けばいいのかなと。ブラウザでやるとセキュリティとかメンドウクサイ。
40 1 健二 酒井
とりあえず、使えそうなコマンドレットは以下二つ。
41 1 健二 酒井
42 1 健二 酒井
- Get-Clipboard
43 1 健二 酒井
- Set-Clipboard
44 1 健二 酒井
45 1 健二 酒井
Set-Clipboardは今回見ない。
46 1 健二 酒井
47 1 健二 酒井
リファレンス( https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.management/get-clipboard?view=powershell-5.1 )によると-Formatオプションでテキストだの画像だの音声だのと指定できるらしい、が、PowerShell 7ではこのオプション削除されているらしいのは注意。Windows想定だからPowerShell 5.1で良いや。
48 1 健二 酒井
49 1 健二 酒井
コマンド結果:
50 3 健二 酒井
51 1 健二 酒井
```
52 3 健二 酒井
PS $ Get-Clipboard -Format Image  |sv image
53 3 健二 酒井
PS $ $image.GetType()
54 1 健二 酒井
55 1 健二 酒井
IsPublic IsSerial Name                                     BaseType
56 1 健二 酒井
-------- -------- ----                                     --------
57 1 健二 酒井
True     True     Bitmap                                   System.Drawing.Image
58 1 健二 酒井
```
59 1 健二 酒井
60 1 健二 酒井
なんかBitmapクラスとかいうよくわからんのが出来たので調べよう。後参考( https://www.haruru29.net/blog/how-to-do-clipboard-operations-using-powershell/ )によるとリソースの開放とか気を付けたほうが良いみたい。まぁそうか。
61 1 健二 酒井
62 3 健二 酒井
## .NETのImageのbase64エンコーディング
63 1 健二 酒井
64 1 健二 酒井
なんか以前、System.Text.Encodingクラスとかからテキストをバイト列にしたことはあったな。そう確かPowerShell 5.1 でUTF-8で保存すると、ついてしまうBOMを外すためにやった。今回は画像なのでちょっと違うなぁ。
65 1 健二 酒井
結局のところバイトストリームを得られればいいんじゃないかな。
66 1 健二 酒井
ImageクラスのSaveMemoryStream(Stream,ImageFormat)でMemoryStreamに保存、バイト列化してConvertクラスでbase64エンコーディングとかでいけそうかなぁ。
67 1 健二 酒井
68 1 健二 酒井
69 1 健二 酒井
## 参考
70 1 健二 酒井
71 1 健二 酒井
- https://developer.mozilla.org/ja/docs/Web/API/Document/execCommand
72 1 健二 酒井
- https://qiita.com/tatesuke/items/00de1c6be89bad2a6a72
73 1 健二 酒井
- https://qiita.com/chelproc/items/9e0328e5d413afb52d0c
74 1 健二 酒井
- https://github.com/layerssss/paste.js
75 1 健二 酒井
- https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.management/get-clipboard?view=powershell-5.1
76 1 健二 酒井
- https://win.just4fun.biz/?PowerShell/PowerShell%E3%81%A7Base64%E3%81%AE%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A8%E3%83%87%E3%82%B3%E3%83%BC%E3%83%89
77 1 健二 酒井
- https://www.haruru29.net/blog/how-to-do-clipboard-operations-using-powershell/
78 2 健二 酒井
- https://blog.beaglesoft.net/entry/2011/02/14/bitmap%25e3%2583%2595%25e3%2582%25a1%25e3%2582%25a4%25e3%2583%25ab%25e3%2582%2592base64%25e3%2581%25a7%25e3%2582%25a8%25e3%2583%25b3%25e3%2582%25b3%25e3%2583%25bc%25e3%2583%2587%25e3%2582%25a3%25e3%2583%25