From e33934d982a24d1ec0be0ccc3886838435d6dfe7 Mon Sep 17 00:00:00 2001 From: Harvey Zack Date: Fri, 7 Dec 2018 10:12:46 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20gif=20=E6=8F=92=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/gif/js/common.js | 1 + docs/uncompiled/artplayer-plugin-gif.js | 62 ++++++++++++++++++---- packages/artplayer-plugin-gif/package.json | 2 + packages/artplayer-plugin-gif/src/index.js | 23 ++++---- 4 files changed, 69 insertions(+), 19 deletions(-) diff --git a/docs/gif/js/common.js b/docs/gif/js/common.js index a6a154bea..932b11a14 100644 --- a/docs/gif/js/common.js +++ b/docs/gif/js/common.js @@ -9,6 +9,7 @@ console.info('Welcome, if you like it, consider star it, thank you.'); console.info('https://github.com/zhw2590582/ArtPlayer'); + console.warn('For web video, this plugin depends on the network, so the results are not necessarily ideal.'); window.addEventListener('error', function(err) { console.error(err.message); diff --git a/docs/uncompiled/artplayer-plugin-gif.js b/docs/uncompiled/artplayer-plugin-gif.js index d5867c8fa..71c6e0083 100644 --- a/docs/uncompiled/artplayer-plugin-gif.js +++ b/docs/uncompiled/artplayer-plugin-gif.js @@ -42,6 +42,8 @@ var objectSpread = _objectSpread; + var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; + function createCommonjsModule(fn, module) { return module = { exports: {} }, fn(module, module.exports), module.exports; } @@ -2719,10 +2721,49 @@ }, typeof window !== "undefined" ? window.navigator : {}); }); + var b64toBlob = createCommonjsModule(function (module) { + (function (root, globalName, factory) { + if (module.exports) { + // Node: + module.exports = factory(); // Use module export as simulated ES6 default export: + + module.exports.default = module.exports; + } else { + // Browser: + window[globalName] = factory(); + } + })(commonjsGlobal, 'b64toBlob', function () { + + return function b64toBlob(b64Data, contentType, sliceSize) { + contentType = contentType || ''; + sliceSize = sliceSize || 512; + var byteCharacters = atob(b64Data); + var byteArrays = []; + + for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) { + var slice = byteCharacters.slice(offset, offset + sliceSize); + var byteNumbers = new Array(slice.length); + + for (var i = 0; i < slice.length; i++) { + byteNumbers[i] = slice.charCodeAt(i); + } + + var byteArray = new Uint8Array(byteNumbers); + byteArrays.push(byteArray); + } + + var blob = new Blob(byteArrays, { + type: contentType + }); + return blob; + }; + }); + }); + function i18nMix(i18n) { i18n.update({ 'zh-cn': { - 'Long press, gif length is between 1 second and 5 seconds': '长按，gif 长度为 1 ~ 5 秒', + 'Long press, gif length is between 1 second and 10 seconds': '长按，gif 长度为 1 ~ 10 秒', 'Gif time is too short': 'Gif 时间太短', 'Start creating gif...': '开始创建 gif...', 'Create gif successfully': '创建 gif 成功', @@ -2730,7 +2771,7 @@ 'Release the mouse to start': '放开鼠标即可开始' }, 'zh-tw': { - 'Long press, gif length is between 1 second and 5 seconds': '長按，gif 長度為 1 ~ 5 秒', + 'Long press, gif length is between 1 second and 10 seconds': '長按，gif 長度為 1 ~ 10 秒', 'Gif time is too short': 'Gif 時間太短', 'Start creating gif...': '開始創建 gif...', 'Create gif successfully': '創建 gif 成功', @@ -2770,6 +2811,7 @@ } }); var $progress = layers['artplayer-plugin-gif-progress'].$ref; + var timeLimit = 10000; var isProcessing = false; var pressStartTime = 0; var progressTimer = null; @@ -2791,7 +2833,7 @@ } else if (pressTime < 1000) { notice.show(i18n.get('Gif time is too short')); } else { - var numFrames = Math.floor(clamp(pressTime, 1000, 5000) / 100); + var numFrames = Math.floor(clamp(pressTime, 1000, timeLimit) / 100); var videoWidth = $video.videoWidth, videoHeight = $video.videoHeight; art.plugins.artplayerPluginGif.create({ @@ -2815,7 +2857,7 @@ cleanTimer(); offset = player.currentTime; pressStartTime = new Date(); - notice.show(i18n.get('Long press, gif length is between 1 second and 5 seconds')); + notice.show(i18n.get('Long press, gif length is between 1 second and 10 seconds')); (function loop() { progressTimer = setTimeout(function () { @@ -2827,7 +2869,7 @@ } else { notice.show(i18n.get('Release the mouse to start')); } - }, 50); + }, timeLimit / 100); })(); }); proxy(document, 'mouseup', function () { @@ -2848,18 +2890,20 @@ loading.show(); art.emit('artplayerPluginGif:start'); notice.show(i18n.get('Start creating gif...'), false); - console.log("Start time: ".concat(config.offset || 0, "s, Frames: ").concat(config.numFrames || 10, "p, Duration: ").concat(config.numFrames / 10 || 1, "s")); gifshot.createGIF(objectSpread({}, config, { video: [$video.src], - crossOrigin: 'Anonymous' + crossOrigin: 'anonymous' }), function (obj) { if (obj.error) { notice.show(obj.errorMsg); errorHandle(false, obj.errorMsg); } else if (typeof callback === 'function') { - callback(obj.image); + var base64String = obj.image.split(',')[1]; + var blob = b64toBlob(base64String, 'image/gif'); + var blobUrl = URL.createObjectURL(blob); notice.show(i18n.get('Create gif successfully')); - art.emit('artplayerPluginGif', obj.image); + art.emit('artplayerPluginGif', blobUrl); + callback(blobUrl); } isProcessing = false; diff --git a/packages/artplayer-plugin-gif/package.json b/packages/artplayer-plugin-gif/package.json index ca1d957a3..e766d814f 100644 --- a/packages/artplayer-plugin-gif/package.json +++ b/packages/artplayer-plugin-gif/package.json @@ -22,6 +22,8 @@ }, "homepage": "https://github.com/zhw2590582/ArtPlayer#readme", "dependencies": { + "b64-to-blob": "^1.2.19", + "blob-util": "^2.0.2", "gifshot": "^0.4.5" } } diff --git a/packages/artplayer-plugin-gif/src/index.js b/packages/artplayer-plugin-gif/src/index.js index e6af20acb..c71721843 100644 --- a/packages/artplayer-plugin-gif/src/index.js +++ b/packages/artplayer-plugin-gif/src/index.js @@ -1,9 +1,10 @@ import gifshot from 'gifshot'; +import b64toBlob from 'b64-to-blob'; function i18nMix(i18n) { i18n.update({ 'zh-cn': { - 'Long press, gif length is between 1 second and 5 seconds': '长按，gif 长度为 1 ~ 5 秒', + 'Long press, gif length is between 1 second and 10 seconds': '长按，gif 长度为 1 ~ 10 秒', 'Gif time is too short': 'Gif 时间太短', 'Start creating gif...': '开始创建 gif...', 'Create gif successfully': '创建 gif 成功', @@ -11,7 +12,7 @@ function i18nMix(i18n) { 'Release the mouse to start': '放开鼠标即可开始', }, 'zh-tw': { - 'Long press, gif length is between 1 second and 5 seconds': '長按，gif 長度為 1 ~ 5 秒', + 'Long press, gif length is between 1 second and 10 seconds': '長按，gif 長度為 1 ~ 10 秒', 'Gif time is too short': 'Gif 時間太短', 'Start creating gif...': '開始創建 gif...', 'Create gif successfully': '創建 gif 成功', @@ -51,6 +52,7 @@ function artplayerPluginGif(art) { }); const $progress = layers['artplayer-plugin-gif-progress'].$ref; + const timeLimit = 10000; let isProcessing = false; let pressStartTime = 0; let progressTimer = null; @@ -71,7 +73,7 @@ function artplayerPluginGif(art) { } else if (pressTime < 1000) { notice.show(i18n.get('Gif time is too short')); } else { - const numFrames = Math.floor(clamp(pressTime, 1000, 5000) / 100); + const numFrames = Math.floor(clamp(pressTime, 1000, timeLimit) / 100); const { videoWidth, videoHeight } = $video; art.plugins.artplayerPluginGif.create( { @@ -97,7 +99,7 @@ function artplayerPluginGif(art) { cleanTimer(); offset = player.currentTime; pressStartTime = new Date(); - notice.show(i18n.get('Long press, gif length is between 1 second and 5 seconds')); + notice.show(i18n.get('Long press, gif length is between 1 second and 10 seconds')); (function loop() { progressTimer = setTimeout(() => { const width = parseInt($progress.style.width, 10); @@ -107,7 +109,7 @@ function artplayerPluginGif(art) { } else { notice.show(i18n.get('Release the mouse to start')); } - }, 50); + }, timeLimit / 100); })(); }); @@ -128,23 +130,24 @@ function artplayerPluginGif(art) { loading.show(); art.emit('artplayerPluginGif:start'); notice.show(i18n.get('Start creating gif...'), false); - console.log(`Start time: ${config.offset || 0}s, Frames: ${config.numFrames || 10}p, Duration: ${config.numFrames / 10 || 1}s`); gifshot.createGIF( { ...config, video: [$video.src], - crossOrigin: 'Anonymous', + crossOrigin: 'anonymous', }, obj => { if (obj.error) { notice.show(obj.errorMsg); errorHandle(false, obj.errorMsg); } else if (typeof callback === 'function') { - callback(obj.image); + const base64String = obj.image.split(',')[1]; + const blob = b64toBlob(base64String, 'image/gif'); + const blobUrl = URL.createObjectURL(blob); notice.show(i18n.get('Create gif successfully')); - art.emit('artplayerPluginGif', obj.image); + art.emit('artplayerPluginGif', blobUrl); + callback(blobUrl); } - isProcessing = false; loading.hide(); art.emit('artplayerPluginGif:end');