fix: 生成的骨架屏图片宽高不对的问题（#66）

src/config/config.js

@@ -13,7 +13,8 @@ const defaultOptions = {
     // `rect` | `circle`
     shape: 'rect',
     color: '#EFEFEF',
-    shapeOpposite: []
+    shapeOpposite: [],
+    fixedSize: false
   },
   button: {
     color: '#EFEFEF',

src/config/optionsSchema.json

@@ -49,6 +49,9 @@
         },
         "shapeOpposite": {
           "type": "array"
+        },
+        "fixedSize": {
+          "type": "boolean"
         }
       }
     },
@@ -102,47 +105,47 @@
     },
     "device": {
       "description": "The device you want to generate skeleton page",
-      "type": "string"     
+      "type": "string"
     },
     "debug": {
       "description": "Weather to show debug info",
-      "type": "boolean"     
+      "type": "boolean"
     },
     "minify": {
       "description": "Weather to minify the HTML",
       "anyOf": [{
         "type": "object"
       }, {
         "type": "boolean"
-      }]   
+      }]
     },
     "defer": {
       "description": "Defer to generate skeleton page",
-      "type": "number"     
+      "type": "number"
     },
     "excludes": {
       "description": "which element that you dont want to generate skeleton",
-      "type": "array"     
+      "type": "array"
     },
     "remove": {
       "description": "the elements that you want to remove",
-      "type": "array"     
+      "type": "array"
     },
     "hide": {
       "description": "the element that you want to hide",
-      "type": "array"     
+      "type": "array"
     },
     "grayBlock": {
       "description": "the element that you just want to make it display a gray block",
-      "type": "array"     
+      "type": "array"
     },
     "cookies": {
       "description": "Add cookies to the page which puppeteer opened",
-      "type": "array"     
+      "type": "array"
     },
     "headless": {
       "description": "Open headless chrome or not",
-      "type": "boolean"     
+      "type": "boolean"
     },
     "cssUnit": {
       "description": "The css unit used in shell.html",
@@ -152,7 +155,7 @@
         "vh",
         "vmin",
         "vmax"
-      ]  
+      ]
     },
     "decimal": {
       "description": "The decimal of CSS value",

src/script/index.js

@@ -17,6 +17,9 @@ var Skeleton = (function (exports) {
   const MOCK_TEXT_ID = 'sk-text-id';
   const Node = window.Node;
 
+  // 给图片打上固定宽高标签，将会设置行内宽高样式，保证生成骨架后的宽高不会受其他样式影响而变化（目前只针对图片）
+  const IMAGE_FIXED = 'data-pswp-fixedsize';
+
   /**
    * a Map instance to cache the styles which will be inserted into the skeleton page.
    * key is the selector and value is the css rules.
@@ -172,7 +175,7 @@ var Skeleton = (function (exports) {
     const rule = `{
     background: ${color} !important;
   }`;
-    
+
     addStyle(`.${imageClass}`, rule);
 
     shapeStyle(shape);
@@ -215,8 +218,9 @@ var Skeleton = (function (exports) {
     });
   }
 
-  function imgHandler(ele, { color, shape, shapeOpposite }) {
+  function imgHandler(ele, { color, shape, shapeOpposite, fixedSize }) {
     const { width, height } = ele.getBoundingClientRect();
+    const isFixed = ele.hasAttribute(IMAGE_FIXED) || fixedSize;
     const attrs = {
       width,
       height,
@@ -226,7 +230,11 @@ var Skeleton = (function (exports) {
     const finalShape = shapeOpposite.indexOf(ele) > -1 ? getOppositeShape(shape) : shape;
 
     setAttributes(ele, attrs);
-
+    if (isFixed) {
+      ele.style.width = `${width}px`;
+      ele.style.height = `${height}px`;
+    }
+
     const className = CLASS_NAME_PREFEX + 'image';
     const shapeName = CLASS_NAME_PREFEX + finalShape;
     const rule = `{