画像からSVGアニメーションを作成 - PHP,MySQL,Flex,JSな日々＋イラストとか

f:id:haru-komugi:20140718161732j:plain
画像からSVGアニメーションを作成します。
指定する画像はアニメ系のほうが、見てて楽しいと思います。

サンプルはこちら
http://moeten.info/js/20140718_imageToSVGAnimation/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="./lib/potrace.js"></script>
  <script type="text/javascript" src="./vendor/raphael-min.js"></script>
  <script type="text/javascript" src="./lib/jquery.lazylinepainter-1.4.1.js"></script>
  <script type="text/javascript">

    $(function(){

      //ファイル選択
      /*---------------------------------------------------------------*/
      $("#file").bind("change",function(evt){

        //画像の読み込み
        var files = evt.target.files;
        if(files.length == 0) return;
        var file = files[0];
        if(!file.type.match(/image/)) {
          alert('画像ファイルを選んでください');
          return;
        }
        var reader = new FileReader();
        reader.onload = function(evt) {

          //読み込み画像を設定
          $("#image").attr({"src":reader.result});

          //画像をSVGへ変換
          convertImageToSVG();

        };
        reader.readAsDataURL(file);

      });

      //画像をSVGへ変換
      /*---------------------------------------------------------------*/
      function convertImageToSVG(){

        //画像読み込み
        var img = new Image();
        img.src = $("#image").attr("src");
        img.onload = function(){

          //スタイルの調整
          $("#svg").attr({"width" : img.width ,"height" : img.height});
          $("#demo").css({"width":img.width + "px", "height": img.height + "px"});

          //画像をSVGにして描画
          var result = Potrace.trace( img );
          var path = result._outpath;
          var node = result.toPathElement();
          $("#svg").append(node);

          //アニメーション用パスの作成
          var pathObj = {
            "demo": {
              "strokepath": [
                {
                  "path": path,
                  "duration": 2400
                }
              ],
              "dimensions": {
                "width": img.width,
                "height": img.height
              }
            }
          };
          //console.log(pathObj);

          //SVGアニメーション
          $('#demo').lazylinepainter({
            "svgData": pathObj,
            "strokeWidth": 3,
            "strokeColor": "#e09b99",
            "onComplete" : function(){
              //
            }
          }).lazylinepainter('paint');

        }

      }

    });
  </script>
  <style type="text/css">
    body{
      text-align: center;
    }
    #svg,#demo{
      display: inline;
    }
  </style>
</head>
<body>
<h2>画像からSVGアニメーション</h2>
<input id="file" type="file" name="img"><br/>
<img id="image"/>
<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
<div id='demo'></div>
</body>
</html>