html-base64-image - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

index.js

@@ -6,2 +6,3 @@ 'use strict';
 const url = require('url');
+const sizeOf = require('image-size');
 const contentTypes = {
@@ -33,2 +34,19 @@ ".png": "image/png",
       if (src && isLocalImg(src)) {
+
+        /**
+         * If need to enable lqip feature 
+         * 
+         * @lqip-parent-url is mandatory
+         */
+        if(el.attr('lqip') == 'true' && el.attr('lqip-parent-url')){
+          let highResFile = el.attr('lqip-parent-url');         
+          let bigFile = path.join(assetRoot, highResFile);
+          let dimensions = sizeOf(bigFile);
+          el.css("max-width", dimensions.width+'px');
+          el.css("max-height", dimensions.height+'px');
+          let pB = (dimensions.height / dimensions.width) * 100;
+          el.append(`<div class="aspectRatioPlaceholder-fill" style="padding-bottom:${pB}%"></div>
+                     <img src="${highResFile}"/>`)
+        }
+
         let file = path.join(assetRoot, src);
@@ -35,0 +53,0 @@ let img = fs.readFileSync(file);

package.json

 {
   "name": "html-base64-image",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A npm package to convert your local image references in any dom element with inline base 64 data uri. This technique is beneficial for saving extra image requests and rendering lightning fast images.",
@@ -21,4 +21,5 @@ "main": "index.js",
   "dependencies": {
-    "cheerio": "^0.22.0"
+    "cheerio": "^0.22.0",
+    "image-size": "^0.6.1"
   }
 }

README.md

@@ -0,2 +1,11 @@
+[![Build Status](https://travis-ci.org/apuravchauhan/html-base64-image.svg?branch=master)](https://travis-ci.org/apuravchauhan/html-base64-image)
+
 # html-inline-image-lqip
 A npm package to convert your local image references in any dom element with inline base 64 data uri. This technique is beneficial for saving extra image requests and rendering lightning fast images.
+
+#Support for LQIP (Low Quality Image Placeholder) @bbansal
+For LQIP we need to add two data-attributes
+- Need to set lqip true 
+- Need to padd lqip-parent-url to high resolution url path
+
+It will add two child divs under main div. You can add styling or animation on high resolution image load on basis of class 'aspectRatioPlaceholder-fill' of child div added.

test/test.js

@@ -21,3 +21,3 @@ 'use strict';
     expect(src)
-      .to.equal("{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=')}");
+      .to.equal("background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=');");
   });
@@ -29,4 +29,25 @@ it('should read file content and convert style background url to data uri', function() {
     expect(src)
-      .to.equal("{background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=')}");
+      .to.equal("background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=');");
   });
+
+  describe('#lqip feature test success cases',() => {
+    it('should append div element as child for high resolution image',() => {
+      var html = fs.readFileSync(path.resolve(__dirname,'divtest-lqip.html'));
+      var result = inlineImage(html,path.resolve(__dirname));
+      console.log(result.toString());
+      let childrenDiv = cheerio.load(result.toString())('div').children('.aspectRatioPlaceholder-fill');
+      expect(childrenDiv.length).to.equal(1);
+    });
+  })
+
+  describe('#lqip feature test negative cases',() => {
+    it('should append div element as child for high resolution image fail',() => {
+      var html = fs.readFileSync(path.resolve(__dirname,'divtest-lqip-failed.html'));
+      var result = inlineImage(html,path.resolve(__dirname));
+      console.log(result.toString());
+      let childrenDiv = cheerio.load(result.toString())('div').children('.aspectRatioPlaceholder-fill');
+      expect(childrenDiv.length).to.equal(0);
+    });
+  })
+  
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23039

increased by287.08%

Number of package files

13

increased by44.44%

Lines of code

106

increased by47.22%

Number of lines in readme file

11

increased by266.67%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addedimage-size@^0.6.1

• + Addedimage-size@0.6.3(transitive)