1.1.0 Migrate from Vite to CRA. Add JBX instead of local components. …

…Add base64 output option
javierbyte · Jul 2, 2021 · a1c00c3 · a1c00c3
1 parent acb3430
commit a1c00c3
Show file tree

Hide file tree

Showing 11 changed files with 15,476 additions and 3,919 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,22 +1,16 @@
 module.exports = {
-    "env": {
-        "browser": true,
-        "es2021": true
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ["eslint:recommended", "plugin:react/recommended"],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
     },
-    "extends": [
-        "eslint:recommended",
-        "plugin:react/recommended"
-    ],
-    "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true
-        },
-        "ecmaVersion": 12,
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react"
-    ],
-    "rules": {
-    }
+    ecmaVersion: 12,
+    sourceType: "module",
+  },
+  plugins: ["react"],
+  rules: {},
 };
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,24 @@
-node_modules/
-dist
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,5 @@
+# 1.1.0
+- Add base64 output option
+- Replace internal components for JBX
+
+# 1.0.0
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,33 +1,55 @@
 {
   "name": "img2css",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Convert any image to pure css.",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "deploy": "rm -rf dist && npm run build && touch dist/.nojekyll && gh-pages -d dist --dotfiles"
+    "dev": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
   },
+  "homepage": "https://javier.xyz/img2css/",
   "repository": {
     "type": "git",
     "url": "https://github.com/javierbyte/img2css.git"
   },
-  "keywords": [],
+  "keywords": [
+    "img2css",
+    "images",
+    "css",
+    "experiments",
+    "pixelart"
+  ],
   "author": "Javier Bórquez <[email protected]> (http://github.com/javierbyte)",
   "license": "CC0-1.0",
   "devDependencies": {
     "eslint": "^7.11.0",
     "eslint-plugin-react": "^7.21.4",
-    "gh-pages": "^3.2.3",
-    "vite": "^1.0.0-rc.1",
-    "vite-plugin-react": "^3.0.0"
+    "gh-pages": "^3.2.3"
   },
   "dependencies": {
-    "@pika/react": "^16.13.1",
-    "@pika/react-dom": "^16.13.1",
     "canvas-image-utils": "^2.0.2",
     "capsize": "^1.1.0",
+    "jbx": "^1.0.0",
     "lodash": "^4.17.20",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "^4.0.0",
     "styled-components": "^5.2.0",
     "tinycolor2": "^1.4.2"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }
diff --git a/index.html → public/index.html b/index.html → public/index.html
@@ -8,23 +8,42 @@
     <title>img2css | Convert any image to pure CSS</title>
     <meta property="og:title" content="img2css" />
 
-    <meta name="description" content="This is a tool that can convert any image into a pure css image." />
-    <meta property="og:description" content="This is a tool that can convert any image into a pure css image." />
+    <meta
+      name="description"
+      content="This is a tool that can convert any image into a pure css image."
+    />
+    <meta
+      property="og:description"
+      content="This is a tool that can convert any image into a pure css image."
+    />
 
     <meta property="og:url" content="https://javier.xyz/img2css/" />
     <link rel="canonical" href="https://javier.xyz/img2css/" />
 
-    <meta property="og:image" content="https://javier.xyz/img2css/docs-assets/thumbnail.jpg" />
+    <meta
+      property="og:image"
+      content="https://javier.xyz/img2css/docs-assets/thumbnail.jpg"
+    />
   </head>
   <body>
     <div id="root"></div>
 
-    <a href="https://github.com/javierbyte/img2css/" aria-label="github:@javierbyte" class="github-corner"
+    <a
+      href="https://github.com/javierbyte/img2css/"
+      aria-label="github:@javierbyte"
+      class="github-corner"
       ><svg
         width="80"
         height="80"
         viewBox="0 0 250 250"
-        style="fill: #fd6c6c; color: #fff; position: absolute; top: 0; border: 0; right: 0"
+        style="
+          fill: #fd6c6c;
+          color: #fff;
+          position: absolute;
+          top: 0;
+          border: 0;
+          right: 0;
+        "
       >
         <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
         <path
@@ -72,8 +91,10 @@
       }
     </style>
 
