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 c
和 var 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.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();
});
这应该会提供与视频分辨率相同大小的清晰图像。
让我知道进展如何。谢谢。
所以下面的代码只是为了让用户上传视频,然后当按下按钮 '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 c
和 var 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.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();
});
这应该会提供与视频分辨率相同大小的清晰图像。
让我知道进展如何。谢谢。