Set background color to white when format is jpg

Author: tylerrowsell

package.json

@@ -12,6 +12,7 @@
   "license": "MIT",
   "dependencies": {
     "@google/model-viewer": "^1.2.1",
+    "mime-types": "^2.1.27",
     "puppeteer": "^5.3.1",
     "yargs": "^13.3.0"
   }

src/cli.js

@@ -8,6 +8,8 @@ const FileServer = require('./file-server');
 
 const startBrowser = require('./start-browser')
 const loadGLBAndScreenshot = require('./load-glb-and-screenshot');
+const scrubOutput = require('./scrub-output');
+const colors = require('./colors.js')
 
 const argv = require('yargs')
   .alias('i', 'input')
@@ -73,10 +75,11 @@ function copyModelViewer(){
 
   const width = argv.width || 1024;
   const height = argv.height || 1024;
-  const format = argv.image_format || 'image/png';
   const quality = argv.image_quality || 0.92;
   const timeout = argv.timeout || 10000;
-  const backgroundColor = argv.color || 'transparent'
+  const [output, format] = scrubOutput(argv.output, argv.image_format)
+  const defaultBackgroundColor = (format === 'image/jpeg' ? colors.white : colors.transparent);
+  const backgroundColor = argv.color || defaultBackgroundColor;
 
   const {page, browser} = await startBrowser({width, height, libPort: libServer.port});
 
@@ -94,7 +97,7 @@ function copyModelViewer(){
   process_status = 0;
 
   try {
-    await loadGLBAndScreenshot(page, { glbPath, outputPath: argv.output, backgroundColor, format, quality, timeout });
+    await loadGLBAndScreenshot(page, { glbPath, outputPath: output, backgroundColor, format, quality, timeout });
     t3 = performance.now();
     INFO("--- Took snapshot of", argv.input, `(${timeDelta(t2, t3)} s)`);
   } catch (err) {

src/colors.js

@@ -0,0 +1,4 @@
+module.exports = {
+  white: 'rgba(255, 255, 255, 100)',
+  transparent: 'rgba(255, 255, 255, 0)',
+}

src/load-glb-and-screenshot.js

@@ -1,5 +1,6 @@
+const colors = require('./colors')
 module.exports = (page, {glbPath, outputPath, backgroundColor, format, quality, timeout}) => {
-  return page.evaluate((browser_glbPath, browser_outputPath, backgroundColor, browser_format, browser_quality, timeout) => {
+  return page.evaluate((browser_glbPath, browser_outputPath, backgroundColor, image_format, browser_quality, timeout, colors) => {
     return new Promise((resolve, reject) => {
       var startTime = Number(new Date());
       var endTime = startTime + timeout;
@@ -23,14 +24,14 @@ module.exports = (page, {glbPath, outputPath, backgroundColor, format, quality,
         while (element === null) {
             await rafAsync()
         }
-        return querySelector;
+        return element;
       }  
 
       const modelViewerCanvas = async function(resolveCanvas){
         checkElementExists(modelViewer.shadowRoot)
         const srcCanvas = modelViewer.shadowRoot.getElementById('webgl-canvas');
         checkElementExists(srcCanvas)
-        if(backgroundColor === 'transparent'){
+        if(backgroundColor === colors.transparent){
           resolveCanvas(srcCanvas);
         }
         const destinationCanvas = document.createElement("canvas");
@@ -54,7 +55,7 @@ module.exports = (page, {glbPath, outputPath, backgroundColor, format, quality,
             let t0 = Number(new Date());
             const canvas = await new Promise(modelViewerCanvas)
             window.saveDataUrl(
-              canvas.toDataURL(browser_format, browser_quality),
+              canvas.toDataURL(image_format, browser_quality),
               browser_outputPath,
             );
 
@@ -77,5 +78,5 @@ module.exports = (page, {glbPath, outputPath, backgroundColor, format, quality,
       modelViewer.addEventListener('model-visibility', modelViewerVisibleCallback)
       modelViewer.src = browser_glbPath;
     });
-  }, glbPath, outputPath, backgroundColor, format, quality, timeout);
+  }, glbPath, outputPath, backgroundColor, format, quality, timeout, colors);
 }

src/scrub-output.js

@@ -0,0 +1,22 @@
+const mime = require('mime-types');
+const path = require('path');
+
+const appendExtension = function(output, format){
+  const extension = mime.extension(format);
+  return `${output}.${extension}`
+}
+
+const validExtension = function(extension, format){
+  const mimeType = mime.lookup(extension);
+  if(mimeType !== format){
+    throw new Error(`Output filetype is not valid provided format. Output file extension (${extension}) should have mimeType: ${mimeType}`);
+  }
+  return true;
+}
+
+module.exports = (output, imageFormat) => {
+  const format = imageFormat || mime.lookup(output) || 'image/png'
+  const extension = path.extname(output);
+  if(extension && validExtension(extension, format)) return [output, format];
+  return [appendExtension(output, format), format]
+}

yarn.lock

@@ -261,6 +261,18 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+mime-db@1.44.0:
+  version "1.44.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.44.0.tgz#fa11c5eb0aca1334b4233cb4d52f10c5a6272f92"
+  integrity sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==
+
+mime-types@^2.1.27:
+  version "2.1.27"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.27.tgz#47949f98e279ea53119f5722e0f34e529bec009f"
+  integrity sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==
+  dependencies:
+    mime-db "1.44.0"
+
 minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"