hi3103の備忘録

• サンプル：https://hi3103.net/study/1903-qrcode/sample-2.html

$(function(){
    //現在表示しているページのURLをQRコード化する
    $('#hoge').qrcode(location.href);

    //生成されたQRコード(=canvas要素)を変数にセット
    var canvas = $('#hoge canvas');

    //クリックできることを明示するためcssでカーソル種類を指定
    canvas.css('cursor','pointer');

    //QRコードがクリックされたらPNG画像が新しい窓で開く
    canvas.click(function() {
        var data = canvas[0].toDataURL('image/png');
        window.open(data);
    });
});

もしもJPEG画像として出力したい場合は toDataURL の引数を image/jpeg に変更する。

var data = canvas[0].toDataURL('image/jpeg');

参考URL

• HTML5 の canvas 要素を base64 文字列化し画像として保存する方法まとめ – Qiita
• javascript – toDataURL not a function – Stack Overflow

【成功例】ボタンクリックでPNG画像をダウンロードできるようにする（2019-04-15追記）

• Chromeはブラウザの仕様で data:image/png;base64, …をそのまま開くことができない。
  • 上述の window.open() のほか、location.href で直接指定してもダメだった。
• 以下のエントリーのソースを頂戴して「ボタンクリックでPNG画像をダウンロード」するようにした。
  • Canvas上のイメージを画像ファイルとして保存する方法 – JavaScript｜ST40PG
• サンプル：https://hi3103.net/study/1903-qrcode/sample-3.html

$(function(){
    //現在表示しているページのURLを取得し、QRコードを生成
    $('#hoge').qrcode(location.href);

    //生成されたQRコード(=canvas要素)にIDを付与し、非表示にする
    $('#hoge canvas').attr('id','piyo').css('display','none');

    //ダウンロードボタンを生成
    $('#hoge').append('<button onclick="saveCanvas();">QRコードをダウンロードする</button>');
});

//--- ここから下は https://oar.st40.xyz/article/133 の内容を頂戴しました ----//

// canvas上のイメージを保存
function saveCanvas(){
    //ファイルタイプとファイル名を指定
    var imageType = 'image/png';
    var fileName = 'qrcode.png';

    //特定のIDが付与された要素を変数にセット
    var canvas = document.getElementById('piyo');

    // base64エンコードされたデータを取得 「data:image/png;base64,iVBORw0k～」
    var base64 = canvas.toDataURL(imageType);

    // base64データをblobに変換
    var blob = Base64toBlob(base64);

    // blobデータをa要素を使ってダウンロード
    saveBlob(blob, fileName);
}

// Base64データをBlobデータに変換
function Base64toBlob(base64){
    // カンマで分割して以下のようにデータを分ける
    // tmp[0] : データ形式（data:image/png;base64）
    // tmp[1] : base64データ（iVBORw0k～）
    var tmp = base64.split(',');
    // base64データの文字列をデコード
    var data = atob(tmp[1]);
    // tmp[0]の文字列（data:image/png;base64）からコンテンツタイプ（image/png）部分を取得
    var mime = tmp[0].split(':')[1].split(';')[0];
    //  1文字ごとにUTF-16コードを表す 0から65535 の整数を取得
    var buf = new Uint8Array(data.length);
    for (var i = 0; i < data.length; i++) {
        buf[i] = data.charCodeAt(i);
    }
    // blobデータを作成
    var blob = new Blob([buf], { type: mime });
    return blob;
}

// 画像のダウンロード
function saveBlob(blob, fileName){
    var url = (window.URL || window.webkitURL);
    // ダウンロード用のURL作成
    var dataUrl = url.createObjectURL(blob);
    // イベント作成
    var event = document.createEvent("MouseEvents");
    event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    // a要素を作成
    var a = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
    // ダウンロード用のURLセット
    a.href = dataUrl;
    // ファイル名セット
    a.download = fileName;
    // イベントの発火
    a.dispatchEvent(event);
}

【備考1】URLの余計なパラメータを除去する

• 現在表示しているページに余計なパラメータがついていて、それを除去したい場合は、冒頭部分を以下のように書き換えればOK。

//現在表示しているページのURLを取得し、余計なパラメータを取る
var url = location.href;
url = url.replace(/\?.+$/,'');

//QRコードを生成
$('#hoge').qrcode(url);

【備考2】ダウンロードボタンだけを表示する

• 大きめのQRコードを生成したいが、デカイと邪魔なのでQRコードは非表示にしておきたいという場合は、canvas属性にID付与する際にCSSで display:none を設定すればOK。

//生成されたQRコード(=canvas要素)にIDを付与し、非表示にする
$('#hoge canvas').attr('id','piyo').css('display','none');

生成したQRコードをSVG画像として保存できないか？

結論：できなかった。
試したものは以下。

• fabric.jsの toSVG()メソッド
• CreateJSのEaselJSに同梱されている試験的な機能：SVGExporter

いずれもcanvasの機能拡張的なライブラリで、canvasをSVGに変換・書き出しする機能は備わっているが、

1. 描画領域をセット
2. 描画する
3. 描画したものを書き出す

という工程になっているため、「すでにjquery.qrcode.jsによって描写されたcanvasをSVGに書き出す」ことができなかった。
以下、動かなかったソースのメモ。

// ※失敗作※ canvasのガワだけの状態 (canvasのwidth・heightの情報だけは持っている白紙のSVG) が出力される
$(function(){
    //現在表示しているページのURLをQRコード化する
    $('#hoge').qrcode(location.href);

    //生成されたQRコード(=canvas要素)をidを付与
    $('#hoge canvas').attr('id','piyo');

    //描画領域をセット
    var stage = new createjs.Stage('piyo');

    //QRコードがクリックされたらsvgデータが出力される
    $('#hoge').click(function() {
        exporter = new SVGExporter(stage, false, false, false);
        exporter.run();
        document.body.appendChild(exporter.svg);
    });
});

参考URL

• fabric.js
  • canvasをSVG、EPSへベクトル情報を保持したまま変換するシステム | 合同会社サンドボックス
  • http://jsfiddle.net/asturur/RZcY7/9/
• CreateJS
  • CreateJS入門サイト – ICS MEDIA