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

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


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




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



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





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



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



このサンプルのソースコードはこちらで公開しています：
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

バックエンドの技術を使わずにウェブのフロントエンドだけで、つまり HTML と JavaScript だけで QR コードリーダーを作ることに挑戦してみました：



まずは完成品で実際の挙動を確認ください。PC またはスマホで（できればスマホで）こちらの URL にアクセスしてください：
https://dotnsf.github.io/web_qrcode/





↑Github Pages で公開しているページなので、フロントエンドだけで作られていることがわかると思います。クロスオリジンな AJAX なども使ってないので、興味ある方はソースコードも確認してください。

「ファイルを選択」ボタンをクリックします。スマホの場合はカメラが起動するので QR コードを撮影してください。また PC の場合は画像選択ボックスが表示されるので、QR コードが撮影された画像を選択してください。

すると画面下部に画像が表示され、同時に画面内の QR コードが（存在していれば）解析され、解析結果の文字列データが表示されます：



フロントエンドだけでここまでできるので、後は例えばこの結果が URL 文字列になっていれば、そのアドレスのページを開くこともできますし、テキストデータだけを読み取った上でバックエンドサーバーにデータを送信する、といったサーバーとの連携処理も容易に可能です。


【ソースコードの解説】
ソースコードはこちらで MIT ライセンスで公開しています（GitHub のウェブホスティングである Github Pages を使ってそのままサービスも公開しています）：
https://github.com/dotnsf/web_qrcode

特にサービスの肝である index.html ファイルはこちらから参照いただけます。実質的にこの１ファイルだけでカメラ起動から撮影、QR コード解析まで実現しています：
https://github.com/dotnsf/web_qrcode/blob/main/index.html


まずスマホでカメラを起動するボタンの部分は以下の HTML コードで実現しています（PC ブラウザでこのボタンをクリックすると、保存済みの画像ファイルを選択するダイアログが表示されます）：

<input type="file" accept="image/*" capture="camera" name="file" id="file-image"/>

type="file" で accept="image/*" capture="camera" 属性のついた <input> タグをクリックすると、カメラ内蔵機種の場合はそのカメラが起動し、撮影した画像を選択したことになります。（PCのなど）カメラ内蔵機種でない場合は普通にファイル選択画面になりますが、accept 属性により画像ファイルしか選択できません（要するにここで QR コードを撮影するか、QR コードが撮影された画像を選択することを想定しています）。

また jQuery を使った JavaScript によって以下の処理が画面ロード直後に実行されています：

var canvas = null;
var ctx = null;
$(function(){
  canvas = document.getElementById( 'mycanvas' );
  ctx = canvas.getContext( '2d' );

  var file_image = document.getElementById( 'file-image' );
  file_image.addEventListener( 'change', selectReadFile, false );
});

HTML 内下部に設置された <canvas> と、そのコンテキストを取得します（この <canvas> に画像が描画されることになりますが、その処理は後述します）。また上述の <input> タグの値が変化した時（＝カメラで撮影するか、画像ファイルが選択された時）に selectReadFile() 関数が実行されるよう定義されています：

<div>
  <canvas id="mycanvas"></canvas>
</div>

したがってカメラで撮影するか画像ファイルを選択すると、以下の JavaScript コードが実行されます：

function selectReadFile( e ){
  var file = e.target.files;
  var reader = new FileReader();
  reader.onload = function(){
    readDrawImg( reader, canvas, 0, 0 );
  }
  reader.readAsDataURL( file[0] );
}

HTML5 の Filesystem API を使って撮影された画像ファイルを読み込み、その内容を上述で取得した <canvas> に描画するための関数 readDrawImg() が実行されます。つまり撮影した画像が画面内にも表示されるようになります。

readDrawImg() 関数および、この中で実行される多くの関数の中身は以下のようになっています：