-    <script type="module" src="./src/main.jsx"></script>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-44329676-12"></script>
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=UA-44329676-12"
+    ></script>
     <script>
       window.dataLayer = window.dataLayer || [];
       function gtag() {

diff --git a/src/app.jsx b/src/app.jsx
@@ -1,10 +1,9 @@
-import React, { useState } from "react";
+import React, { Fragment, useState } from "react";
 import tinycolor from "tinycolor2";
 import _ from "lodash";
 
 import {
   HeaderH1,
-  HeaderH2,
   Text,
   Space,
   Box,
@@ -13,11 +12,14 @@ import {
   Dropzone,
   Ul,
   Li,
-} from "./jbx.jsx";
+  Tabs,
+  Tab,
+  Inline,
+} from "jbx";
 
 import Styled from "styled-components";
 
-import { imageToRGBMatrix } from "canvas-image-utils";
+import { imageToRGBMatrix, imageToRawData } from "canvas-image-utils";
 
 const Textarea = Styled.textarea({
   fontFamily: "monaco, monospace",
@@ -65,6 +67,9 @@ function compressColor(rgb) {
 }
 
 function App() {
+  const [outputType, outputTypeSet] = useState("SHADOW");
+  const [originalSize, originalSizeSet] = useState(0);
+  const [base64Data, base64DataSet] = useState("");
   const [rgbMatrix, rgbMatrixSet] = useState(null);
   const [loadingImage, loadingImageSet] = useState(false);
 
@@ -76,14 +81,21 @@ function App() {
     const files = dt ? dt.files : event.target.files;
     const file = files[0];
 
+    originalSizeSet(file.size);
+
     const fr = new window.FileReader();
 
     loadingImageSet(true);
 
     fr.onload = async (data) => {
       const base64src = data.currentTarget.result;
-      const dataMatrix = await imageToRGBMatrix(base64src, { size: 150 });
+      const dataMatrix = await imageToRGBMatrix(base64src, { size: 200 });
+      const canvasRawData = await imageToRawData(base64src, {
+        size: 1080,
+        crop: false,
+      });
 
+      base64DataSet(canvasRawData.ctx.canvas.toDataURL("image/jpeg", 0.66));
       rgbMatrixSet(dataMatrix);
       loadingImageSet(false);
     };
@@ -168,35 +180,104 @@ function App() {
         </Text>
 
         {rgbMatrix && (
-          <div>
+          <Fragment>
             <Space h={2} />
-            <HeaderH2>The result</HeaderH2>
-            <Space h={1} />
-            <Text>This is your pure css (and single div) image! Enjoy!</Text>
-            <Space h={1} />
-            <div
-              style={{
-                height: 1,
-                width: 1,
-                boxShadow: masterShadow,
-                marginBottom: rgbMatrix[0].length * scale,
-                marginRight: rgbMatrix.length * scale,
-              }}
-            />
+            <Tabs>
+              <Inline>
+                <Tab
+                  active={outputType === "SHADOW"}
+                  key={"SHADOW"}
+                  onClick={() => {
+                    outputTypeSet("SHADOW");
+                  }}>
+                  <Text>{"Pure CSS"}</Text>
+                </Tab>
+                <Tab
+                  active={outputType === "BASE64"}
+                  key={"BASE64"}
+                  onClick={() => {
+                    outputTypeSet("BASE64");
+                  }}>
+                  <Text>{"Base64"}</Text>
+                </Tab>
+              </Inline>
+            </Tabs>
             <Space h={1} />
-            <Textarea
-              onFocus={handleFocus}
-              onChange={() => {}}
-              className="code"
-              value={`<div style="margin-right: ${
-                rgbMatrix[0].length * scale
-              }px; margin-bottom: ${
-                rgbMatrix.length * scale
-              }px; height: 1px; width: 1px; box-shadow: ${masterShadow}"></div>`}
-            />
-            <Space h={1} />
-            <Text>Size: {masterShadow.length.toLocaleString()}b</Text>
-          </div>
+
+            {outputType === "BASE64" && (
+              <Fragment>
+                <Text>
+                  <strong>The result (base64).</strong>{" "}
+                  {
+                    "This is your image tag a base64 output. The entire image file is embedded inside the `<img>` tag using base64, so no need external hosting is needed."
+                  }
+                </Text>
+                <Space h={1} />
+
+                <img
+                  src={base64Data}
+                  style={{ maxWidth: "100%", height: "auto", display: "block" }}
+                />
+
+                <Space h={1} />
+
+                <Textarea
+                  onFocus={handleFocus}
+                  onChange={() => {}}
+                  className="code"
+                  value={`<img src="${base64Data}" />`}
+                />
+                <Space h={1} />
+                <Text>
+                  Output size (resized): {base64Data.length.toLocaleString()}b
+                </Text>
+                <Text>
+                  Original size: {Number(originalSize).toLocaleString()}b
+                </Text>
+              </Fragment>
+            )}
+
+            {outputType === "SHADOW" && (
+              <Fragment>
+                <Text>
+                  <strong>The result (pure CSS).</strong> This is your pure CSS
+                  (and single div) image, enjoy! This output was created by
+                  resizing and setting each pixel as a box-shadow of a single pixel div, so
+                  no `img` tag or `background-image` is needed. This can result
+                  in huge outputs, and the use of this output is not recommended
+                  for production unless there is no other option.
+                </Text>
+                <Space h={1} />
+                <div
+                  style={{
+                    height: 1,
+                    width: 1,
+                    boxShadow: masterShadow,
+                    marginBottom: rgbMatrix[0].length * scale,
+                    marginRight: rgbMatrix.length * scale,
+                  }}
+                />
+                <Space h={1} />
+                <Textarea
+                  onFocus={handleFocus}
+                  onChange={() => {}}
+                  className="code"
+                  value={`<div style="margin-right: ${
+                    rgbMatrix[0].length * scale
+                  }px; margin-bottom: ${
+                    rgbMatrix.length * scale
+                  }px; height: 1px; width: 1px; box-shadow: ${masterShadow}"></div>`}
+                />
+                <Space h={1} />
+                <Text>
+                  Output size (resized): {masterShadow.length.toLocaleString()}b
+                </Text>
+                <Text>
+                  Original size: {Number(originalSize).toLocaleString()}b
+                </Text>
+              </Fragment>
+            )}
+          </Fragment>
         )}
 
         <Space h={2} />