Convert an image to a tensor

flexbox · flexbox · commit de31d38a70cf · 2020-07-26T13:42:13.000+02:00
diff --git a/image-to-tensor/README.md b/image-to-tensor/README.md
@@ -0,0 +1,10 @@
+# image-to-tensor
+
+> Convert pixels to tensors
+
+## Getting Started
+
+```
+yarn
+yarn start
+```
diff --git a/image-to-tensor/index.html b/image-to-tensor/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>TensorFlow Template</title>
+    <meta charset="UTF-8" />
+    <link
+      rel="stylesheet"
+      href="./node_modules/modern-normalize/modern-normalize.css"
+    />
+  </head>
+
+  <body>
+    <div id="app"></div>
+
+    <script src="./src/index.js"></script>
+  </body>
+</html>
diff --git a/image-to-tensor/package.json b/image-to-tensor/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "image-to-tensor",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.html",
+  "scripts": {
+    "start": "parcel index.html --open",
+    "build": "parcel build index.html"
+  },
+  "dependencies": {
+    "@tensorflow/tfjs": "^2.0.1",
+    "modern-normalize": "^0.7.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.2.0",
+    "parcel-bundler": "^1.6.1"
+  },
+  "keywords": []
+}
diff --git a/image-to-tensor/src/index.js b/image-to-tensor/src/index.js
@@ -0,0 +1,21 @@
+import * as tf from '@tensorflow/tfjs';
+import './styles.css';
+
+const img = new Image();
+img.crossOrigin = 'anonymous';
+img.src =
+  'https://images.unsplash.com/flagged/photo-1572349854775-e5768e1afb74?ixlib=rb-1.2.1&auto=format&fit=crop&w=1267&q=80';
+
+img.onload = (event) => {
+  const imgTensor = tf.browser.fromPixels(event.target);
+  imgTensor.print();
+
+  document.getElementById('app').innerHTML = `
+    <code>TensorFlow version: ${tf.version.tfjs}</code>
+    <h1>${imgTensor.shape[1]}x${imgTensor.shape[0]}</h1>
+    <canvas id="printCanvas"></canvas>
+  `;
+
+  const printCanvas = document.getElementById('printCanvas');
+  tf.browser.toPixels(imgTensor, printCanvas);
+};
diff --git a/image-to-tensor/src/styles.css b/image-to-tensor/src/styles.css
@@ -0,0 +1,3 @@
+body {
+  padding: 20px 40px;
+}
diff --git a/image-to-tensor/yarn.lock b/image-to-tensor/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+body {`
	`2`	`+ padding: 20px 40px;`
	`3`	`+}`