WindowsではWin + Shift + Sでスクリーンショットを撮影できますね。macではCommand + Shift + 4とかです。これらのショートカットキーにより、スクリーンショットを簡単にクリップボードに保存しておくことができます。
こちらをbase64として出力したい。しかしながら一旦ファイルとして保存するのも面倒くさい。
この手のツールは大体検索すれば出回ってると思ったんですがね。こことかファイルをアップロードすることには対応していてもクリップボードからのペーストには対応していません。そこで簡易的なツールを作成しました。同じことを考えたことがある方は是非使ってやってください。
雑に作ったのでソースは載せません。まあ秘匿してもいないですが。スタイリング？そんなものは知らぬ。
とはいえここはQiitaですので、はまりポイントだけ簡単に書いておきます。
dropイベントでe.preventDefaultしてるのにページ遷移する
dragoverイベントでも同じ操作が必要だったようです。これって常識？
element.addEventListener('dragover', e => {
e.preventDefault();
});
「クリックしてコピー」を実現するのに未だにexecCommandを使わせようとする記事がたくさんヒットする
MDNに「廃止されました」って書いてあるやん！勘弁してくだはれ。
今はAsync Clipboard APIを使うのが普通です。騙されないようにしましょう。
ただ「Secure context」でのみ有効だそうです。まあ今時httpなサイトなんて存在しないので問題ないとは思いますが。
あとは
バイナリデータをbase64に変換する手法は巷に記事があふれているのであえて言及しません。強いて挙げるならばFileReaderクラスのAPIが未だにPromiseに対応していなくて使いづらいといった点でしょうか。早く改善してほしいですね。