feat: API chanes again ! get current frame

journey-ad/live2d_src@97356a1 BREAKING CHANGE: Please use L2DWidget.init() and L2DWidget.captureFrame() instead of initL2DWidget()
xiazeyu · Jan 13, 2018 · cc76f02 · cc76f02
1 parent 7c121a2
commit cc76f02
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -27,7 +27,7 @@ Docs(including APIs): [Click me!](https://xiazeyu.github.io/live2d-widget.js/)
 Online generator: [TBD.](javascript:void(0);)
 
 
-## Installation
+## Useage
 
 ### Hexo
 
@@ -38,7 +38,7 @@ Please visit [hexo-helper-live2d](https://github.com/EYHN/hexo-helper-live2d) fo
 Install the module:
 
 ```
-npm install --save live2d-widet.js
+npm install --save live2d-widget.js
 ```
 
 Import the module:
@@ -51,7 +51,7 @@ import 'live2d-widget.js';
 Then call the function along with your config.
 
 ```js
-initL2Dwidget({
+L2Dwidget.init({
   'config1': 'value1',
   'config2': 'value2',
 });
@@ -160,6 +160,13 @@ issues: [https://github.com/EYHN/hexo-helper-live2d/issues](https://github.com/E
 
 [![current-device][current-device]][current-device-url]
 
+## Special Thanks
+
+- @mashirozx 
+- @fghrsh
+- @journey-ad
+- @gwzz
+
 <br>
 
 Open sourced under the GPL v2.0 license.

diff --git a/dev.html b/dev.html
@@ -9,7 +9,7 @@
   <body>
   <script src="dev/clL2D.min.js"></script>
   <script type="text/javascript">
-    initL2Dwidget();
+    L2Dwidget.init();
   </script>
   </body>
 </html>
diff --git a/ghpages/dev.html b/ghpages/dev.html
@@ -9,7 +9,7 @@
   <body>
   <script src="lib/clL2D.min.js"></script>
   <script type="text/javascript">
-    initL2Dwidget();
+    L2Dwidget.init();
   </script>
   </body>
 </html>
diff --git a/src/cLive2DApp.js b/src/cLive2DApp.js
@@ -45,7 +45,7 @@ let opacityHover = 1;
  * @return {null}
  */
 
-export default () => {
+function theRealInit (){
 
   createElement();
 
@@ -79,7 +79,26 @@ export default () => {
   startDraw();
 
 }
+/**
+ * Return the data URI of current frame, MINE type is image/png.
+ * @return {DOMString} Which contains data URI, MINE type is image/png
+ * @example
+ * You can use codes below to let the user download the current frame
+ *
+ * let link = document.createElement('a');
+ * document.body.appendChild(link);
+ * link.setAttribute('type', 'hidden');
+ * link.href = L2Dwidget.captureFrame();
+ * link.download = 'live2d.png';
+ * link.click();
+ *
+ * @description Thanks to @journey-ad https://github.com/journey-ad/live2d_src/commit/97356a19f93d2abd83966f032a53b5ca1109fbc3
+ * @todo Seems feedback empty image only
+ */
 
+function captureFrame(){
+  return currCanvas.toDataURL();
+}
 
 function initEvent(){/*
   if (currCanvas.addEventListener) {
@@ -390,3 +409,8 @@ function transformScreenY(deviceY)
 {
     return deviceToScreen.transformY(deviceY);
 }
+
+export{
+  theRealInit,
+  captureFrame,
+}
diff --git a/src/index.js b/src/index.js
@@ -18,6 +18,13 @@ if (process.env.NODE_ENV === 'development'){
   console.log('--- --- --- --- ---\nHey that, notice that you are now in DEV MODE.\n--- --- --- --- ---');
 }
 
+let coreApp;
+/**
+ * The main entry point, which ... is nothing
+ */
+
+function L2Dwidget(){};
+
 /**
  * The public entry point
  * @param {Object}   [userConfig] User's custom config 用户自定义设置
@@ -47,7 +54,7 @@ if (process.env.NODE_ENV === 'development'){
  * @return {null}
  */
 
-function init(userConfig){
+L2Dwidget.init = (userConfig) => {
 
   userConfig = typeof userConfig === 'undefined' ? {} : userConfig;
 
@@ -58,13 +65,31 @@ function init(userConfig){
   }
 
   import(/* webpackMode: "lazy" */ './cLive2DApp').then(f => {
-    f.default();
+    coreApp = f;
+    coreApp.theRealInit();
   }).catch(err => {
     console.error(err);
   });
 
 }
 
+/**
+ * Return the data URI of current frame, MINE type is image/png.
+ * @return {DOMString} Which contains data URI, MINE type is image/png
+ * @example
+ * You can use codes below to let the user download the current frame
+ *
+ * let link = document.createElement('a');
+ * link.innerHTML = 'Download image';
+ * link.href = L2Dwidget.captureFrame();
+ * link.download = 'live2d.png';
+ * link.click();
+ *
+ * @description Thanks to @journey-ad https://github.com/journey-ad/live2d_src/commit/97356a19f93d2abd83966f032a53b5ca1109fbc3
+ */
+
+L2Dwidget.captureFrame = () => {return coreApp.captureFrame()};
+
 export {
-  init,
+  L2Dwidget,
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -19,8 +19,8 @@ module.exports = env => {return{
     filename: 'clL2D.min.js',
     // YOU MUST INSTALL babel-plugin-syntax-dynamic-import FIRST TO ENABLE CODE SPLITTING!
     chunkFilename: 'clL2D.[id].min.js',
-    library: 'initL2Dwidget',
-    libraryExport: 'init',
+    library: 'L2Dwidget',
+    libraryExport: 'L2Dwidget',
     libraryTarget: 'var',
     path: path.resolve(__dirname, (isProd(env) ? 'lib' : 'dev')),
     pathinfo: (isProd(env) ? false : true),