Canvasをimg要素に変換

　Canvas要素はimg要素に書き出したり読み込んだりすることが出来ます。
　・Canvasの内容は、toDataURL()を使い URL形式の文字列としてCanvasの画像データを取得し img要素に反映できます。
　・逆に img要素を Canvasに転送するには、drawImage()を使います。
　以下で具体的な事例を見ていきます。　　参考１　参考２

■ toDataURL() を使う

　Canvas内容を img表示するには、toDataURL()で URL形式の文字列(Base64)に変換し、img要素のsrc属性に指定します。
　　＊「文字列」は、<img src="「文字列」">などと記述することで他でも同画像を表示出来ます。　参考
　以下の例では、canvas に描いた画像を png 及び jpeg画像として文字列化して表示しています。

canvasページ

リスト

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>canvas face</title>
  <style type="text/css">
    section{ display:flex; margin-left:70px; }
    #cvsbox,article{ text-align:center; margin:0 10px; }
    canvas,img{ border:1px solid #3d3; margin-bottom:10px; }
    #data_url_png, #data_url_jpeg{ width:500px; height:100px; overflow: auto; border:1px solid #333; background:#cfc; margin-bottom:17px; }
  </style>
</head>
<body>
<div class="wrap00">
  <section><article>--------<br> canvas <br>--------</article>
    <canvas id="cvsbox" width="140" height="100"></canvas>
  </section>
  　　---png---<br>
  <img id="image_png" src="" width="140" height="100"/>
  <textarea id="data_url_png">png</textarea><br>
  　　---jpeg---<br>
  <img id="image_jpeg" src="" width="140" height="100"/>
  <textarea id="data_url_jpeg">jpeg</textarea>
  
<br>
<button id="download_button">通常 img 保存</button>
<a id="download_link" alt="ダウンロード用保存図リンク"></a>
</div>

  <script>
        var downloadLink = document.getElementById('download_link');
        var filename = 'your-filename.jpg';    // 通常保存ファイル名
    var cvs = document.getElementById("cvsbox");
    var ctx = cvs.getContext("2d");
      // canvas に図形を描く
      ctx.fillStyle = '#dfe';
      ctx.fillRect(10, 10, 120, 80);
      ctx.beginPath();
      ctx.fillStyle = "#ed2";
      ctx.arc(70,50,37,0,Math.PI*2,true); // 外の円
      ctx.fill();                         // 塗りつぶし
      ctx.beginPath();               // 新しいパスを開始
      ctx.fillStyle = "#b11";
      ctx.moveTo(77,55);
      ctx.arc(70,55,7,0,Math.PI*2,true);  // 鼻
      ctx.fill();                         // 塗りつぶし
      ctx.beginPath();               // 新しいパスを開始
      ctx.fillStyle = "#333";
      ctx.moveTo(61,38);
      ctx.arc(55,38,5,0,Math.PI*2,true);  // 左目
      ctx.moveTo(91,38);
      ctx.arc(85,38,5,0,Math.PI*2,true);  // 右目
      ctx.fill();                         // 塗りつぶし
      ctx.beginPath();               // 新しいパスを開始
      ctx.lineWidth = 3;
      ctx.moveTo(70,75);
      ctx.arc(70,53,22,0.5*Math.PI,0.85*Math.PI,false); // 口
      ctx.moveTo(70,75);
      ctx.arc(70,53,22,0.5*Math.PI,0.15*Math.PI,true);  // 口
      ctx.stroke();                        // 線を引く
      
    // canvasの描画結果をpngでimg要素にセット
    try {
      var img_png_src = cvs.toDataURL();
      document.getElementById("image_png").src = img_png_src;
      document.getElementById("data_url_png").firstChild.nodeValue = img_png_src;
    } catch(e) {
      document.getElementById("image_png").alt = "未対応";
    }
    // canvasの描画結果をjpegでimg要素にセット
    try {
      var img_jpeg_src = cvs.toDataURL("image/jpeg",0.9);
      document.getElementById("image_jpeg").src = img_jpeg_src;
      document.getElementById("data_url_jpeg").firstChild.nodeValue = img_jpeg_src;
    } catch(e) {
      document.getElementById("image_jpeg").alt = "未対応";
    }
    
        var button = document.getElementById('download_button');  // ボタン設定
        button.addEventListener('click', function(){ // ダウンロード用設定
            if (cvs.msToBlob) {    // マイクロソフト対応用
                var blob = cvs.msToBlob();
                window.navigator.msSaveBlob(blob, filename);
            } else {                   // マイクロソフト以外用
    //            downloadLink.href = cvs.toDataURL('image/png');
                downloadLink.href = cvs.toDataURL('image/jpeg');
                downloadLink.download = filename; // img 保存するファイル名 
                downloadLink.click();
            }
        });
  </script>
</body>
</html>

説明

( 1行目)　この Webページは、HTML5 上で展開します
(16行目)　canvas 領域を確保します
(19行目)　ここに png形式の img要素を表示します
(20行目)　ここに png画像の URL文字列(Base64)を表示します
(22行目)　ここに jpeg形式の img要素を表示します
(23行目)　ここに jpeg画像の URL文字列(Base64)を表示します
(26行目)　通常の img ダウンロード実行用のボタンを作成
(27行目)　キャンバスを保存するときに必要な隠し要素です
(31行目)　隠し要素の参照です
(32行目)　通常保存 img ファイル名の指定です
(33行目)　canvas の id 名(cvsbox)の要素を取得
(34行目)　該 2D(平面) Contextを取得
(36-60行)　canvas 画像を描画します
(64行目)　URL文字列(Base64)に変換します。(形式無指定→png)
(65行目)　URL文字列(png)を img要素の src属性に指定します
(66行目)　URL文字列(png)の内容を表示します
(68,76行)　エラー時の処理
(72行目)　URL文字列に変換。(形式→jpeg 品質レベル→0.9[無指定時 1])
(73行目)　URL文字列(jpeg)を img要素の src属性に指定します
(74行目)　URL文字列(jpeg)の内容を表示します
(79行目)　ダウンロード実行ボタン要素の参照です
(80行目)　ダウンロード実行ボタンクリック時の動作設定です

■ drawImage() を使う

　drawImageメソッドを使うとJPEGやPNGなどの画像をCanvasに組み込むことが出来ます。　参考
　以下の例では、JPEG画像を canvas に読み込んで操作可能(透過率可変)としています。　参考

canvasページ

リスト

<!DOCTYPE html>
<html>
<head>
  <meta charset=UTF-8 />
  <title>画像の透過</title>
  <script type="text/javascript">
    var cvs;
    var img = null;
    var alpha = 1;
    function DrawImg() {                  // 画像の描画
        var ctx = cvs.getContext( '2d' ); // コンテキストの取得
        ctx.fillStyle = '#FFFFFF';        // キャンバスのクリア
        ctx.fillRect( 0, 0, cvs.width, cvs.height );
        ctx.globalAlpha = alpha;          // 非透過度の設定(範囲: 0～1)
        ctx.drawImage( img,2,2, cvs.width-4,cvs.height-4 ); // 画像の描画
    }
    function Load() {                     // ページロード時実行
        cvs = document.getElementById("canvasbd");          // キャンバス取得
        img = new Image();                // HTMLImageElement オブジェクトを作成
        img.onload = function () {        // 画像ロードの時に実行
          DrawImg();
          cvs.addEventListener( "mousedown", function(e){   // マウスダウンで実行
            alpha -= 0.1;                 // 非透過度の変更
            if ( 0.1 > alpha) { alpha = 1; }
            DrawImg();
            document.getElementById("touka").innerText=alpha.toFixed(1);
          });
        };
        img.src= "../sample/y0399s.jpg";
    }
</script>
</head>
  <body onload="Load()" bgcolor="#dfd">
    画像クリックで透過度変化<br />
    <canvas width="200" height="180" id="canvasbd" style="background:gray;"></canvas><br />
    　　　非透過度: <span id="touka">1.0</span>
</body>
</html>

説明

( 1行目)　この Webページは、HTML5 上で展開します
(10-16行)　canvas要素に画像を描画する関数を記述
(13行目)　canvas要素の幅と高さの領域を用意します
(15行目)　上記領域内に引数imgの HTMLImageElement要素を表示します
(17-30行)　ページロード時の関数を記述
(18行目)　id 名(canvasbd)のキャンバスを取得します
(19行目)　引数imgのHTMLImageElement要素を作成
(20-28行)　imgロード時の実行関数を記述
(21,25行)　画像を描画する関数を呼び込みます
(22-27行)　マウスダウンで実行する関数を記述します
(23行目)　マウスダウン毎に非透過度を下げていきます
(24行目)　非透過度が0.1以下になると非透過(alpha=1)にリセットします
(26行目)　非透過度を表示します
(29行目)　引用画像のurlを指定します

■ その他の例

　その他 canvas/img要素変換で参考になりそうな事例を以下に紹介

img要素の画像をcanvasに読込み、url変換し(上下反転も可能) url出力、更にそのurlでimg表示をします。　参考　別枠表示

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <style>
    body { margin: 0px auto; background:url(https://kurage.ready.jp/img/w8b.gif); }
    table{ width:450px; margin:0 auto; background:#ffe; fline-height:130%; }
    td{ text-align:center; }
    #txtbd{ width:99%; background:#efe; }
  </style>
</head>
<body>
  <table border=0>
    <tr>
      <td colspan=2>画像転送→反転→URL出力→URL設定<hr></td>
    </tr>
    <tr>
      <td><img id="imgbd" src="../sample/mi12.jpg" width="80" height="100"></td>
      <td><canvas id="cvsbd" width="80" height="100" style="background: #eee;"></canvas></td>
    </tr>
    <tr>
      <td style="text-align: center;"><button id="imgtocvs" onClick="putImageToCanvas()" disabled="disabled">転送→</button></td>
      <td style="text-align: center;">
        <button id="canvasUpset" onClick="canvasUpset()"  disabled="disabled">反転</button> 
        <button id="toDataURL" onClick="toDataURL()"  disabled="disabled">URL出力 ↓</button></td>
    </tr>
    <tr>
      <td colspan="2" style="text-align: center;"><textarea id="txtbd" cols="48" rows="6"></textarea></td>
    </tr>
    <tr>
      <td style="text-align: center;"><button id="urltoimg" onClick="setURLtoImage()"  disabled="disabled">↑ URL設定</button></td>
      <td> </td>
    </tr>
  </table>
  <script type="text/javascript">
    var imgfg = document.getElementById('imgbd');
    var cvs = document.getElementById('cvsbd');
    var ctx;
    var txturl = document.getElementById('txtbd');
    // CanvasとImageDataが利用可能ならボタン有効化
    if (cvs.getContext && cvs.getContext('2d').createImageData) {
        document.getElementById('imgtocvs').disabled = false;
        document.getElementById('canvasUpset').disabled = false;
        document.getElementById('toDataURL').disabled = false;
        document.getElementById('urltoimg').disabled = false;
        ctx = cvs.getContext('2d');
    }
    
    function putImageToCanvas() {   // img要素からCanvasに画像を転送
        ctx.drawImage(imgfg, 0, 0, cvs.width, cvs.height);
    }

    function canvasUpset() {        // 上下反転
        var canvasImageData = ctx.getImageData(0, 0, cvs.width, cvs.height);
        var canvasRGBA = canvasImageData.data;
        var newImageData = ctx.createImageData(cvs.width, cvs.height);
        var newRGBA = newImageData.data;

        // Canvasのピクセル情報を上下反転させながらコピー
        for (i = 0;i < cvs.height;i++) {
            for (j = 0;j < cvs.width;j++) {
                newRGBA[(j * 4) + ((cvs.height - 1 - i) * cvs.width * 4)] = canvasRGBA[(j * 4) + (i * cvs.width * 4)];
                newRGBA[1 + (j * 4) + ((cvs.height - 1 - i) * cvs.width * 4)] = canvasRGBA[1 + (j * 4) + (i * cvs.width * 4)];
                newRGBA[2 + (j * 4) + ((cvs.height - 1 - i) * cvs.width * 4)] = canvasRGBA[2 + (j * 4) + (i * cvs.width * 4)];
                newRGBA[3 + (j * 4) + ((cvs.height - 1 - i) * cvs.width * 4)] = canvasRGBA[3 + (j * 4) + (i * cvs.width * 4)];
            }
        }
        ctx.putImageData(newImageData, 0, 0);  // コピーしたピクセル情報をCanvasに転送
    }

    function toDataURL() {               // Canvasの画像をURL（png文字列）化
        txturl.value = cvs.toDataURL();
    }
    
    function setURLtoImage() {           // URLの画像をimg要素に設定
        imgfg.src = txturl.value;
    }

  </script>
</body>
</html>

２枚の img要素画像をcanvasで連結して読込み、url変換して出力し、そのurlでimg要素画像として表示をします。　参考　別枠表示

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>canvasで図形を結合</title>
    <script type="text/javascript">
    <!--
      var img01= new Image(); var img02= new Image();
      img01.src = '../sample/img0/1.gif'; img02.src = '../sample/img0/2.gif';
      
      function init() {
        document.getElementById('image01').src=img01.src;
        document.getElementById('image02').src=img02.src;
        //描画コンテキストの取得
        var canvas = document.getElementById('sample');
          var context = canvas.getContext('2d');
          var cvshv = 50;// canvas.height;
          // drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
          context.drawImage(img01,0,0,img01.width,img01.height, 0,0,cvshv,cvshv);
          context.drawImage(img02,0,0,img02.width,img02.height, cvshv, 0,cvshv,cvshv);
          data = canvas.toDataURL("image/png");   //画像のコード化
          document.getElementById('testtext').value = data; //コードの表示
          document.getElementById('testimage').src = data;  //コードの画像化
      }
    //-->
  </script>
  <style>
    table{ width:440px; margin:0 auto; background:#eee; }
    td{ text-align:center; }
    #sample{ border:2px solid #f93; display:none; }
    #image01,#image02{ width:50px; height:50px; }
    #testimage{ border:0px solid #9d3; width:100px; height:50px; }
    #testtext{ width:100%; background:#ffe; }
  </style>
</head>
<body onLoad="init()">
  <table border=0>
    <tr><td colspan=5 style="background:#ffe;"><b>二枚の画像を結合画像化</b><br>
       (下記URLは利用可能。右画像は右クリックで画像保存可)</td></tr>
    <tr><td colspan=5><canvas id="sample" width="100" height="50"></canvas></td></tr>
    <tr><td>
        <img id="image01" src="" width="" height="">
        <img id="image02" src="" width="" height="">
        </td><td style="text-align:left;">-連結→url化<br>　　　　↓</td><td> </td><td style="text-align:right;">画像表示→<br>↑　　　</td><td><img id="testimage" src="" width="" height=""></td></tr>
    <tr><td colspan=5><textarea id="testtext" cols="57" rows="10">text</textarea></td></tr>
  </table>
</body>
</html>

２枚のimg要素の画像をcanvasに読込み、それらを重ねた画像を作成し、url変換して、そのurlでimg表示をします。　参考　別枠表示

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style type="text/css">
    table{ width:420px; margin:0 auto; text-align:center; background:#eef; } 
    .tdbl{ background:#efe; } 
  </style>
</head>
<body>
  <table border=0>
    <tr><td colspan=4>画像合成 (1に2を重ねる)</td></tr>
    <tr class="tdbl"><td colspan=3>各比率をスライドで調整 ↓<br><input type="range" id="blend_range" min="0" max="255" value="0" onmouseup="onMouseUp2();" style="width:100%; "></td><td><br><span id="msg_blend">0/255</span>←2の割合</td></tr>
    <tr><td>ソース<br>1</td><td><canvas id="cvs_src1"></canvas></td>
      <td>ソース<br>2</td><td><canvas id="cvs_src2"></canvas></td></tr>
    <tr><td>合成後</td><td class="tdbl"><canvas id="cvs_dst" width="1" height="1"></canvas></td>
      <td>url 化<br>img →<br>url ↓</td><td class="tdbl"><img src="" id="image_png" width="100" height="50"></td></tr>
    <tr><td colspan=4><textarea id="data_url" cols="57" rows="10" style="background:#ffa;">img-url</textarea></td></tr>
  </table>
  <img id="img_src1" src="../sample/LOyuki14-.gif" style="display:none;"><!--バッファーimg-->
  <img id="img_src2" src="../sample/panda15.gif" style="display:none;">  <!--バッファーimg-->
  <script>
    // キャンバスの取得
    var src1_cvs = document.getElementById("cvs_src1");
    var src2_cvs = document.getElementById("cvs_src2");
    var dst_cvs  = document.getElementById("cvs_dst");
    var src1_ctx = src1_cvs.getContext("2d"); 
    var src2_ctx = src2_cvs.getContext("2d");
    var dst_ctx = dst_cvs.getContext("2d");       
    var src1_img = document.getElementById("img_src1");
    var src2_img = document.getElementById("img_src2");
    var src1 = null;
    var src2 = null;
    src1_img.addEventListener("load", function(){ // イメージ1が読み込まれたとき
      src1_cvs.width  = src1_img.width;
      src1_cvs.height = src1_img.height;
      src1_ctx.drawImage(src1_img,0,0);  // キャンバスに画像を描画
      // イメージデータの取得
      src1 = src1_ctx.getImageData(0,0,src1_img.width, src1_img.height);
    },false);
    src2_img.addEventListener("load", function(){ // イメージが2読み込まれたとき
      src2_cvs.width  = src1_img.width;
      src2_cvs.height = src1_img.height;
      dst_cvs.height = src1_img.height;
      // キャンバスに画像を描画
      src2_ctx.drawImage(src2_img,0,0,src2_img.width, src2_img.height,0,0,src1_img.width, src1_img.height);
      // イメージデータの取得
      src2 = src2_ctx.getImageData(0,0,src1_img.width, src1_img.height);
    },false);
    
    function set255(value){        // RGBの範囲
      if (value > 255) return 255;
      if (value < 0)   return 0;
      return value;
    }
 
    function onMouseUp2(){
      var height = src1_img.height;
      var width  = src1_img.width;
      var cnt = 0;
      document.getElementById('msg_blend').innerHTML= blend_range.value+'/255';
      dst_cvs.width  = src1_img.width;
      dst_cvs.height = src1_img.height;
      var dst = dst_ctx.createImageData( src1_img.width, src1_img.height );
      var amount = blend_range.value / 255;
      for (var y = 0; y < height; y++) {
        for (var x = 0;x < width; x++) {
          dst.data[(cnt*4)]   = set255( Math.round((1-amount)*src1.data[(cnt*4)]   + (amount*src2.data[(cnt*4)])) );
          dst.data[(cnt*4)+1] = set255( Math.round((1-amount)*src1.data[(cnt*4)+1] + (amount*src2.data[(cnt*4)+1])) );
          dst.data[(cnt*4)+2] = set255( Math.round((1-amount)*src1.data[(cnt*4)+2] + (amount*src2.data[(cnt*4)+2])) ); 
          dst.data[(cnt*4)+3] = 255;
          cnt++;
        }
      }
      dst_ctx.putImageData(dst,0,0);    // キャンバスに画像を設定
      
      // canvasの描画結果をPNGで取り出しimg要素にセット
      try {
        var img_src = dst_cvs.toDataURL("image/png");  // png用
      //  var img_src = dst_cvs.toDataURL("image/jpeg"); // jpeg用
        document.getElementById("image_png").width = src1_img.width;
        document.getElementById("image_png").height= src1_img.height;
        document.getElementById("image_png").src = img_src;
        document.getElementById("data_url").firstChild.nodeValue= img_src;
      } catch(e) {
        document.getElementById("image_png").alt = "未対応";
      }
    }
  </script>
</body>
</html>

画像ファイルを読込み、そのurl変換値出力し、表示をします。　参考　別枠表示

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Data URI 変換</title>
  <style type="text/css">
    <!--
    html, body { width:100%; height:99%; margin: 0px auto; background:url(https://kurage.ready.jp/img/w8b.gif); font-size:14px;line-height:130%; }
    .main_container { background-color:#fffca8; width:800px; margin: 10px auto; border:0px solid #555; }
    .title_label { text-align:center; font-size: 105%; font-weight: bold; }
    .drop_area { position:relative; margin:4px 2px 10px 2px;  }
    .drop_label { height:80px; border:1px dashed #611; }
    file_sel1 { width:60%; border: 0px dashed #611; }
    .file_name { margin-left:20px; font-size:90%; }
    .result_text { width: 99%; margin:2px auto; }
    -->
  </style>
  <script type="text/javascript">
    <!--
    function Alm(msg) { alert(msg); }
      // 
    function Alm2(msg) { alert(msg); }
    
    function BrowserType() {
      var ua = window.navigator.userAgent;
      if (ua.indexOf("Opera") >= 0)   { return "Opera"; } // MSIEより前にチェックが必要
      if (ua.indexOf("MSIE") >= 0)    { return "MSIE"; }
      if (ua.indexOf("Trident") >= 0){ return "MSIE"; }  // IE11対策
      if(ua.indexOf("Chrome") >= 0){ return "Chrome";} // Safariより前にチェックが必要
      if (ua.indexOf("Safari") >= 0)  { return "Safari"; }
      if (ua.indexOf("Firefox") >= 0) { return "Firefox"; }
      return "";
    }; //  ---------------------
    
    window.onload = function () {
      // ----- イベント登録 -----
      if (document.addEventListener) {
        document.addEventListener("drop",     file_drop,     false);
        document.addEventListener("dragover", file_dragover, false);
        document.getElementById("file_sel1").addEventListener("change",file_select,false);
        document.getElementById("file_sel1").addEventListener("click",file_click,false);
        document.getElementById("copy_button1").addEventListener("click",copy_button,   false);
        document.getElementById("clear_button1").addEventListener("click",clear_button,  false);
      } else if (document.attachEvent) {
        document.attachEvent("ondrop",     file_drop);
        document.attachEvent("ondragover", file_dragover);
        document.getElementById("file_sel1").attachEvent("onchange",    file_select);
        document.getElementById("file_sel1").attachEvent("onclick",     file_click);
        document.getElementById("copy_button1").attachEvent("onclick",  copy_button);
        document.getElementById("clear_button1").attachEvent("onclick", clear_button);
      }
      return true;
    }; //  --------------------------

    // ----- 全選択+コピーボタン -----
    function copy_button() {
      // ----- 要素の存在チェック -----
      if (!document.getElementById("result_text1")){ Alm("copy_button:0001");return false;}
      // ----- execCommand の存在チェック -----
      if (!document.execCommand) {
        Alm2("ブラウザがコピーに対応していません。");
        return false;
      }
      // ----- テキストボックスの内容チェック -----
      if (document.getElementById("result_text1").value == "") {
        Alm2("変換結果がありません。");
        return false;
      }
      // ----- テキストボックスの内容を全選択 -----
      document.getElementById("result_text1").select();
      // ----- テキストボックスの内容をクリップボードにコピー -----
      if (!document.execCommand("copy")) {
        Alm2("コピーできませんでした。");
        return false;
      }
      // ----- IE8, IE9, IE10, IE11対策 -----
      if (window.clipboardData && window.clipboardData.getData("Text") == "") {
        Alm2("コピーできませんでした。(アクセス許可がない等)");
        return false;
      }
      // ----- Firefox対策 -----
      if (BrowserType() == "Firefox") {
        setTimeout(function () {
            // ----- スクロールを先頭に移動 -----
            if (document.getElementById("result_text1").scrollTop) {
                document.getElementById("result_text1").scrollTop = 0;
            }
        }, 10);
      }
      return true;
    }; // ----------------------

    // ----- クリアボタン -----
    function clear_button() {
      // ----- 要素の存在チェック -----
      if (!document.getElementById("result_text1")){ Alm("clear_button:0001");return false;}
      if (!document.getElementById("file_name1"))  { Alm("clear_button:0002");return false;}
      // ----- テキストボックスのクリア  -----
      document.getElementById("result_text1").value = "";
      // ----- ファイル名のクリア -----
      document.getElementById("file_name1").innerHTML = "";
      return true;
    }

    // ----- ファイル選択ボタン -----
    function file_select(ev) {
      var file;
      // ----- 要素の存在チェック -----
      if (!document.getElementById("file_name1")) {
        Alm("file_select:0001");
        file_clear();
        return false;
      }
      // ----- FileReader API の存在チェック -----
      if (typeof (FileReader) == "undefined") {
        Alm2("ブラウザが FileReader API に対応していません。");
        file_clear();
        return false;
      }
      // ----- ファイル取得 -----
      file = ev.target.files[0];
      // ----- ファイルの読み込みと表示 -----
      load_and_show_file(file);
      // ----- ファイル名の表示 -----
      document.getElementById("file_name1").innerHTML = "ファイル名 : " + file.name;
      file_clear();
      return true;
    }
    // ----- 同一ファイルの選択で読み込まない件の対策(Chrome,Firefox,IE11用) -----
    function file_click() {
      // ----- ファイル選択のクリア -----
      // (IE8, IE9, IE10では効果なし)
      document.getElementById("file_sel1").value = "";
      return true;
    }
    // ----- 同一ファイルの選択で読み込まない件の対策(IE用) -----
    function file_clear() {
      var elm;
      // ----- IE8, IE9, IE10対策(IE11は除く) -----
      if (BrowserType() == "MSIE" && window.navigator.userAgent.indexOf("MSIE") >= 0) {
        // ----- 要素の存在チェック -----
        if (!document.getElementById("file_sel1")) { Alm("file_clear:0001"); return false; }
        // -----ファイル選択のクリア -----
        elm = document.getElementById("file_sel1");
        elm.parentNode.innerHTML = elm.parentNode.innerHTML;
        // ----- イベント再登録 -----
        if (document.addEventListener) {
            document.getElementById("file_sel1").addEventListener("change", file_select, false);
        } else if (document.attachEvent) {
            // ----- IE8対策 -----
            document.getElementById("file_sel1").attachEvent("onchange", file_select);
        }
      }
      return true;
    }

    // ----- ファイルのドラッグ&ドロップ -----
    function file_drop(ev) {
      var file;
      // ----- イベント抑制 -----
      // ----- IE8対策 -----
      if (ev.preventDefault) { ev.preventDefault(); } else { ev.returnValue = false; }
      // ----- 要素の存在チェック -----
      if (!document.getElementById("file_name1")) { Alm("file_drop:0001"); return false;}
      // ----- FileReader API の存在チェック -----
      if (typeof (FileReader) == "undefined") {
        Alm2("ブラウザが FileReader API に対応していません。");
        return false;
      }
      // ----- ファイル取得 -----
      file = ev.dataTransfer.files[0];
      // ----- ファイルの読み込みと表示 -----
      load_and_show_file(file);
      // ----- ファイル名の表示 -----
      document.getElementById("file_name1").innerHTML = "ファイル名 : " + file.name;
      return false;
    }
    function file_dragover(ev) {
      // ----- イベント抑制 -----
      // ----- IE8対策 -----
      if (ev.preventDefault) { ev.preventDefault(); } else { ev.returnValue = false; }
      // ----- ドロップ操作をコピーとする -----
      // (マウスアイコンが移動でなくコピー(+)のマークになる)
      // (IE8, IE9, IE10, IE11では効果なし)
      ev.dataTransfer.dropEffect = "copy";
      return false;
    }

    // ----- ファイルの読み込みと表示 -----
    function load_and_show_file(file) {
      var freader;

      // ----- 引数のチェック -----
      if (!file) { Alm("load_and_show_file:0001"); return false; }
      // ----- 要素の存在チェック -----
      if (!document.getElementById("result_text1")) { Alm("load_and_show_file:0002"); return false; }
      // ----- ファイルの読み込みと表示 -----
      freader = new FileReader();
      freader.onload = function (ev) {
        // ----- テキストボックスにセット -----
        document.getElementById("result_text1").value = ev.target.result;
        // ----- スクロールを先頭に移動 -----
        if (document.getElementById("result_text1").scrollTop) {
            document.getElementById("result_text1").scrollTop = 0;
        }
      };
      freader.readAsDataURL(file);
      return true;
    }
  // -->
  </script>
</head>

<body>
<div class="main_container" >
  <div class="title_label">Data URI Scheme 変換</div>
  <form action="#" onsubmit="return false;">
    <div class="drop_area" id="drop_area1">
      <div class="file_sel_frame">ファイル名入力
        <span><input type="file" name="file_sel1" id="file_sel1" size="50"></span>
        <span class="file_name" id="file_name1"></span>
      </div>
      <div class="drop_label">又は、ここにファイルをドロップ</div>
    </div>
    <div class="result_label_frame">
      <span class="result_label">変換結果:</span><span class="space_label"> </span>
      <input type="button" id="copy_button1" value="全選択＋コピー">
      <span class="space_label"> </span>
      <input type="button" id="clear_button1" value="クリア">
    </div>
    <textarea class="result_text" id="result_text1" rows="12"></textarea>
  </form>
</div>
</body>
</html>

■ SVGを Base64化する (参考サイト)

　Canvas要素は画像を img要素や URL形式の文字列(Base64)に変換したりすることが出来ます。(Canvas画像)
　そのため、 SVG 画像も Canvas画像を介して、img要素や URL形式の文字列に変換することができます。　参考１　参考２
　　＊変換した「文字列」は、<img src="「文字列」">などと記述することで他でも同画像を表示出来ます。　参考サイト
　以下の例では、canvas に描いた画像を png画像として文字列化して表示しています。

【手順】1.変換元 SVGを入力→「変換」 → 2.変換後の imgタグ <img src="「文字列」">を表示　→ 3.変換後の「文字列」で画像を表示

1. 変換元の SVGの入力 (下記:入力例)
3. 変換の画像

2.文字列変換後の imgタグ

　■ HTMLページ内に SVG変換 scriptを組み込んだ例　(別窓表示)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>SVG文字化 Sample</title>
  <style>
    body{ }
    .image { width: 1000px; margin: 0 auto; display: flex; align-items: center; }
    .image__svg { width:450px; border: 1px solid rgba(0, 0, 0, 0.5); }
    .image__sep { flex-grow: 1; text-align: center; }
    .image__converted { width:450px; height:400px; border: 1px solid #aaa; }
    #image__txt { display:block; width:1000px; height:200px; margin: 0 auto; border: 1px solid #6e6; }
  </style>
</head>
<body>
  <div class="image">
    <div class="image__svg">
      <svg id="svg" xmlns="https://www.w3.org/2000/svg" width="450" height="400" viewBox="0 0 450 400" preserveAspectRatio="xMidYMid meet">
        
      
    
        
        <rect x="10" y="5" width="30" height="70" fill="#000000" />
        
        <path stroke="blue" stroke-width="1" fill="blue" d="M 20 25 a 40 40 0 0 0 80 0 z"/>
        
        <polygon points="70,10 20,90 110,80 70,10" fill="none" stroke="#00ff00" />
        
        <circle cx="80" cy="65" r="30" fill="#ff0000" opacity="0.6"/>
    
      
    
      </svg>
    </div>
    <div class="image__sep">
      <div><button id="convert-button">変換 =></button></div>
    </div>
    <div class="image__converted">
      <img src="" id="converted-image">
    </div>
  </div>
  <p style=" width:900px; margin: 1em auto 0;">■変換後 img文字列タグ</p>
  <textarea id="image__txt"></textarea>
  
  <script>
    (function() {
      document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('convert-button').addEventListener('click', function() {
          svg2imageData(document.getElementById('svg'), function(data) {
            console.log(data);
            document.getElementById('converted-image').src = data;
          }, function(error) {
            console.log(error);
            alert('failed to convert');
          });
        });
      });
    
      function svg2imageData(svgElement, successCallback, errorCallback) {
        var canvas = document.createElement('canvas');
        canvas.width = svgElement.width.baseVal.value;
        canvas.height = svgElement.height.baseVal.value;
        var ctx = canvas.getContext('2d');
        var image = new Image();
        image.onload = () => {
          ctx.drawImage(image, 0, 0, image.width, image.height);
          successCallback(canvas.toDataURL());
        };
        image.onerror = (e) => {
          errorCallback(e);
        };
        var svgData = new XMLSerializer().serializeToString(svgElement);
      
        svgData = svgData.replace(//g, ''); //コメントを削除   
        svgData = svgData.replace(/\n/g, '');       //改行コードを除去
        svgData = svgData.replace(/\s+/g, ' ');     //行頭の空白を1文字に縮小
 
        image.src = 'data:image/svg+xml;charset=utf-8;base64,' + btoa(svgData);
        document.getElementById('image__txt').innerText = '<img src="' + image.src + '">';
        
      }
    }());
  </script>
</body>
</html>

■ 参考サイト

toDataURL()

Canvas.toDataURL() 　toDataURLを使う　 2MB までしか

Data URI scheme

Data URIスキーム　データ URL 　Data URI Scheme 　Data URI 変換　 HTTPリクエストを削減

drawImage()

トリミングする　 Canvasリファレンス　同期で読み込む　画像の透過　 CANVAS合成

JimmyJS