Przeglądaj źródła

generate screenshot by blob and createObjectURL

DIYgod 7 lat temu
rodzic
commit
d3847a30a0
2 zmienionych plików z 15 dodań i 6 usunięć
  1. 13 4
      src/js/controller.js
  2. 2 2
      src/template/player.art

+ 13 - 4
src/js/controller.js

@@ -200,14 +200,23 @@ class Controller {
     initScreenshotButton () {
         if (this.player.options.screenshot) {
             this.player.template.camareButton.addEventListener('click', () => {
-                const canvas = document.createElement("canvas");
+                const canvas = document.createElement('canvas');
                 canvas.width = this.player.video.videoWidth;
                 canvas.height = this.player.video.videoHeight;
                 canvas.getContext('2d').drawImage(this.player.video, 0, 0, canvas.width, canvas.height);
 
-                const dataURL = canvas.toDataURL();
-                this.player.template.camareButton.href = dataURL;
-                this.player.template.camareButton.download = "DPlayer.png";
+                let dataURL;
+                canvas.toBlob((blob) => {
+                    dataURL = URL.createObjectURL(blob);
+                    const link = document.createElement('a');
+                    link.href = dataURL;
+                    link.download = 'DPlayer.png';
+                    link.style.display = 'none';
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link);
+                    URL.revokeObjectURL(dataURL);
+                });
 
                 this.player.events.trigger('screenshot', dataURL);
             });

+ 2 - 2
src/template/player.art

@@ -111,9 +111,9 @@
         </div>
         {{ /if }}
         {{ if options.screenshot }}
-        <a href="#" class="dplayer-icon dplayer-camera-icon" data-balloon="{{ tran('Screenshot') }}" data-balloon-pos="up">
+        <div class="dplayer-icon dplayer-camera-icon" data-balloon="{{ tran('Screenshot') }}" data-balloon-pos="up">
             <span class="dplayer-icon-content">{{@ icons.camera }}</span>
-        </a>
+        </div>
         {{ /if }}
         <div class="dplayer-comment">
             <button class="dplayer-icon dplayer-comment-icon" data-balloon="{{ tran('Send danmaku') }}" data-balloon-pos="up">