[skip ci]

save test result to html

img/1.jpg.html

@@ -0,0 +1,23 @@
+
+<style>
+    .color {
+        width: 100px;
+        height: 100px;
+        float: left;
+    }
+    img{
+      width: 500px;
+      display: block;
+    }
+</style>
+<img src="1.jpg"/><div class="color" style="background-color:rgb(77,128,162)">
+
+  </div> <div class="color" style="background-color:rgb(32,38,51)">
+
+  </div> <div class="color" style="background-color:rgb(49,76,105)">
+
+  </div> <div class="color" style="background-color:rgb(42,59,85)">
+
+  </div> <div class="color" style="background-color:rgb(36,86,124)">
+
+  </div>

img/3.jpg.html

@@ -0,0 +1,23 @@
+
+<style>
+    .color {
+        width: 100px;
+        height: 100px;
+        float: left;
+    }
+    img{
+      width: 500px;
+      display: block;
+    }
+</style>
+<img src="3.jpg"/><div class="color" style="background-color:rgb(75,84,80)">
+
+  </div> <div class="color" style="background-color:rgb(223,207,201)">
+
+  </div> <div class="color" style="background-color:rgb(156,153,154)">
+
+  </div> <div class="color" style="background-color:rgb(172,179,188)">
+
+  </div> <div class="color" style="background-color:rgb(178,188,188)">
+
+  </div>

test/test.js

@@ -1,65 +1,74 @@
 const cquant = require('../cquant')
+const fs = require('fs')
 const sharp = require('sharp')
-sharp('./img/0.jpg')
-  .raw()
-  .toBuffer((err, buffer, info) => {
-    if (!err) {
-      let start = Date.now()
-      cquant.paletteAsync(buffer, info.channels, 30).then(res => {
-        let time = Date.now() - start;
-        console.log('test1: ' + time + ' ms')
-        console.log(res)
-      }).catch(err => {
-        console.log(err)
-      })
+const stylePart = `
+<style>
+    .color {
+        width: 100px;
+        height: 100px;
+        float: left;
     }
+    img{
+      width: 500px;
+      display: block;
+    }
+</style>
+`;
+function generateBlock(r, g, b) {
+  return `<div class="color" style="background-color:rgb(${r},${g},${b})">
+
+  </div>`;
+}
+function generateImage(path) {
+  return `<img src="${path}"/>`
+}
+function generateOutput(imagePath, result) {
+  let blocks = result.map((item) => {
+    return generateBlock(item['R'], item['G'], item['B'])
   })
+  let blkStr = blocks.join(' ');
+  let imgStr = generateImage(imagePath)
+  return stylePart + imgStr + blkStr;
+}
+
 sharp('./img/1.jpg')
   .raw()
   .toBuffer((err, buffer, info) => {
     if (!err) {
       let start = Date.now()
       cquant.paletteAsync(buffer, info.channels, 5).then(res => {
         let time = Date.now() - start;
+        // save to html
         console.log('test2: ' + time + ' ms')
         console.log(res)
+        let result_html = generateOutput('1.jpg', res)
+        fs.writeFile('./img/1.jpg.html', result_html, () => {
+          console.log("Output File saved: ./img/1.jpg.html")
+        });
       }).catch(err => {
         console.log(err)
       })
     }
   })
-sharp('./img/2.png')
-  .raw()
-  .toBuffer((err, buffer, info) => {
-    if (!err) {
-      let start = Date.now()
-      cquant.paletteAsync(buffer, info.channels, 5, (err, val) => {
-        if (err) {
-          console.log(err)
-        } else {
-          let time = Date.now() - start;
-          console.log('test3: ' + time + ' ms')
-          console.log(val)
-        }
-      })
-    }
-  })
 sharp('./img/3.jpg')
   .raw()
   .toBuffer((err, buffer, info) => {
     if (!err) {
       let start = Date.now()
-      cquant.paletteAsync(buffer, info.channels, 5, (err, val) => {
+      cquant.paletteAsync(buffer, info.channels, 5, (err, res) => {
         if (err) {
           console.log(err)
         } else {
           let time = Date.now() - start;
           console.log('test4: ' + time + ' ms')
-          // console.log(val)
-          val.forEach(item => {
+          let result_html = generateOutput('3.jpg', res)
+          fs.writeFile('./img/3.jpg.html', result_html, () => {
+            console.log("Output File saved: ./img/3.jpg.html")
+          });
+          res.forEach(item => {
             console.log(`rgb(${item['R']},${item['G']},${item['B']})`)
           })
         }
       })
     }
-  })
+  })