function readDrawImg( reader, canvas, x, y ){
  var img = readImg( reader );
  img.onload = function(){
    var w = img.width;
    var h = img.height;
    printWidthHeight( 'src-width-height', true, w, h );

    // resize
    var resize = resizeWidthHeight( 1024, w, h );
    printWidthHeight( 'dst-width-height', resize.flag, resize.w, resize.h );
    drawImgOnCav( canvas, img, x, y, resize.w, resize.h );
  }
}

function readImg( reader ){
  var result_dataURL = reader.result;
  var img = new Image();
  img.src = result_dataURL;

  return img;
}

function drawImgOnCav( canvas, img, x, y, w, h ){
  canvas.width = w;
  canvas.height = h;
  ctx.drawImage( img, x, y, w, h );

  checkQRCode();
}

function resizeWidthHeight( target_length_px, w0, h0 ){
  var length = Math.max( w0, h0 );
  if( length <= target_length_px ){
    return({
      flag: false,
      w: w0,
      h: h0
    });
  }

  var w1;
  var h1;
  if( w0 >= h0 ){
    w1 = target_length_px;
    h1 = h0 * target_length_px / w0;
  }else{
    w1 = w0 * target_length_px / h0;
    h1 = target_length_px;
  }

  return({
    flag: true,
    w: parseInt( w1 ),
    h: parseInt( h1 )
  });
}

function printWidthHeight( width_height_id, flag, w, h ){
  var wh = document.getElementById( width_height_id );
  wh.innerHTML = '幅: ' + w + ', 高さ: ' + h;
}

まず readImg() 関数の中で Filesystem API を用いて画像ファイルを読み込み、その結果を Image オブジェクトの src 属性に代入します（これで Image オブジェクトを drawImgOnCav() 関数で <canvas> に表示すると読み込んだ画像が表示されます）。またこの結果から画像の幅および高さを取得して、画面内に元画像のサイズとして表示されます。

drawImgOnCav() 関数の最後に checkQRCode() 関数が実行されています。画像の <canvas> への描画終了後にこの関数が実行され、画像に QR コードが写っていたらその内容を解析して、データを取り出します：

function checkQRCode(){
  var imageData = ctx.getImageData( 0, 0, canvas.width, canvas.height );
  var code = jsQR( imageData.data, canvas.width, canvas.height );
  if( code ){
    //console.log( code );
    alert( code.data );
  }else{
    alert( "No QR Code found." );
  }
}

具体的にはコンテキスト変数（ctx）から getImageData() 関数でイメージデータを取得し、その結果を jsQR を使って解析します。ややこしそうな QR コードの解析部分は実はライブラリによって一瞬で実現できてしまっています。jSQR バンザイ！

正しく QR コードが解析できた場合は解析結果の文字列（code.data）を alert() 関数で画面に表示し、解析できなかった場合は "No QR Code found." と表示される、という一連の処理が定義されています。


今回の処理では QR コードが正しく解析でした場合はそのまま表示しているだけですが、これが URL であればロケーションに指定してジャンプしてもよし、テキストなどのデータであればバックエンドの API にポストしてもよし、というわけで取り出したデータの使いみちは alert() の代わりに記述することで、自由に応用できると思います。


というわけで、Filesystem API と jsQR と <input> タグのカメラ拡張を使うことで、ウェブのフロントエンド技術だけで QR コードリーダーが実現できました。

タグ ：

#filesystem

#api

#html5

#javascript

#qrcode

#jsqr

JavaScript である程度プログラムを書いていると１度はハマることになるタイムゾーンの扱いについての自分メモです。




【タイムゾーンとは？】
地球は丸くて、１日は24時間です。ある地点で朝を迎えた時、別のある地点では昼になっていて、更に別のある地点では夜だったりします。同じ瞬間でも時間や日付が異なるわけです。普通はあまり気にしなくていいのですが、「いま何時？」の質問に答えるには「どの地点での話か？」を明確にする必要があります。

