Enable to add logo to Canvas( #29 )

Bunlong · Nov 14, 2022 · ecabedb · ecabedb
2 parents 905cd38 + dd3b7b8
commit ecabedb
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,13 @@
+## 2.3.0 (2022-11-14)
+
+### ✨ Features
+
+  * Add logo to canvas
+
+Credits
+
+* [@Bunlong](https://github.com/Bunlong)
+
 ## 2.2.2 (2022-10-17)
 
 ### ✨ Features

diff --git a/README.md b/README.md
@@ -31,7 +31,7 @@ yarn add next-qrcode
 
 ## 💡 Canvas
 
-### usage
+### Usage
 
 ```js
 import React from 'react';
@@ -60,7 +60,7 @@ function App() {
 export default App;
 ```
 
-### props
+### Canvas props
 
 <table>
   <thead>
@@ -84,6 +84,12 @@ export default App;
       <td>❌</td>
       <td>QR code options.</td>
     </tr>
+    <tr>
+      <td>logo</td>
+      <td>logo</td>
+      <td>❌</td>
+      <td>QR code options.</td>
+    </tr>
   </tbody>
 </table>
 
@@ -145,9 +151,73 @@ export default App;
   </tbody>
 </table>
 
+### logo
+
+<table>
+  <thead>
+    <tr>
+      <th>Prop</th>
+      <th>Type</th>
+      <th>Require</th>
+      <th>Description</th>
+    </tr>
+  <thead>
+  <tbody>
+    <tr>
+      <td>src</td>
+      <td>string</td>
+      <td>✔️</td>
+      <td>The path to the image</td>
+    </tr>
+    <tr>
+      <td>options</td>
+      <td>options</td>
+      <td>❌</td>
+      <td>Logo options</td>
+    </tr>
+  </tbody>
+</table>
+
+### options
+
+<table>
+  <thead>
+    <tr>
+      <th>Prop</th>
+      <th>Type</th>
+      <th>Default</th>
+      <th>Require</th>
+      <th>Description</th>
+    </tr>
+  <thead>
+  <tbody>
+    <tr>
+      <td>width</td>
+      <td>number</td>
+      <td></td>
+      <td>❌</td>
+      <td>Logo dimension.</td>
+    </tr>
+    <tr>
+      <td>x</td>
+      <td>number</td>
+      <td></td>
+      <td>❌</td>
+      <td>If none, will center.</td>
+    </tr>
+    <tr>
+      <td>y</td>
+      <td>number</td>
+      <td></td>
+      <td>❌</td>
+      <td>If none, will center.</td>
+    </tr>
+  </tbody>
+</table>
+
 ## 💡 Image
 
-### usage
+### Usage
 
 ```js
 import React from 'react';
@@ -178,7 +248,7 @@ function App() {
 export default App;
 ```
 
-### props
+### Image props
 
 <table>
   <thead>
@@ -279,9 +349,9 @@ export default App;
 
 ## 📜 Changelog
 
-Latest version 2.2.2 (2022-10-17):
+Latest version 2.3.0 (2022-11-14):
 
-  * Update dependencies
+  * Add logo to canvas
 
 Details changes for each release are documented in the [CHANGELOG.md](https://github.com/Bunlong/next-qrcode/blob/master/CHANGELOG.md).
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next-qrcode",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "description": "React hooks for generating QR code for your next React apps.",
   "author": "Bunlong <[email protected]>",
   "license": "MIT",
@@ -21,7 +21,7 @@
     "react-qrcode",
     "create-react-app"
   ],
-  "homepage": "https://next-qrcode.github.io",
+  "homepage": "https://next-qrcode.js.org",
   "main": "dist/next-qrcode.js",
   "module": "dist/next-qrcode.es.js",
   "jsnext:main": "dist/next-qrcode.es.js",
@@ -55,6 +55,7 @@
     "@typescript-eslint/eslint-plugin": "^4.29.3",
     "@typescript-eslint/parser": "^4.29.3",
     "bundlesize": "^0.18.1",
+    "canvas": "^2.10.1",
     "eslint": "^7.32.0",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",

diff --git a/src/useQRCode.tsx b/src/useQRCode.tsx
@@ -6,7 +6,7 @@ export interface Colors {
   light?: string;
 }
 
-export interface Options {
+export interface QRCodeOptions {
   type?: string;
   quality?: number;
   level?: string;
@@ -16,9 +16,21 @@ export interface Options {
   color?: Colors;
 }
 
+export interface LogoOptions {
+  width?: number;
+  x?: number;
+  y?: number;
+}
+
+export interface Logo {
+  src: string;
+  options?: LogoOptions;
+}
+
 export interface IQRCode {
   text: string;
-  options?: Options;
+  options?: QRCodeOptions;
+  logo?: Logo;
 }
 
 function useImageComponent() {
@@ -56,6 +68,7 @@ function useCanvasComponent() {
   const CanvasComponent = <T extends HTMLCanvasElement>({
     text,
     options,
+    logo,
   }: IQRCode) => {
     const inputRef = React.useRef<T>(null);
 
@@ -72,9 +85,34 @@ function useCanvasComponent() {
               }
             },
           );
+
+          if (logo) {
+            const crt = inputRef.current;
+            const ctx = crt.getContext('2d');
+            if (ctx) {
+              const img = new Image();
+              img.src = logo.src;
+              const logoWidth = logo?.options?.width || 30;
+              if (logo?.options?.x && logo?.options?.y) {
+                const x = logo?.options?.x;
+                const y = logo?.options?.y;
+                img.onload = function () {
+                  ctx.drawImage(img, x, y, logoWidth, logoWidth);
+                };
+              } else if (!logo?.options?.x || !logo?.options?.y) {
+                let margin = options?.margin;
+                margin = !margin ? (margin === 0 ? 0 : 32) : (margin * 8);
+                const width = options?.width || (116 + margin);
+                const center = (width - logoWidth) / 2;
+                img.onload = function () {
+                  ctx.drawImage(img, center, center, logoWidth, logoWidth);
+                };
+              }
+            }
+          }
         }
       },
-      [text, options, inputRef],
+      [inputRef, text, options, logo],
     );
 
     return <canvas ref={inputRef} />;

diff --git a/supports/create-next-app/pages/index.tsx b/supports/create-next-app/pages/index.tsx
@@ -2,11 +2,33 @@ import type { NextPage } from 'next'
 import { useQRCode } from 'next-qrcode'
 
 const Home: NextPage = () => {
-  const { Canvas } = useQRCode()
+  const { Canvas, Image } = useQRCode()
 
   return (
     <>
       <Canvas
+        text={'https://github.com/bunlong/next-qrcode'}
+        options={{
+          level: 'M',
+          margin: 10,
+          scale: 4,
+          width: 400,
+          color: {
+            dark: '#010599FF',
+            light: '#FFBF60FF',
+          },
+        }}
+        logo={{
+          src: 'https://cdn-icons-png.flaticon.com/512/124/124010.png',
+          options: {
+            width: 50,
+            x: 1,
+            y: 0,
+          }
+        }}
+      />
+
+      {/* <Image
         text={'https://github.com/bunlong/next-qrcode'}
         options={{
           type: 'image/jpeg',
@@ -20,9 +42,18 @@ const Home: NextPage = () => {
             light: '#FFBF60FF',
           },
         }}
-      />
+      /> */}
     </>
   )
 }
 
 export default Home
+
+// logo={
+//   src: '',
+//   options: {
+//     x: '',
+//     y: '',
+//     width: 100,
+//   },
+// }