feat: download color title card

Yourrrrlove · Feb 12, 2023 · 683f583 · 683f583
1 parent 710a3dd
commit 683f583
Show file tree

Hide file tree

Showing 5 changed files with 691 additions and 421 deletions.
diff --git a/package.json b/package.json
@@ -38,21 +38,21 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-github-btn": "^1.4.0",
-    "react-router-dom": "^6.4.3",
+    "react-router-dom": "^6.8.1",
     "smooth-scroll-into-view-if-needed": "^1.1.33",
     "styled-components": "^5.3.6",
-    "styled-reset": "^4.4.2"
+    "styled-reset": "^4.4.5"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^2.2.0",
-    "eslint": "^8.26.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-react": "^7.31.10",
+    "@vitejs/plugin-react": "^3.1.0",
+    "eslint": "^8.34.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.0.3",
-    "prettier": "^2.7.1",
-    "vite": "^3.2.2"
+    "husky": "^8.0.3",
+    "lint-staged": "^13.1.1",
+    "prettier": "^2.8.4",
+    "vite": "^4.1.1"
   },
   "engines": {
     "node": ">=16.0.0",

diff --git a/src/components/ColorTitle/IconDownload.jsx b/src/components/ColorTitle/IconDownload.jsx
@@ -0,0 +1,48 @@
+// import React from 'react';
+
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  visibility: hidden;
+  .icon {
+    width: 1rem;
+    height: 1rem;
+  }
+`;
+
+const IconDownload = ({ handleDownload }) => {
+  return (
+    <Wrapper className="download" onClick={handleDownload}>
+      <svg
+        t="1568731641905"
+        className="icon"
+        viewBox="0 0 1047 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="1446"
+        width="32"
+        height="32"
+      >
+        <path
+          d="M523.987449 0a42.759353 42.759353 0 0 0-42.759353 42.759353v498.158822L301.663529 361.353608a43.500845 43.500845 0 0 0-60.555153 0 42.759353 42.759353 0 0 0 0 60.431572l227.020033 227.267198a79.092445 79.092445 0 0 0 111.223751 0l227.514362-227.143616a42.635771 42.635771 0 0 0 0-60.555154 42.882935 42.882935 0 0 0-60.555153 0L566.870384 540.918175V42.759353A42.882935 42.882935 0 0 0 523.987449 0z"
+          fill="#ffffff"
+          p-id="1447"
+        ></path>
+        <path
+          d="M860.871832 120.245233a42.882935 42.882935 0 1 0 0 85.642288 101.584359 101.584359 0 0 1 101.460777 101.584359v529.301473a101.584359 101.584359 0 0 1-101.460777 101.584359H187.226647a101.707941 101.707941 0 0 1-101.584359-101.584359V307.47188a101.707941 101.707941 0 0 1 101.584359-101.584359 42.882935 42.882935 0 0 0 0-85.642288A187.473811 187.473811 0 0 0 0 307.47188v529.301473a187.473811 187.473811 0 0 0 187.226647 187.226647h673.645185A187.350229 187.350229 0 0 0 1047.974897 836.773353V307.47188A187.350229 187.350229 0 0 0 860.871832 120.245233z"
+          fill="#ffffff"
+          p-id="1448"
+        ></path>
+      </svg>
+    </Wrapper>
+  );
+};
+
+export default IconDownload;
diff --git a/src/components/ColorTitle/IconFav.jsx b/src/components/ColorTitle/IconFav.jsx
@@ -11,8 +11,8 @@ const Wrapper = styled.div`
   align-items: center;
 
   .icon {
-    width: 1.4rem;
-    height: 1.4rem;
+    width: 1rem;
+    height: 1rem;
     path {
       transition: all 0.5s ease-in;
     }
@@ -26,7 +26,7 @@ const IconFav = ({ currColor }) => {
     const favs = JSON.parse(localStorage.getItem(FavStoreKey) || '[]');
     console.log('favs e', favs);
 
-    if (favs.some(f => f.name == currColor.name)) {
+    if (favs.some((f) => f.name == currColor.name)) {
       setIsFav(true);
     } else {
       setIsFav(false);
@@ -37,17 +37,17 @@ const IconFav = ({ currColor }) => {
     console.log('favs t', favs);
 
     if (isFav) {
-      favs = favs.filter(color => {
+      favs = favs.filter((color) => {
         return color.name != currColor.name;
       });
     } else {
       favs.push(currColor);
     }
-    setIsFav(prev => !prev);
+    setIsFav((prev) => !prev);
     localStorage.setItem(FavStoreKey, JSON.stringify(favs));
   };
   return (
-    <Wrapper onClick={toggleFav}>
+    <Wrapper className="fav" onClick={toggleFav}>
       <svg
         t="1568172188297"
         className="icon"

diff --git a/src/components/ColorTitle/index.jsx b/src/components/ColorTitle/index.jsx
@@ -1,11 +1,15 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import styled from 'styled-components';
+import html2canvas from 'html2canvas';
+import { saveAs } from 'file-saver';
 import IconFav from './IconFav';
+import IconDownload from './IconDownload';
 import { useMobile, usePoetry } from '../../hooks';
 
 import { getCorrectTextColor } from '../../utils';
 import Poetry from './Poetry';
 import FadeIn from '../animates/FadeIn';
+import BodyBg from '../../assets/img/bg.texture.png';
 
 const Wrapper = styled.hgroup`
   color: #333;
@@ -32,7 +36,22 @@ const Wrapper = styled.hgroup`
   &:hover > h1 {
     transform: scale(1.1);
   }
-
+  &:hover .download {
+    visibility: visible;
+  }
+  &.download {
+    border-radius: 0;
+    box-shadow: none;
+    background-color: ${({ bgColor }) => bgColor};
+    background-image: url(${BodyBg});
+    background-repeat: repeat;
+    .fav {
+      display: none;
+    }
+    > h2 {
+      writing-mode: initial;
+    }
+  }
   > h1 {
     color: inherit;
     font-size: 3.2rem;
@@ -71,16 +90,47 @@ const Wrapper = styled.hgroup`
 `;
 
 const ColorTitle = ({ name, pinyin, hex, RGB, CMYK, figure }) => {
+  const cardRef = useRef(null);
   const { isMobile } = useMobile();
   const { poetry, fetchPoetry } = usePoetry(name);
   const oppoColor = getCorrectTextColor(RGB);
 
-  console.log('color title');
+  const handleDownload = () => {
+    if (!cardRef.current) return;
+    cardRef.current.classList.add('download');
+
+    html2canvas(cardRef.current, {
+      debug: process.env.NODE_ENV !== 'production',
+      // onclone: document => {
+      //   let tmp = document.querySelector(query);
+      //   tmp.classList.add('starting');
+      //   if (isWebview) {
+      //     tmp.style.boxShadow = 'none';
+      //   }
+      //   if (full) {
+      //     tmp.style.height = window.innerHeight + 'px';
+      //   }
+      //   console.log('dommmm', tmp.innerHTML);
+      // },
+      scale: window.devicePixelRatio * 2,
+    }).then(function (canvas) {
+      canvas.toBlob((blob) => {
+        saveAs(blob, `card-${name}-${new Date().getTime()}.png`);
+        cardRef.current.classList.remove('download');
+      }, 'image/png');
+    });
+  };
 
   return (
-    <Wrapper className={isMobile ? 'mobile' : ''} style={{ color: oppoColor }}>
+    <Wrapper
+      bgColor={`rgba(${RGB.join(',')})`}
+      ref={cardRef}
+      className={isMobile ? 'mobile' : ''}
+      style={{ color: oppoColor }}
+    >
       <h1>{name}</h1>
       <IconFav currColor={{ hex, name, pinyin, RGB, CMYK }} />
+      <IconDownload handleDownload={handleDownload} />
       <h2>{pinyin}</h2>
       {poetry && (
         <Poetry