Update index.html

index.html

@@ -521,7 +521,7 @@
     </div>
     <!-- フレームプレビュー -->
     <div class="frame-preview" id="framePreview">
-        <img id="previewImage" src="">
+        <canvas id="canvas" crossorigin="anonymous" id="previewImage">
         <div class="frame-time" id="frameTime">
         </div>
     </div>
@@ -874,7 +874,6 @@ function setupFramePreview() {
     // キャッシュがあればそれを使う
     const cacheKey = Math.floor(previewTime);
     if (frameCache[cacheKey]) {
-      previewImage.src = frameCache[cacheKey];
       return;
     }
     
@@ -885,8 +884,6 @@ function setupFramePreview() {
       canvas.width = VideoForThumbnail.videoWidth;
       canvas.height = VideoForThumbnail.videoHeight;
       ctx.drawImage(VideoForThumbnail, 0, 0, canvas.width, canvas.height);
-      const imageData = canvas.toDataURL('image/jpeg');
-      previewImage.src = imageData;
       frameCache[cacheKey] = imageData; // キャッシュに保存
     }, { once: true });
   });
@@ -970,7 +967,6 @@ function setupFramePreview() {
           // キャッシュがあればそれを使う
           const cacheKey = Math.floor(previewTime);
           if (frameCache[cacheKey]) {
-            previewImage.src = frameCache[cacheKey];
             return;
           }
           
@@ -982,7 +978,6 @@ function setupFramePreview() {
             endTime: previewTime + 0.1
           }).then((frames) => {
             if (frames.length > 0) {
-              previewImage.src = frames[0].image;
               frameCache[cacheKey] = frames[0].image; // キャッシュに保存
             }
           }).catch(err => {