ブラウザから画像を出力

ジェネレータを目指して - プログ
の続きだけど，前回の内容はほとんど役にたたない．

進捗

前置き

まず，ブラウザ上に表示した画像を保存できるようにするためには canvas 要素を利用するしかないみたい（？）です．なので，前回やった様な div に img を置くのは役に立たない．また canvas に描画し保存するにもそれなりに制約があるため， canvas の背景に元画像を配置するといった使い方はできない．同様にテキスト入力にも制約があるため前回の手法は使えない．今回はテキスト部分は後回しにして画像の表示と出力．
全体を通じて参考
ハンドサイン画像ジェネレーター
http://hitsujiwool.net/penguin-collage/

canvasに元画像を配置(共通)

・html

<!-- 縦横の指定はstyle内でなく属性で行うこと -->
<!-- 絶対座標で指定しているのは前回と共通（後々不要になるかも） -->
<canvas id="srcImg" width="568" height="644" style="position:absolute;top:100px;">

・JavaScript

//元画像を予め読み込んでおく
var img = new Image();
img.src = "so-men.jpg";
//初期化関数を定義
function init(){
  //canvasを探索
  var cvs = document.getElementById('srcImg');
  if(cvs.getContext){
    var ctxt = cvs.getContext('2d');
    ctxt.drawImage(img,0,0);
  }
}
//ウィンドウの読込が終わったら初期化関数を呼び出す
if( window.addEventListener ){
  window.addEventListener( 'load', init, false );
}else if( window.attachEvent ){
  window.attachEvent( 'onload', init );
}else{
  window.onload = init;
}

サイズの指定については参考リンクに．
参考
HTML5 Canvas の謎 - hidemonの日記

画像を保存(ハンドサイン)

・html

<!-- コマンド用 -->
<span class="button" onClick="chgImg()">出力</span>
<!-- 出力画像用 -->
<img id="dstImg" src="" alt="出力画像">

・JavaScript

function chgImg(){
  //canvas を探索
  var canvas = document.getElementById("srcImg");
  //出力画像用のスペースに canvas のデータを配置
  document.getElementById("dstImg").src = canvas.toDataURL();
  }

canvas データを dataURL に変換
→dataURL をページ内に配置
→右クリックで保存

画像を保存(ペンギン)

・html

<!-- コマンド用 -->
<span class="button" onClick="saveImg()">保存</span>

・JavaScript

//Blobを保存
function saveBlob(blob, name) {
  //ウィンドウのURLを生成(?)
  var url = parent.URL || parent.webkitURL,
  //blobへのURLを生成(?)
    objectUrl = url.createObjectURL(blob),
  //クリックイベント因子を生成(?)
    e = new Event('click'),
  //<a>タグを設定
    el = document.createElement('a');

  //href に blob のURLを設定
  el.href = objectUrl;
  //ダウンロードイベントを設定
  el.download = name;  
  //ダウンロードイベントを起動(?)
  el.dispatchEvent(e);
};
//dataURL を Blob に変換
/**
 * convert data URL to blob.
 * Thanks to http://stackoverflow.com/questions/12168909/blob-from-dataurl
 */
function dataUrlToBlob(dataUrl) {
  var splitted = dataUrl.split(','),
      byteString = atob(splitted[1]),
      mimeString = splitted[0].split(':')[1].split(';')[0],
      ab = new ArrayBuffer(byteString.length),
      ia = new Uint8Array(ab);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ia], { type: mimeString });
}
//呼び出す関数
function saveImage(){
  //canvas を探索
  var canvas = document.getElementById('srcImg');
  //canvas の dataURL を Blob に変換し保存
  saveBlob(dataUrlToBlob(cvs.toDataURL()), 'ra-men-collage.png');
}

canvas 描画データを dataURL に変換
→dataURL を blob に変換
→blob を .pngファイルに変換
url 周りの処理は自信が持てない．dataToBlob()は多分手に追えなさそうだからブラックボックスでも良いかなぁと．詳しくはコメントにある Thanks to のURL参照．

長くなるのでテキスト部分は次回に．