この「どの地点での日付の話か？」を地域ごとに定義したものが「タイムゾーン」です。世界標準では GMT と呼ばれる、イギリスのグリニッジ天文台を通過する経線を使います。日本にはタイムゾーンは１つしか存在せず、兵庫県の明石市を通過する東経 135 度の経線のもの（世界標準時よりも９時間早いもの）を「日本標準時」として使います。つまり厳密には日本の東と西では日没時間などは異なりますが、全て「時計は明石市を基準に計測されるものを使う」ことになっています。横に広い国の場合はタイムゾーンが複数存在します。例えばアメリカの場合は「アメリカ東部標準時」、「アメリカ中部標準時」、「アメリカ山地標準時」、「アメリカ太平洋標準時」、「アラスカ標準時」、「ハワイ・アリューシャン標準時」と６つの標準時が存在します（国によってサマータイムとかもありますが、話が更にややこしくなるのでここでは無視します）。例えばあるイベントなども「東部標準時だと午後８時から、太平洋標準時だと午後５時からスタート」のようになります。


【タイムスタンプとは？】
タイムゾーンと少し似た言葉ですが、時間に関係するという以外は全く意味の異なる用語です。タイムスタンプ（UNIX タイムスタンプ）は「ある瞬間を整数で表したもの」です。より正確にはある瞬間が「世界標準時 1970 年 1 月 1 日午前零時から何ミリ秒経過しているか、を整数で表したもの」です。ちなみに日本時間での 2021 年 1 月 22 日午前10時40分40秒ごろに一度計測してみたところ、タイムスタンプの値は 1611279640693 という数値でした。単位はミリ秒なので、ここから１秒経過するごとに 1000 ずつ増えて、１秒さかのぼるごとに 1000 ずつ減っていくことになります。

このタイムスタンプ自体はタイムゾーンの影響を受けません。つまり上述の 1611279640693 という数字は「日本では 2021 年 1 月 22 日午前10時40分40秒（と 0.693 秒）」を示す値であって、別のタイムゾーンだと別の日時（例えばロンドンだと 2021 年 1 月 22 日午前1時40分40秒ごろ）になります。

ソフトウェア・アプリケーションを開発する際に、データの入力日時や更新日時を記録することがありますが、一般的には '2021-01-22 10:40:40' のような日時の文字列では記録せず、タイムスタンプ値を使って記録することが多いです（特にこのシステムが世界中で使われる場合、日時は日本時間として扱われない可能性があるので、後からどのタイムゾーンにでも変換できるようタイムスタンプとして保存するのがよい、とされています）。


【タイムスタンプのタイムゾーン問題】
さて、このようにシステム上において日時はタイムスタンプとして記録されることが多いのですが、一方で画面に表示する際にはタイムスタンプを日時に変換した上で表示されることがほとんどです（ 1611279640693 という数字だけを見ても、何年何月何日の何時何分何秒なのか全くわからないので）。

このタイムスタンプから日時文字列への変換を JavaScript で行う場合、何通りかの方法がありますが、例えば以下のような方法が考えられます：

var timestamp = 1611279640693;      //. タイムスタンプ値
var dt = new Date( timestamp );     //. Date オブジェクトに変換
var h = dt.getHours();              //. 時
var m = dt.getMinutes();            //. 分
var s = dt.getSeconds();            //. 秒

var hms = h + ':' + m + ':' + s;    //. 時刻を H:M:S 形式の文字列に変換
   :

タイムスタンプの値を指定して Date オブジェクトを作成し、Date オブジェクトのメソッドを使って時、分、秒の情報をそれぞれ取り出してから H:M:S とコロン区切りの文字列に変換する、という方法です。この例でのタイムスタンプ値は上述のものなので、この結果 hms 変数には 10:40:40 という文字列が代入される、、、　と思われます。

ところが実際に実行してみると、そのようになる場合とならない場合があります。実行環境によって結果が異なってしまうのでした。このならない場合の原因こそがタイムゾーンの問題です。

