Add the capture function

spring-raining · Mar 4, 2014 · dc4392c · dc4392c
1 parent d0e8ac9
commit dc4392c
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -3,6 +3,8 @@
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="description" content="ブラウザ上で動画からgifアニメを作ります。">
+    <meta name="keywords" content="gif,gifアニメ,動画,giraf,anime,animation">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Giraf</title>
 
@@ -23,7 +25,8 @@
             <li class="dropdown">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span></a>
                 <ul class="dropdown-menu">
-                    <li class="dropdown-header">Giraf v1.0</li>
+                    <li class="dropdown-header">Giraf v1.1</li>
+                    <li><a href="" data-toggle="modal" data-target="#modal_updateinfo">アップデート情報</a></li>
                     <li><a href="" data-toggle="modal" data-target="#modal_acknowledgement">謝辞</a></li>
                     <li class="divider"></li>
                     <li><a href="http://github.com/spring-raining/Giraf" target="_blank">Github</a></li>
@@ -104,6 +107,9 @@ <h3>ここにドラッグ&ドロップ</h3><br>
         <button type="button" id="make" class="btn btn-primary disabled">
             <span class="glyphicon glyphicon-film"></span> 作成
         </button>
+        <button type="button" id="capture" class="btn btn-info disabled">
+            <span class="glyphicon glyphicon-camera"></span> キャプチャ
+        </button>
     </div>
 </div>
 
@@ -220,7 +226,7 @@ <h4 class="modal-title" id="modal_effect_label">効果を追加</h4>
 </div>
 
 <!-- 画像を切り抜き -->
-<div class="modal fade" id="modal_crop" tabindex="-1" role="dialog" aria-labelledby="modal_gif_size_label" aria-hidden="true">
+<div class="modal fade" id="modal_crop" tabindex="-1" role="dialog" aria-labelledby="modal_crop_label" aria-hidden="true">
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
@@ -256,7 +262,7 @@ <h4 class="modal-title" id="modal_crop_label">画像を切り抜き</h4>
 </div>
 
 <!-- 謝辞 -->
-<div class="modal fade" id="modal_acknowledgement" tabindex="-1" role="dialog" aria-labelledby="modal_gif_size_label" aria-hidden="true">
+<div class="modal fade" id="modal_acknowledgement" tabindex="-1" role="dialog" aria-labelledby="modal_acknowledgement_label" aria-hidden="true">
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
@@ -280,6 +286,31 @@ <h4 class="modal-title" id="modal_acknowledgement_label">謝辞</h4>
     </div>
 </div>
 
+<!-- アップデート情報 -->
+<div class="modal fade" id="modal_updateinfo" tabindex="-1" role="dialog" aria-labelledby="modal_updateinfo_label" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                <h4 class="modal-title" id="modal_updateinfo_label">アップデート情報</h4>
+            </div>
+            <div class="modal-body">
+                <p>
+                    v1.1 (2014/3/5)
+                    <ul><li>キャプチャ機能追加</li></ul>
+                </p>
+                <p>
+                    v1.0 (2014/2/26)
+                    <ul><li>公開</li></ul>
+                </p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
 <script src="js/bootstrap.min.js"></script>

diff --git a/js/main.coffee b/js/main.coffee
@@ -92,6 +92,7 @@ $ ->
       # --- video loaded ---
       thumbnails = new Thumbnails
       settings.disable false
+      $("#capture").removeClass "disabled"
 
       #$(".thumbnail").each ->
         #c = $(this).get(0)
@@ -170,7 +171,9 @@ $ ->
         gif.on "finished", (blob) ->
           img = $("#result_image").get(0)
           img.src = URL.createObjectURL blob
-          $("#result_status").text "Rendering finished : Filesize " + if (blob.size > 1000000) then "#{ (blob.size / 1000000).toFixed 2 }MB" else "#{ (blob.size / 1000).toFixed 2 }KB"
+          $("#result_status").text "Rendering finished : Filesize " +
+          if (blob.size >= 1000000) then "#{ (blob.size / 1000000).toFixed 2 }MB"
+          else "#{ (blob.size / 1000).toFixed 2 }KB"
           makeFinalize()
 
         video.controls = false
@@ -230,6 +233,29 @@ $ ->
 
         deferred.resolve()
 
+      $("#capture").click ->
+        video = $video.get(0)
+        cropCoord = settings.getCropCoord()
+        sourceWidth = if settings.isCrop() then cropCoord.w else video.videoWidth
+        sourceHeight = if settings.isCrop() then cropCoord.h else video.videoHeight
+        ratio = (settings.getGifSize sourceWidth) / sourceWidth
+        resultWidth = settings.getGifSize sourceWidth
+        resultHeight = sourceHeight * ratio
+
+        canvas = $("<canvas>").get(0)
+        context = canvas.getContext("2d")
+        canvas.width = resultWidth
+        canvas.height = resultHeight
+
+        if settings.isCrop() then context.drawImage video,
+          cropCoord.x, cropCoord.y, cropCoord.w, cropCoord.h, # source
+          0, 0, resultWidth, resultHeight                     # dest
+        else context.drawImage video,
+          0, 0, resultWidth, resultHeight
+        if settings.getEffectScript() isnt ""
+          eval settings.getEffectScript()
+        $("#result_image").attr "src", canvas.toDataURL()
+
 
 class Thumbnails
   constructor: () ->

diff --git a/js/main.js b/js/main.js