Automatic Brew thumbnail generation option

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -8,7 +8,7 @@ const request = require('../../utils/request-middleware.js');
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Combobox = require('client/components/combobox.jsx');
 const StringArrayEditor = require('../stringArrayEditor/stringArrayEditor.jsx');
-
+const htmlimg = require('html-to-image');
 const Themes = require('themes/themes.json');
 const validations = require('./validations.js');
 
@@ -31,6 +31,8 @@ const MetadataEditor = createClass({
 				title       : '',
 				description : '',
 				thumbnail   : '',
+				thumbnailSm : null,
+				thumbnailLg : null,
 				tags        : [],
 				published   : false,
 				authors     : [],
@@ -56,9 +58,43 @@ const MetadataEditor = createClass({
 		});
 	},
 
+
+	ThumbnailCapture : async function() {
+		const bR = parent.document.getElementById('BrewRenderer');
+		const brewRenderer = bR.contentDocument || bR.contentWindow.document;
+		const topPage = brewRenderer.getElementsByClassName('page')[0].cloneNode(true);
+		// Walk through Top Page's Source and convert all Images to inline data *in* topPage.
+		const srcImages = brewRenderer.getElementsByClassName('page')[0].getElementsByTagName('img');
+		const topImages = topPage.getElementsByTagName('img');
+		// These two should start off with identical contents.
+		for (let imgPos = 0; imgPos < srcImages.length; imgPos++) {
+			const imgCanvas = document.createElement('canvas');
+			const imgConext = imgCanvas.getContext('2d');
+			imgCanvas.width = srcImages[imgPos].width;
+			imgCanvas.height = srcImages[imgPos].height;
+			const newImage = new Image();
+			newImage.crossOrigin = 'anonymous';
+			newImage.src = srcImages[imgPos].src;
+			imgConext.drawImage(newImage, 0, 0, srcImages[imgPos].width, srcImages[imgPos].height);
+			topImages[imgPos].src = imgCanvas.toDataURL('image/png');
+		}
+		const props = this.props;
+
+		htmlimg.toPng(topPage, {
+			preferredFontFormat : 'woff2',
+			style               : { margin: 'unset' },
+		    cacheBust           : true
+		  }).then(function(dataURL){
+			props.metadata.thumbnail = 'Page 1';
+			props.metadata.thumbnailSm = dataURL;
+			props.onChange(props.metadata);
+		});
+	},
+
 	renderThumbnail : function(){
 		if(!this.state.showThumbnail) return;
-		return <img className='thumbnail-preview' src={this.props.metadata.thumbnail || homebreweryThumbnail}></img>;
+		const imgURL = this.props.metadata.thumbnail.startsWith('Page 1') ? this.props.metadata.thumbnailSm : this.props.metadata.thumbnail;
+		return <img className='thumbnail-preview' src={imgURL || homebreweryThumbnail}></img>;
 	},
 
 	handleFieldChange : function(name, e){
@@ -333,6 +369,9 @@ const MetadataEditor = createClass({
 						<button className='display' onClick={this.toggleThumbnailDisplay}>
 							<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
 						</button>
+						<button className='display' onClick={this.ThumbnailCapture}>
+							<i className={`fas fa-camera`} />
+						</button>
 					</div>
 				</div>
 				{this.renderThumbnail()}