canvas 生成图像的错误输出

bad output of canvas generated image

所以下面的代码只是为了让用户上传视频,然后当按下按钮 'choose thumbnail' 时,会从 canvas 生成一张图像,代表当前显示的图像视频正在播放...也就是说,图像成为用户通过寻找特定视频时间选择的视频的缩略图,暂停视频并创建缩略图,该缩略图是视频暂停时的图像。

一切都很好,除了图像太长..在某种程度上...图像是按我想要的尺寸创建的,但一些额外的白色 space 仍然算作图像....有很多白色 space 就是图像。

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

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>

你明白我在说什么吗about.the 图片太大了,但我看不到图片的'large part'。

另外,我不知道他们是什么意思 'c is undefined'

提前致谢...

(1)修复c is undefined错误:

//On clicking the Download button 部分剪切 var cvar ctx 声明,并将它们与其他 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.widthc.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();

});

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

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