Skip to content

Commit d083687

Browse files
committed
Set background color to white when format is jpg
1 parent 1a5ef44 commit d083687

6 files changed

+51
-8
lines changed

package.json

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"license": "MIT",
1313
"dependencies": {
1414
"@google/model-viewer": "^1.2.1",
15+
"mime-types": "^2.1.27",
1516
"puppeteer": "^5.3.1",
1617
"yargs": "^13.3.0"
1718
}

src/cli.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ const FileServer = require('./file-server');
88

99
const startBrowser = require('./start-browser')
1010
const loadGLBAndScreenshot = require('./load-glb-and-screenshot');
11+
const scrubOutput = require('./scrub-output');
12+
const colors = require('./colors.js')
1113

1214
const argv = require('yargs')
1315
.alias('i', 'input')
@@ -73,10 +75,11 @@ function copyModelViewer(){
7375

7476
const width = argv.width || 1024;
7577
const height = argv.height || 1024;
76-
const format = argv.image_format || 'image/png';
7778
const quality = argv.image_quality || 0.92;
7879
const timeout = argv.timeout || 10000;
79-
const backgroundColor = argv.color || 'transparent'
80+
const [output, format] = scrubOutput(argv.output, argv.image_format)
81+
const defaultBackgroundColor = (format === 'image/jpeg' ? colors.white : colors.transparent);
82+
const backgroundColor = argv.color || defaultBackgroundColor;
8083

8184
const {page, browser} = await startBrowser({width, height, libPort: libServer.port});
8285

@@ -94,7 +97,7 @@ function copyModelViewer(){
9497
process_status = 0;
9598

9699
try {
97-
await loadGLBAndScreenshot(page, { glbPath, outputPath: argv.output, backgroundColor, format, quality, timeout });
100+
await loadGLBAndScreenshot(page, { glbPath, outputPath: output, backgroundColor, format, quality, timeout });
98101
t3 = performance.now();
99102
INFO("--- Took snapshot of", argv.input, `(${timeDelta(t2, t3)} s)`);
100103
} catch (err) {

src/colors.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
white: 'rgba(255, 255, 255, 100)',
3+
transparent: 'rgba(255, 255, 255, 0)',
4+
}

src/load-glb-and-screenshot.js

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
const colors = require('./colors')
12
module.exports = (page, {glbPath, outputPath, backgroundColor, format, quality, timeout}) => {
2-
return page.evaluate((browser_glbPath, browser_outputPath, backgroundColor, browser_format, browser_quality, timeout) => {
3+
return page.evaluate((browser_glbPath, browser_outputPath, backgroundColor, image_format, browser_quality, timeout, colors) => {
34
return new Promise((resolve, reject) => {
45
var startTime = Number(new Date());
56
var endTime = startTime + timeout;
@@ -23,14 +24,14 @@ module.exports = (page, {glbPath, outputPath, backgroundColor, format, quality,
2324
while (element === null) {
2425
await rafAsync()
2526
}
26-
return querySelector;
27+
return element;
2728
}
2829

2930
const modelViewerCanvas = async function(resolveCanvas){
3031
checkElementExists(modelViewer.shadowRoot)
3132
const srcCanvas = modelViewer.shadowRoot.getElementById('webgl-canvas');
3233
checkElementExists(srcCanvas)
33-
if(backgroundColor === 'transparent'){
34+
if(backgroundColor === colors.transparent){
3435
resolveCanvas(srcCanvas);
3536
}
3637
const destinationCanvas = document.createElement("canvas");
@@ -54,7 +55,7 @@ module.exports = (page, {glbPath, outputPath, backgroundColor, format, quality,
5455
let t0 = Number(new Date());
5556
const canvas = await new Promise(modelViewerCanvas)
5657
window.saveDataUrl(
57-
canvas.toDataURL(browser_format, browser_quality),
58+
canvas.toDataURL(image_format, browser_quality),
5859
browser_outputPath,
5960
);
6061

@@ -77,5 +78,5 @@ module.exports = (page, {glbPath, outputPath, backgroundColor, format, quality,
7778
modelViewer.addEventListener('model-visibility', modelViewerVisibleCallback)
7879
modelViewer.src = browser_glbPath;
7980
});
80-
}, glbPath, outputPath, backgroundColor, format, quality, timeout);
81+
}, glbPath, outputPath, backgroundColor, format, quality, timeout, colors);
8182
}

src/scrub-output.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
const mime = require('mime-types');
2+
const path = require('path');
3+
4+
const appendExtension = function(output, format){
5+
const extension = mime.extension(format);
6+
return `${output}.${extension}`
7+
}
8+
9+
const validExtension = function(extension, format){
10+
const mimeType = mime.lookup(extension);
11+
if(mimeType !== format){
12+
throw new Error(`Output filetype is not valid provided format. Output file extension (${extension}) should have mimeType: ${mimeType}`);
13+
}
14+
return true;
15+
}
16+
17+
module.exports = (output, imageFormat) => {
18+
const format = imageFormat || mime.lookup(output) || 'image/png'
19+
const extension = path.extname(output);
20+
if(extension && validExtension(extension, format)) return [output, format];
21+
return [appendExtension(output, format), format]
22+
}

yarn.lock

+12
Original file line numberDiff line numberDiff line change
@@ -261,6 +261,18 @@ locate-path@^5.0.0:
261261
dependencies:
262262
p-locate "^4.1.0"
263263

264+
mime-db@1.44.0:
265+
version "1.44.0"
266+
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.44.0.tgz#fa11c5eb0aca1334b4233cb4d52f10c5a6272f92"
267+
integrity sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==
268+
269+
mime-types@^2.1.27:
270+
version "2.1.27"
271+
resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.27.tgz#47949f98e279ea53119f5722e0f34e529bec009f"
272+
integrity sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==
273+
dependencies:
274+
mime-db "1.44.0"
275+
264276
minimatch@^3.0.4:
265277
version "3.0.4"
266278
resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"

0 commit comments

Comments
 (0)