Javascript 下载多个html5生成的图像作为zip文件_Javascript

Javascript 下载多个html5生成的图像作为zip文件

javascript

Javascript 下载多个html5生成的图像作为zip文件,javascript,Javascript,我正在建立一个视频托管网站。我的视频播放器通过onclick（）函数生成视频播放器屏幕截图。我也不确定这些图像是否在生成后被删除或存储我尝试在这里冲浪，试图找到一个明确的帮助，因为我缺乏javascript知识，这太令人沮丧了。请帮帮我。如果您需要更多信息，请询问我。：）这是我的html： <body> <div id="videoPanel"> <div id="instructions"> <

我正在建立一个视频托管网站。我的视频播放器通过onclick（）函数生成视频播放器屏幕截图。我也不确定这些图像是否在生成后被删除或存储

我尝试在这里冲浪，试图找到一个明确的帮助，因为我缺乏javascript知识，这太令人沮丧了。请帮帮我。如果您需要更多信息，请询问我。：）

这是我的html：

    <body>
      <div id="videoPanel">
        <div id="instructions">
          <video id="my_video_1" class="video-js vjs-default-skin" width="720px" height="400px" controls preload="none" poster='' autoplay data-setup='{ "aspectRatio":"640:500", "playbackRates": [1, 1.5, 2] }'>
            <source src="/Custom-Video-Player/Masamune kun no Revenge - 07.mp4" type='video/mp4' />
          </video>
        </div>
        <button id="clicker" onclick="shoot()">Capture</button><br />
        <button id="download" onclick=""> download</button> <br/>
        <div id="output" style="display: inline-block; top: 4px; position: relative; border: dotted 1px #ccc; padding: 2px;"></div>

      </div>
    </body>


捕获

下载

这是生成屏幕截图的javascript：

var videoId = 'my_video_1';
var scaleFactor = 0.25;
var snapshots = [];

var w = 720 * scaleFactor;
var h = 400 * scaleFactor;

function capture(video, scaleFactor) {
  if (scaleFactor == null) {
    scaleFactor = 1;
  }

  var canvas = document.createElement('canvas');
  canvas.width = w;
  canvas.height = h;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(video, 0, 0, w, h);
  return canvas;
}

function shoot() {
    var video = document.getElementById(videoId);
    var output = document.getElementById('output');
    var canvas = capture(video, scaleFactor);
    canvas.onclick = function () {
      window.open(this.toDataURL());
    };
    snapshots.unshift(canvas);
    output.innerHTML = '';
    for (var i = 0; i < 4; i++) {
      output.appendChild(snapshots[i]);
    }
}

var videoId='my_video_1'；
var scaleFactor=0.25；
var快照=[]；
var w=720*比例因子；
var h=400*scaleFactor；
函数捕获（视频、缩放因子）{
if（scaleFactor==null）{
scaleFactor=1；
}
var canvas=document.createElement（'canvas'）；
画布宽度=w；
canvas.height=h；
var ctx=canvas.getContext（'2d'）；
ctx.drawImage（视频，0，0，w，h）；
返回画布；
}
函数shot（）{
var video=document.getElementById（videoId）；
var output=document.getElementById（'output'）；
var canvas=捕获（视频、缩放因子）；
canvas.onclick=函数（）{
window.open（this.toDataURL（））；
};
快照。取消移动（画布）；
output.innerHTML=''；
对于（变量i=0；i<4；i++）{
输出.appendChild（快照[i]）；
}
}

还有一个下载按钮，我希望它能够正常工作：

它将根据“捕获”按钮的生成对所有图像进行编号，将它们全部放在zip文件中，并在按下下载时下载。

欢迎使用stack overflow！既然您已经有了数据，我会尝试使用lib，比如-我认为浏览器没有标准化的方法来帮助您创建拉链。我如何将图像加载到zip文件？给它们编号？然后执行下载？我是JavaScript初学者，它的复杂性来自C++。