修复视频获取帧图问题

This commit is contained in:
al 2024-11-04 14:55:23 +08:00
parent d6f48301ef
commit c1eeca4e81
4 changed files with 61 additions and 50 deletions

View File

@ -286,8 +286,8 @@ export default function CreateProfile() {
} }
} }
} }
}
if (isPrice) return; if (isPrice) return;
if (isSubmitting) return;
const superfan_price_list = superSingle.map((it, index) => ({ const superfan_price_list = superSingle.map((it, index) => ({
period: index, period: index,
enable: it.enable ? 1 : 0, enable: it.enable ? 1 : 0,
@ -295,7 +295,6 @@ export default function CreateProfile() {
is_superfanship_give_wechat: it.wechatFree ? 1 : 0, is_superfanship_give_wechat: it.wechatFree ? 1 : 0,
})); }));
setIsSubmitting(true); setIsSubmitting(true);
try { try {
const body = { const body = {
profile: spaceIntro, profile: spaceIntro,
@ -331,7 +330,6 @@ export default function CreateProfile() {
} finally { } finally {
setIsSubmitting(false); setIsSubmitting(false);
} }
}
}; };
return ( return (
<div> <div>

View File

@ -494,10 +494,13 @@ export default function CompleteStreamerInformation() {
}; };
const creatVideoCanvas = (file) => { const creatVideoCanvas = (file) => {
if (typeof window == "undefined") return; if (typeof window == "undefined") return;
const videoD = document.getElementById("videoD"); const videoD = document.getElementById("video_complete");
const url = URL.createObjectURL(file); const url = URL.createObjectURL(file);
videoD.src = url; videoD.src = url;
videoD.addEventListener("loadeddata", function () { videoD.addEventListener("loadeddata", function () {
videoD.currentTime = 1;
});
videoD.addEventListener("seeked", function () {
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
canvas.width = videoD.videoWidth; canvas.width = videoD.videoWidth;
canvas.height = videoD.videoHeight; canvas.height = videoD.videoHeight;
@ -1127,6 +1130,12 @@ export default function CompleteStreamerInformation() {
<SpinLoading color="default" /> <SpinLoading color="default" />
</div> </div>
</Mask> </Mask>
<div className="hidden">
<video id="video_complete" controls autoPlay name="media">
<source />
您的浏览器不支持 Video 标签
</video>
</div>
</div> </div>
); );
} }

View File

@ -191,10 +191,13 @@ export default function EditStreamerMedia() {
const creatVideoCanvas = (file) => { const creatVideoCanvas = (file) => {
if (typeof window == "undefined") return; if (typeof window == "undefined") return;
const videoD = document.getElementById("videoD"); const videoD = document.getElementById("video_edit_streamer");
const url = URL.createObjectURL(file); const url = URL.createObjectURL(file);
videoD.src = url; videoD.src = url;
videoD.addEventListener("loadeddata", function () { videoD.addEventListener("loadeddata", function () {
videoD.currentTime = 1;
});
videoD.addEventListener("seeked", function () {
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
canvas.width = videoD.videoWidth; canvas.width = videoD.videoWidth;
canvas.height = videoD.videoHeight; canvas.height = videoD.videoHeight;
@ -361,7 +364,7 @@ export default function EditStreamerMedia() {
</div> </div>
</div> </div>
<div className="hidden"> <div className="hidden">
<video id="videoD" controls autoPlay name="media"> <video id="video_edit_streamer" controls name="media">
<source /> <source />
您的浏览器不支持 Video 标签 您的浏览器不支持 Video 标签
</video> </video>

View File

@ -100,19 +100,20 @@ export default function UploadImgs({
}; };
const creatVideoCanvas = (file) => { const creatVideoCanvas = (file) => {
if (typeof window == "undefined") return; if (typeof window == "undefined") return;
const videoD = document.getElementById("videoD"); const videoD = document.getElementById("video_upload");
const url = URL.createObjectURL(file); const url = URL.createObjectURL(file);
videoD.src = url; videoD.src = url;
videoD.addEventListener("loadeddata", function () { videoD.addEventListener("loadeddata", function () {
videoD.currentTime = 0; videoD.currentTime = 1;
videoD.pause(); // 可选:确保视频在重置后不会自动播放 });
videoD.addEventListener("seeked", function () {
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
canvas.width = videoD.videoWidth; canvas.width = videoD.videoWidth;
canvas.height = videoD.videoHeight; canvas.height = videoD.videoHeight;
canvas canvas
.getContext("2d") .getContext("2d")
.drawImage(videoD, 0, 0, canvas.width, canvas.height); .drawImage(videoD, 0, 0, canvas.width, canvas.height);
const canvasImg = canvas.toDataURL(); const canvasImg = canvas.toDataURL("image/png");
setFrameImage((old) => ({ ...old, src: canvasImg })); setFrameImage((old) => ({ ...old, src: canvasImg }));
setFilesUrls([canvasImg]); setFilesUrls([canvasImg]);
// 释放URL对象 // 释放URL对象
@ -176,7 +177,7 @@ export default function UploadImgs({
</label> </label>
<input <input
type="file" type="file"
multiple="multiple" multiple={type == 1}
id="uploadAvatarBtn" id="uploadAvatarBtn"
style={{ display: "none" }} style={{ display: "none" }}
// accept="image/png, image/jpeg, video/*" // accept="image/png, image/jpeg, video/*"
@ -188,7 +189,7 @@ export default function UploadImgs({
)} )}
</div> </div>
<div className="hidden"> <div className="hidden">
<video id="videoD" controls autoPlay name="media"> <video id="video_upload" controls autoPlay name="media">
<source /> <source />
您的浏览器不支持 Video 标签 您的浏览器不支持 Video 标签
</video> </video>