nextjsで動画を画像に変換するフロント部分 公開日：2024.11.08 更新日：2024.11.08 文字数：2908文字 Wordpress const asyncTask2 = async () => { /* const isVideoFile = (file) => { return file && typeof file.type === 'string' && file.type.startsWith('video/'); }; //動画ファイルかどうか if (isVideoFile(video)) { // 動画ファイルを要素に読み込む const jpeg_data = new Promise((resolve, reject) => { const videoElement = document.createElement('video'); videoElement.src = URL.createObjectURL(video); videoElement.load(); videoElement.onloadedmetadata = () => { // 任意のフレームを指定して抽出 const time = 0.1; // 抽出したい秒数に応じて変更 videoElement.currentTime = time; }; videoElement.onseeked = () => { const canvas = document.createElement('canvas'); canvas.width = videoElement.videoWidth; canvas.height = videoElement.videoHeight; const context = canvas.getContext('2d'); context.drawImage(videoElement, 0, 0, canvas.width, canvas.height); const imageDataUrl = canvas.toDataURL('image/jpeg'); resolve(imageDataUrl); }; videoElement.onerror = (error) => { reject(Error loading video: ${error.message}); }; }); const jpegBase64 = await jpeg_data; const base64Data = jpegBase64.replace(/^data:image\/jpeg;base64,/, ''); const response = await fetch('/api/creatJpegFromMov', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ imageData: base64Data, userId: currentUserInfo.id, }), }); if (response.ok) { console.log('JPEG data uploaded successfully'); let { imgFilePath } = await response.json(); return imgFilePath; } else { console.error('Failed to upload JPEG data'); } } else { return ""; } */ };
