ITエンジニア/デザイナ向けにオープンソースを毎日紹介

HTML5になってクリップボードの内容にもある程度JavaScriptからアクセスできるようになりました。ファイルをアップロードする際にもinput(type=file)を使う以外にもドラッグ&ドロップでのアップロード、さらにペーストを使うこともできます。

そうしたクリップボードで処理されたコンテンツを扱いやすくしてくれるのがpaste.jsです。

paste.jsの使い方

ペーストされる対象は入力欄に限りません。普通のDOMでも行えます。

テキストをペーストしたところ。ちゃんと補足できています。

contentEditableの場合、フォントの装飾も反映できます。

画像の貼り付けもできます。

画像を貼り付けた場合、blobになって展開されます。後はCanvasなどに描画することもできますし、サーバへアップロードすることもできるでしょう。デスクトップであれば当たり前なコピー&ペーストもWebブラウザ上でさくさくできると便利そうです。

paste.jsはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

layerssss/paste.js: read image/text data from clipboard (cross-browser)

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2