Question

因此，下面的代码仅用于允许用户上传视频，然后当按下“选择缩略图”按钮时，会从画布生成图像，该图像代表了视频播放时正在显示的当前图像...也就是说，图像变成用户通过查找特定视频时间选择的视频的缩略图，暂停视频并创建缩略图，该缩略图是暂停时视频的图像。

一切都很好，除了图像太长..在某种程度上...以我想要的尺寸创建了图像，但是仍然有很多额外的空白被算作图像。...图像周围有很多空白。

此屏幕截图可能会帮助...

var _CANVAS = document.querySelector("#myCanvas"),
  _CTX = _CANVAS.getContext("2d"),
  _VIDEO = document.querySelector("#main-video");

document.getElementById("image").src = _CANVAS.toDataURL();


function showit() {
  document.getElementById("other").style.display = 'block';

}
// Upon click this should should trigger click on the #file-to-upload file input element
// This is better than showing the not-good-looking file input element
document.querySelector("#diver").addEventListener('click', function() {
  document.querySelector("#file-to-upload").click();
});

// When user chooses a MP4 file
document.querySelector("#file-to-upload").addEventListener('change', function() {
  // Validate whether MP4
  if (['video/mp4'].indexOf(document.querySelector("#file-to-upload").files[0].type) == -1) {
    alert('Error : Only MP4 format allowed');
    return;
  }

  // Hide upload button
  document.querySelector("#upload-button").style.display = 'none';

  // Object Url as the video source
  document.querySelector("#main-video source").setAttribute('src', URL.createObjectURL(document.querySelector("#file-to-upload").files[0]));

  // Load the video and show it
  _VIDEO.load();
  _VIDEO.style.display = 'inline';

  // Load metadata of the video to get video duration and dimensions
  _VIDEO.addEventListener('loadedmetadata', function() {
    console.log(_VIDEO.duration);
    var video_duration = _VIDEO.duration,
      duration_options_html = '';

    // Set options in dropdown at 4 second interval
    for (var i = 0; i < Math.floor(video_duration); i = i + 2) {
      duration_options_html += '<option value="' + i + '">' + i + '</option>';
    }
    document.querySelector("#set-video-seconds").innerHTML = duration_options_html;

    // Show the dropdown container
    document.querySelector("#thumbnail-container").style.display = 'block';

    // Set canvas dimensions same as video dimensions
    _CANVAS.width = _VIDEO.videoWidth;
    _CANVAS.height = _VIDEO.videoHeight;
  });
});

// On changing the duration dropdown, seek the video to that duration
document.querySelector("#set-video-seconds").addEventListener('change', function() {
  _VIDEO.currentTime = document.querySelector("#set-video-seconds").value;

  // Seeking might take a few milliseconds, so disable the dropdown and hide download link

});

// Seeking video to the specified duration is complete
document.querySelector("#main-video").addEventListener('timeupdate', function() {
  // Re-enable the dropdown and show the Download link
  document.querySelector("#set-video-seconds").disabled = false;
  document.querySelector("#get-thumbnail").style.display = 'inline';
});

// On clicking the Download button set the video in the canvas and download the base-64 encoded image data
document.querySelector("#get-thumbnail").addEventListener('click', function() {

  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.drawImage(_VIDEO, 1, 1, _VIDEO.videoWidth / 8, _VIDEO.videoHeight / 8);
  document.getElementById("image").src = c.toDataURL();


});

document.querySelector("#get-thumbnail").setAttribute('href', c.toDataURL());
document.querySelector("#get-thumbnail").setAttribute('download', 'thumbnai.png');

body {
  margin: 0;
}

#video-demo-container {
  width: 400px;
  margin: 40px auto;
}

#main-video {
  display: none;
  max-width: 400px;
}

#thumbnail-container {
  display: none;
}

#get-thumbnail {
  display: none;
}

#video-canvas {
  display: block;
}

#upload-button {
  width: 150px;
  display: block;
  margin: 20px auto;
}

#file-to-upload {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no">
</head>

<body>
  <div style="border:2px dashed blue;" id="diver">

    <div id="video-demo-container">
      <button id="upload-button">Select MP4 Video</button>
      <input type="file" id="file-to-upload" accept="video/mp4" />
      <video id="main-video" controls>
		<source type="video/mp4">
	</video>

      <p id="yes"></p>

    </div>


  </div>
  <p id="thumbnail-container"><button onclick="showit()">Confirm</button> <button>Undo</button></p>

  <br>


  <!-- other content to choose -->
  <div style="border:2px solid green;display:none" id="other">
    <br>
    <div style="margin-left:10%;">
      <p style="font-size:160%">
        <font style="font-weight:bolder">(1)</font>Choose thumbnail</p>

      <font style="font-weight:bolder;margin-left:3%;">(a)Choose from video clip:</font><br><br>

      <div id="allfloat">

        <div style="margin-left:5%;">
          Seek to
          <select id="set-video-seconds"></select> seconds <br><br>

          <button id="get-thumbnail" href="#" style="text-decoration:none;background-color:blue;padding-left,padding-right:2%;color:white;">Create Thumbnail</button>
        </div>






        <p style="font-weight:bolder;margin-left:5%;">Thumbnail:</p>

        <img id="image" src width="200%" height="200%" style="margin-left:5%">


        

      </div>

    </div>
  </div>
  <canvas id="myCanvas" style="display:none;">
 Your browser does not support the HTML5 canvas tag.
 </canvas>

你明白我在说什么。图像太大了，但是看不到图像的“大部分”。

此外，我不知道它们是什么意思，因为“ c是未定义的”

预先感谢...

Answer 1

（1）修复 c is undefined 错误：

从 var c 部分剪切var ctx和//On clicking the Download button声明，并将其粘贴到其他var声明中。这将使它具有全局访问权限（而不仅仅是对该特定功能的本地访问）：

// when you do this part
var _CANVAS = document.querySelector("#myCanvas");
var _CTX = _CANVAS.getContext("2d");
var _VIDEO = document.querySelector("#main-video");

// also add this part below it
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

（2）：确定比例或质量：

使用ctx.drawImage绘制缩略图时，请使用c.width和c.height的值。示例：

// On clicking the Download button set the video in the canvas and download the base-64 encoded image data
document.querySelector("#get-thumbnail").addEventListener('click', function() {

ctx.drawImage(_VIDEO, 1, 1, c.width, c.height); //use c.width not _VIDEO.videoWidth... etc
document.getElementById("image").src = c.toDataURL();

});

应该可以提供与视频分辨率相同大小的清晰图像。

让我知道如何进行。谢谢。

画布生成的图像输出不正确

1 个答案: