完成gif插件

packages/artplayer/src/player/screenshotMix.js

@@ -1,4 +1,4 @@
-import { setStyle, secondToTime } from '../utils';
+import { secondToTime, downloadImage } from '../utils';
 
 export default function screenshotMix(art, player) {
     const {
@@ -13,13 +13,7 @@ export default function screenshotMix(art, player) {
         canvas.height = $video.videoHeight;
         canvas.getContext('2d').drawImage($video, 0, 0);
         const dataUri = canvas.toDataURL('image/png');
-        const elink = document.createElement('a');
-        setStyle(elink, 'display', 'none');
-        elink.href = dataUri;
-        elink.download = `${option.title || 'artplayer'}_${secondToTime($video.currentTime)}.png`;
-        document.body.appendChild(elink);
-        elink.click();
-        document.body.removeChild(elink);
+        downloadImage(dataUri, `${option.title || 'artplayer'}_${secondToTime($video.currentTime)}.png`);
         return dataUri;
     }
 

packages/artplayer/src/style/bottom.scss

@@ -136,7 +136,9 @@
                 opacity: .9;
                 font-size: 12px;
                 height: 36px;
+                min-width: 36px;
                 line-height: 36px;
+                text-align: center;
                 cursor: pointer;
                 .art-icon {
                     display: flex;

packages/artplayer/src/utils/index.js

@@ -170,3 +170,13 @@ export function vttToBlob(vttText) {
         }),
     );
 }
+
+export function downloadImage(url, name) {
+    const elink = document.createElement('a');
+    setStyle(elink, 'display', 'none');
+    elink.href = url;
+    elink.download = name;
+    document.body.appendChild(elink);
+    elink.click();
+    document.body.removeChild(elink);
+}