まだプログラマーですが何か？

プログラマーネタ中心。たまに作成したウェブサービス関連の話も https://twitter.com/dotnsf

タグ：clipboard

JavaScript でクリップボードを操作することは過去に何度かやっていたのですが、これまでは全てテキスト型の情報を扱っていて、バイナリ情報を扱ったことがありませんでした。

JavaScript でバイナリ情報をクリックボードにコピーすることができないのか？　というと、そういうことはなく、とりあえず実現できそうだったので共有目的でブログを書きました。

具体的には以下のようなコードを実行することでクリップボードに画像がコピーされた状態を作ることができます。PNG 画像の情報が buffer 変数に入っている状態で、以下のコードを実行します：
  //. Canvas
  var canvas = document.getElementById( 'mycanvas' );
  if( !canvas || !canvas.getContext ){
    return false;
  }

  //. Canvas の内容を PNG 画像として取得
  var png = canvas.toDataURL( 'image/png' );
  png = png.replace( /^.*,/, '' );

  //. バイナリ変換
  var bin = atob( png );
  var buffer = new Uint8Array( bin.length );
  for( var i = 0; i < bin.length; i ++ ){
    buffer[i] = bin.charCodeAt( i );
  }
  var blob = new Blob( [buffer], { type: 'image/png' } ); //. イメージバッファから Blob を生成

  :

 try{
    navigator.clipboard.write([
      new ClipboardItem({
        'image/png': blob
      })
    ]);
  }catch( err ){
    console.log( err );
  }

最初にバイナリデータを Blob 型変数に変換して、ClipboardItem 型変数にしてから navigator.clipboard.write() を実行する、という流れです。最初のバイナリデータは HTML であれば Canvas などから取得したものを想定しています。


このコードを拙作のお絵描きアプリ MyDoodles ※にも実装してみました：
https://mydoodles.herokuapp.com/

※初回はサインアップしてアカウントを作成する必要があります。作成したアカウントでログインすることで PC やスマホでお絵描きが可能になりますが、今回はクリップボードを使う前提で紹介するので、この機能を試す場合は PC のブラウザからログインして、マウスやタッチパネルでお絵描きしてください。


線の色や太さを変えながら、適当なお絵描きをして、最後に「保存」します。保存処理の一部として、上述のクリップボードコピーが実行されます：
2021100701


保存できました。同時に画像がクリップボードにコピーされているはずです：
2021100702


そのまま画像をペーストできるアプリを開いてペースト（CTRL+V など）を実行すると、クリップボードにコピーされたお絵描き画像がペーストされます。画像は特に背景色を指定しない限りは背景が透明な状態でコピーされているので、ペーストすると透過背景の画像として表示されます：
2021100703



JavaScript でもバイナリデータをクリップボードにコピーできることが確認できました。

タグ ：
#javascript
#clipboard
#blob

タイトルそのままです。なんらかの画像をコピーしてクリップボードに格納された状態から、ブラウザ画面内の <canvas> 要素内に画像データをペーストして表示する、という処理が実現できないか試してみました。

結論としてはなんとなく実現できていると思います。サンプルを公開しているのでまずは挙動を試してみてください。


PC でもスマホでも、まず対象の画像をコピーします。今回は「いらすとや」さまのこの画像を使って試してみることにします：
https://www.irasutoya.com/2021/04/blog-post_12.html

2021041402


まずは画像をコピーします。PC の場合は右クリックから「コピー」、スマホの場合は対象画像を長押しするとコピーできると思います：
2021041403


その後、こちらのページを開きます：
https://dotnsf.github.io/web_image_paste/

2021041401



表示された画面内の「ペースト」と書かれた箇所にカーソルを移動した上でペースト（貼り付け）してください（スマホの場合は「ペースト」と書かれた箇所を長押ししてペーストを選択してください）：
2021041404


うまくいくと最初にコピーした画像がブラウザ画面内の矩形部分（<canvas>）のサイズに合わせてペーストされます：
2021041405


このサンプルのソースコードはこちらで公開しています：
https://github.com/dotnsf/web_image_paste

このソースコードの中で特に該当の機能を実現しているファイルが index.html です。以下、解説を加えながらこのファイルの内容を紹介します。

まず該当部分の HTML は以下のようになっています：
<div class="container">
  <div id="canvas_div">
    <div id="cdiv">
      <div id="box" contenteditable="true">
        ペースト
      </div>
      <canvas width="80%" height="60%" id="mycanvas"></canvas>
    </div>
  </div>
</div>

画面内の「ペースト」と書かれている部分の <div id="box"> 要素に contenteditable="true" という属性がついています。これによって、この要素部分はペースト可能（Ctrl+V や右クリックメニューでペーストできる）として扱うことができるようになります。単にこの部分に画像をペーストして表示できるようにするだけであれば、この HTML だけで実現できます。

問題はここでペースト処理された画像を、この <div id="box"> 内に表示するのではなく（そのままだと <div id="box"> 内に画像がペーストされて表示されてしまうので、表示しないような処理を加えた上で）代わりにすぐ下の <canvas> 要素内に表示したい、という点です。

今回のサンプルではそういった処理は JavaScript で実現しています。まず「ペースト」と書かれた <div id="box"> 要素にペースト処理が実行されたイベントをフックして、imagePaste() 関数（後述）を実行するように指示しています。加えて false を返すことでフックしたイベントをキャンセルし、通常処理（この場合は <div id="box"> へのペースト処理）が実行されないようにしています（false を返さないと、<canvas> に画像をペーストした後でも <div id="box"> 内にも画像が残ってしまうので、それを避けるための処理です）：
$(function(){
  $('#box').on( "paste", function( e ){
    imagePaste( e );
    return false;
  });

  :
  :

そして imagePaste() 関数の実装がこちらです：
function imagePaste( event ){
  var blobimg = null;
  var items = ( event.clipboardData || event.originalEvent.clipboardData ).items;
  for( var i = 0; i < items.length; i ++ ){
    if( items[i].type.indexOf( "image" ) == 0 ){
      blobimg = items[i].getAsFile();
    }
  }

  if( blobimg != null ){
    var bloburl = URL.createObjectURL( blobimg );

    var canvas = document.getElementById( "mycanvas" );
    var ctx = canvas.getContext( '2d' );

    var img = new Image();
    img.src = bloburl;
    img.onload = function(){
      var sw = img.naturalWidth;
      var sh = img.naturalHeight;
      var dw = canvas.width;
      var dh = canvas.height;
      ctx.drawImage( img, 0, 0, sw, sh, 0, 0, dw, dh );
    };
  }
}

まずクリップボード内に登録されているデータを配列で取得し、その中に画像（"image"）が含まれているかどうかを調べます。存在している場合はそのバイナリデータを取得します。

このバイナリデータが見つかった場合は URL.createObjectURL で画像データの URL を生成して画像化し、<canvas> 内に drawImage() 関数を使って描画します。その際に画像全体の高さや幅を <canvas> 全体の高さや幅に調整して表示するので、それらの情報を取得した上でパラメータ指定しています。

これによって「ペースト」のエリアにペーストした画像データを <canvas> 内に描画し、もとの「ペースト」のエリアには描画しない、という処理が実現できました。


本当は「ペースト」のためのエリアを使わずに <canvas> だけでここに画像を直接ペーストできるようになるのが理想なんですが、実現の可否含めてその方法がわかっていません。実現方法のヒントがありましたら教えていただけると嬉しいです。

 
タグ ：
#contenteditable
#javascript
#paste
#image
#clipboard

このページのトップヘ