时间戳

首页 > 解决方案 > 将多个 html5 生成的图像下载为 zip 文件

javascript - 将多个 html5 生成的图像下载为 zip 文件

问题描述

我正在建立一个视频托管网站。我的视频播放器通过 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]);
    }
}

还有一个下载按钮，我希望能够像这样运行：

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

标签： javascript

解决方案

推荐阅读