上述のように 1611279640693 は日本時間で「2021 年 1 月 22 日午前10時40分40秒ごろ」を示すタイムスタンプでした。なので日本時間で動くシステムであれば、この JavaScript の実行結果は "10:40:40" という文字列になるはずです。問題はそのシステムが日本時間で動いているとは限らないことにあります。つまり「日本から使う」想定はできたとしても、そのシステムそのものが「日本にある」とは限らず、日本時間とは別のタイムゾーンが設定されて動いている可能性があるのです。例えばロンドンにあるサーバーで、ロンドンのタイムゾーンが設定されて動いている場合のこの処理結果は "01:40:40" と表示されてしまうことになります（ロンドンタイムゾーンの時間になってしまうので）。同じ日であればともかく、条件によっては別の日に入力されたデータとして扱われる可能性もあります。特に昨今はクラウドサーバーを利用する機会が多く、そのサーバーは日本にはないどころか、「サーバーインスタンスがどこで動いているのかよく分からない」状態で使っていることもあるでしょう。PaaS やコンテナ環境によっては（アプリケーション側からは）サーバーのタイムゾーン設定を変えることができないことも考えられます。


【JavaScript でのタイムゾーン問題】
ここまでは JavaScript に限らず、タイムスタンプを記録している以上はどのプログラミング言語でも起こりうる問題です。JavaScript だと話がもう少しややこしくなります。

アプリケーションが動いているサーバーのタイムゾーン設定が日本とは限らないとわかったとして、ではどのようにして日付時刻を日本時間で表示すればよいでしょうか？

例えばプログラム内でサーバーのタイムゾーン設定を異なる設定（例えば「日本」）に変更することができるのであれば、システム内のタイムスタンプ値を Date オブジェクトに変更し、「日本時間での」日時を取得することができるようになります。また現在のサーバーのタイムゾーン設定を調べることができれば、その値から日本との時差を計算できるので、タイムスタンプ値に時差時間ぶんの数値を加えたり、引いたりすることで、関数実行結果が日本時間のものになるよう調整することもできます。

一般的には前者の方法が使われます。例えばタイムゾーン設定を変更するための setTimezoneOffset() のような関数を使って強制的に日本時間で計算できるようにできればいいのです。が、JavaScript にはこのような関数が用意されていません。つまり JavaScript では前者の方法は使えないのです。

したがって JavaScript では後者の方法を使う必要があります。JavaScript には setTimezoneOffset() 関数は存在していないのですが、設定値を取得するための getTimezoneOffset() 関数は存在しています。例えばこのような感じで使います：

var timestamp = 1611279640693;      //. タイムスタンプ値
var dt = new Date();                //. Date オブジェクトを作成

var tz = dt.getTimezoneOffset();    //. サーバーで設定されているタイムゾーンの世界標準時からの時差（分）
tz = ( tz + 540 ) * 60 * 1000;      //. 日本時間との時差（９時間＝５４０分）を計算し、ミリ秒単位に変換

dt = new Date( timestamp + tz );    //. 時差を調整した上でタイムスタンプ値を Date オブジェクトに変換

var h = dt.getHours();              //. 時
var m = dt.getMinutes();            //. 分
var s = dt.getSeconds();            //. 秒

var hms = h + ':' + m + ':' + s;    //. 時刻を H:M:S 形式の文字列に変換
   :

これでサーバーがどこでどのようなタイムゾーン設定で動いていても、常に日本時間での文字列に変換することができるようになります。


もちろん、このような不便で面倒な方法を使わなければならないというわけではなく、moment などの外部ライブラリを使うことでもう少し楽に扱うことができるようになります。

とはいえ、この事情を理解してないと原因調査も回避するのも難しいと思ってます。というわけでの自分メモでした。

タグ ：

#javascript

#timezone

#timezoneoffset