Question

我的应用程序用于视频搜索，用户可以搜索视频;然后他可以观看它并建议该视频的图像（对应于时间轴的位置）作为视频的海报，但这个图像应该在管理员验证之前。为此，我应该将此图像保存到文件夹中我的项目（在服务器上），以便能够将其传递给管理员。当用户在时间线的位置上进行陈词滥调时（事件为“搜索”且函数列表器为“seekListener”），将触发从视频中获取图像的代码

我的问题是：如何将blob图像转换为带有名称和扩展名的卷轴图像，并将其保存在我项目的文件夹中？注意：我正在使用projekktor作为播放器

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Projekktor - simply mighty video</title>
    <style type="text/css">
    body { background-color: #fdfdfd; padding: 0 20px; color:#000; font: 13px/18px monospace; width: 800px;}
    a { color: #360; }
    h3 { padding-top: 20px; }
    </style>
 
    <!-- Load player theme -->
    <link rel="stylesheet" href="themes/maccaco/projekktor.style.css" type="text/css" media="screen" />
 
    <!-- Load jquery -->
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
 
    <!-- load projekktor -->
    <script type="text/javascript" src="projekktor-1.3.09.min.js"></script>
 
</head>
<body>
<div id="video">
<video class="projekktor" poster="http://www.projekktor.com/wp-content/manual/intro.png" title="This is Projekktor" width="640" height="385" controls id="player_a">
    <source src="media/intro.mp4" type="video/mp4" />
   </video>
</div>
 
<script type="text/javascript">
/*
This script is just an example and included to build up the "demo status panel".
For daily practice installing the player to your site is MUCH simpler and stright forward.
Please take a look at http://www.projekktor.com/docs/quickinstall
*/
jQuery(document).ready(function($) {
 
 
 
    /*********************************************************************
    Some player event listeners to set general status information:
    *********************************************************************/
 
       var seekListener=function(Obj) {    
   $('#mouseclick').html(myPlayer.getPosition());
   //$('#mouseclick').html(myPlayer.getItem(current))
   //$('#mouseclick').html(myPlayer.getMediaType())
//alert(myPlayer.getItemMedia())
   //alert(projekktor('video').getPosition())
    //$('#time').text()
    // 1. Obtenir une référence sur l’élément <video>
var player = document.querySelector('#player_a video');
 
// 2. Créer un canevas aux dimensions de la vidéo
var canvas = document.createElement('canvas');
canvas.width = player.videoWidth;
canvas.height = player.videoHeight;
 
// 3. Obtenir le contexte de dessin du canevas
var cx = canvas.getContext('2d');
 
// 4. Capturer l’image actuelle de la vidéo
cx.drawImage(player, 0, 0, canvas.width, canvas.height);
 
// 5. Convertir l’image capturée en fichier, et créer un lien vers ce fichier
 
canvas.toBlob(function (blob) {
  var a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.target = '_blank';
  a.textContent = 'Voir l’image capturée';
  document.getElementById('mouseclick').appendChild(a);
});
 
    }
 
 
    /*********************************************************************
      Configure and instantiate the player and
      apply an "onReady" callback function
    *********************************************************************/    
    var myPlayer = projekktor('#player_a', {
    debug: false,
    playerFlashMP4: 'http://www.projekktor.com/wp-content/manual/jarisplayer.swf',
    playerFlashMP3: 'http://www.projekktor.com/wp-content/manual/jarisplayer.swf',    
    plugin_display: {
           logoImage: "yourlogo.png"
    }, controls: true,
    addplugins: ['controlbar']
    }, function(player) {
 
    // add listeners
    player.addListener('seek', seekListener);
 
 
 
    });    
 
});
</script>
<div id="panel">
    <ul class="info">
 
    <li>Mouse click <span id="mouseclick" ></span></li>
 
    </ul>
 
 
    <div style="clear:both;"></div>
</div>
 
 
</body>
</html>

将图像blob保存在项目的文件夹中

0 个答案: