Merge pull request #44 from zxpsuper/feature

Feature
zxpsuper · Jul 23, 2024 · 2549517 · 2549517
2 parents ecfa3f8 + da4c729
commit 2549517
Show file tree

Hide file tree

Showing 20 changed files with 545 additions and 256 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,10 @@
+{
+  "useTabs": false,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "semi": false,
+  "endOfLine": "auto"
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,19 @@
+## v1.1.1
+
+### Features
+
+- **style:** update dots style for `fluid-line` `stripe` `stripe-row` and `stripe-column`.
+
+### Fixs
+
+- **Promise reject:** `getCanvas` and `getImage` do not reject error.
+- **options:** without cornerOptions will throw error, now it has default options.
+
 ## v1.1.0
 
 ### Features
 
 - **style:** Set different color and type of dots and corners.
 - **logo:** More normal aspect ratio of logo but no always 1:1.
 - **logo:** Intelligent logo size.
-- **canvas:** Faster drawing speed then before.
+- **canvas:** Faster drawing speed then before.
diff --git a/README.md b/README.md
@@ -1,8 +1,6 @@
-# qrcode-with-logos 
-
-![](https://img.shields.io/github/stars/zxpsuper/qrcode-with-logos?style=flat&logo=github)  ![](https://img.shields.io/github/forks/zxpsuper/qrcode-with-logos?style=flat&logo=github) ![](https://img.shields.io/npm/v/qrcode-with-logos.svg?style=flat&logo=npm) ![](https://img.shields.io/npm/dt/qrcode-with-logos.svg?style=flat)  ![](https://img.shields.io/npm/dm/qrcode-with-logos
-) ![](https://img.shields.io/npm/l/qrcode.svg?style=flat)
+# qrcode-with-logos
 
+![](https://img.shields.io/github/stars/zxpsuper/qrcode-with-logos?style=flat&logo=github) ![](https://img.shields.io/github/forks/zxpsuper/qrcode-with-logos?style=flat&logo=github) ![](https://img.shields.io/npm/v/qrcode-with-logos.svg?style=flat&logo=npm) ![](https://img.shields.io/npm/dt/qrcode-with-logos.svg?style=flat) ![](https://img.shields.io/npm/dm/qrcode-with-logos) ![](https://img.shields.io/npm/l/qrcode.svg?style=flat)
 
 <img src="./images/qr-code.png" width="200"><img src="./images/qr-code2.png" width="200"><img src="./images/qr-code3.png" width="200">
 
@@ -25,29 +23,27 @@ npm install qrcode-with-logos --save
 ## Documentation
 
 Visit [https://zxpsuper.github.io/qrcode-with-logos](https://zxpsuper.github.io/qrcode-with-logos/)!
+
 ## Example
 
 ```html
-<img id="image" alt="">
+<img id="image" alt="" />
 ```
 
 ```js
-import QrCodeWithLogo from "qrcode-with-logos";
+import QrCodeWithLogo from 'qrcode-with-logos'
 let qrcode = new QrCodeWithLogo({
   // canvas: document.getElementById("canvas"),
-  content: "https://github.com/zxpsuper",
+  content: 'https://github.com/zxpsuper',
   width: 380,
   //   download: true,
-  image: document.getElementById("image"),
+  image: document.getElementById('image'),
   logo: {
-    src: "https://avatars1.githubusercontent.com/u/28730619?s=460&v=4"
-  },
-  nodeQrCodeOptions: {},
-  cornersOptions: {},
-  dotsOptions: {}
-});
-
-qrcode.downloadImage("qrcode.png");
+    src: 'https://avatars1.githubusercontent.com/u/28730619?s=460&v=4'
+  }
+})
+
+qrcode.downloadImage('qrcode.png')
 ```
 
 ## Dependencies

diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
@@ -25,19 +25,16 @@ yarn add qrcode-with-logos --save
 You can new a QrCodeWithLogo instance with canvas and content to create a qrcode.
 
 ```js
-import QrCodeWithLogo from "qrcode-with-logos";
+import QrCodeWithLogo from 'qrcode-with-logos'
 
 new QrCodeWithLogo({
-  image: document.getElementById("image"),
-  content: "https://github.com/zxpsuper",
+  image: document.getElementById('image'),
+  content: 'https://github.com/zxpsuper',
   width: 380,
   logo: {
-    src: "https://avatars1.githubusercontent.com/u/28730619?s=460&v=4",
-  },
-  nodeQrCodeOptions: {},
-  cornersOptions: {},
-  dotsOptions: {},
-});
+    src: 'https://avatars1.githubusercontent.com/u/28730619?s=460&v=4'
+  }
+})
 ```
 
 If you do not need to show the qrcode on the page, try not input the canvas options. And It will create a Canvas element inside to finish it's work!

diff --git a/docs/guide/methods.md b/docs/guide/methods.md
@@ -6,18 +6,15 @@ Return `Promise`, set the filename and download the image.
 
 ```js
 let qrcode = new QrCodeWithLogo({
-  content: "https://github.com/zxpsuper",
-  nodeQrCodeOptions: {},
-  cornersOptions: {},
-  dotsOptions: {},
+  content: 'https://github.com/zxpsuper',
   logo: {
-    src: "https://avatars1.githubusercontent.com/u/28730619?s=460&v=4",
-  },
-});
+    src: 'https://avatars1.githubusercontent.com/u/28730619?s=460&v=4'
+  }
+})
 
-qrcode.downloadImage("hello-world.png").then(() => {
+qrcode.downloadImage('hello-world.png').then(() => {
   // do what you want to do
-});
+})
 ```
 
 ## getCanvas()
@@ -26,21 +23,18 @@ Return `Promise<HTMLCanvasElement>`, you can use the HTMLCanvasElement to do mor
 
 ```js
 let qrcode = new QrCodeWithLogo({
-  content: "https://github.com/zxpsuper",
+  content: 'https://github.com/zxpsuper',
   width: 380,
-  image: document.getElementById("image"),
-  nodeQrCodeOptions: {},
-  cornersOptions: {},
-  dotsOptions: {},
+  image: document.getElementById('image'),
   logo: {
-    src: "https://avatars1.githubusercontent.com/u/28730619?s=460&v=4",
-  },
-});
+    src: 'https://avatars1.githubusercontent.com/u/28730619?s=460&v=4'
+  }
+})
 
 qrcode.getCanvas().then((canvas) => {
-  canvas.toDataURL();
+  canvas.toDataURL()
   // or do other things with canvas
-});
+})
 ```
 
 ## getImage()
@@ -49,21 +43,18 @@ Return `Promise<HTMLImageElement>`, you can use the HTMLImageElement to do more
 
 ```js
 let qrcode = new QrCodeWithLogo({
-  canvas: document.getElementById("canvas"),
-  content: "https://github.com/zxpsuper",
+  canvas: document.getElementById('canvas'),
+  content: 'https://github.com/zxpsuper',
   width: 380,
-  image: document.getElementById("image"),
-  nodeQrCodeOptions: {},
-  cornersOptions: {},
-  dotsOptions: {},
+  image: document.getElementById('image'),
   logo: {
-    src: "https://avatars1.githubusercontent.com/u/28730619?s=460&v=4",
-  },
-});
+    src: 'https://avatars1.githubusercontent.com/u/28730619?s=460&v=4'
+  }
+})
 
 qrcode.getImage().then((image) => {
   // or do other things with image
-});
+})
 ```
 
 ## toCanvas()

diff --git a/docs/guide/options.md b/docs/guide/options.md
@@ -12,7 +12,10 @@ QR Code content.
 
 - Default: `380`
 
-QR Code width.
+QR Code canvas width.
+
+> [!TIP]
+> If you feel that QRCode not sharp and not clear enough, you can set the width to larger and it looks better!
 
 ## canvas
 
@@ -24,6 +27,8 @@ A canvas tag to show the QR code.
 
 > [!TIP]
 > It is better to use image but not canvas if you don't need drawing after creating qrcode.
+>
+> Canvas may appear white and flashing!
 
 ## image
 
@@ -45,20 +50,17 @@ if download is a funciton, you can use it like:
 
 ```js
 new QrCodeWithLogo({
-  content: "https://github.com/zxpsuper",
+  content: 'https://github.com/zxpsuper',
   logo: {
-    src: "https://avatars1.githubusercontent.com/u/28730619?s=460&v=4",
+    src: 'https://avatars1.githubusercontent.com/u/28730619?s=460&v=4'
   },
-  nodeQrCodeOptions: {},
-  cornersOptions: {},
-  dotsOptions: {},
   download(downloadFn) {
     // you can choose when to start download by downloadFn...
     downloadFn().then(() => {
       // do what you want to do after download image!
-    });
-  },
-});
+    })
+  }
+})
 ```
 
 ## downloadName
@@ -182,6 +184,7 @@ It is the logo background color
 | "fluid"
 | "fluid-line"
 | "stripe"
+| "stripe-row"
 | "stripe-column"`
 - Default: `square`
 

diff --git a/docs/index.md b/docs/index.md
@@ -132,6 +132,7 @@ If you have some question or advise, you can send me a E-mail(zxpscau@163.com) o
           'fluid',
           'fluid-line',
           'stripe',
+          'stripe-row',
           'stripe-column'
         ],
         cornerType: 'square',

diff --git a/index.html b/index.html
@@ -11,14 +11,8 @@
       href="https://unpkg.com/view-design/dist/styles/iview.css"
     />
     <link rel="stylesheet" href="./index.css" />
-    <script
-      type="text/javascript"
-      src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"
-    ></script>
-    <script
-      type="text/javascript"
-      src="https://unpkg.com/view-design/dist/iview.min.js"
-    ></script>
+    <script type="text/javascript" src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/view-design/dist/iview.min.js"></script>
   </head>
   <body>
     <a
@@ -31,19 +25,16 @@
       <h2>qrcode-with-logos</h2>
       <p>
         You can input
-        <span class="code">qrcode.downloadImage('qrcode')</span> to download
-        image on console.
+        <span class="code">qrcode.downloadImage('qrcode')</span> to download image on console.
         <button onclick="qrcode.downloadImage('qrcode')">download!</button>
       </p>
       <p>
         You can input
-        <span class="code">qrcode.getCanvas().then(canvas => {})</span> to deal
-        with the canvas.
+        <span class="code">qrcode.getCanvas().then(canvas => {})</span> to deal with the canvas.
       </p>
       <p>
         You can input
-        <span class="code">qrcode.getImage().then(image => {})</span> to deal
-        with the image.
+        <span class="code">qrcode.getImage().then(image => {})</span> to deal with the image.
       </p>
       <div style="margin-top: 16px">
         <canvas id="canvas" title="canvas"></canvas>
@@ -61,9 +52,7 @@ <h2>qrcode-with-logos</h2>
               placeholder="choose"
               @on-change="createQrcode"
             >
-              <i-option v-for="item in dotTypes" :value="item" :key="item"
-                >{{ item }}</i-option
-              >
+              <i-option v-for="item in dotTypes" :value="item" :key="item">{{ item }}</i-option>
             </i-select>
           </span>
         </i-col>
@@ -76,9 +65,7 @@ <h2>qrcode-with-logos</h2>
               placeholder="choose"
               @on-change="createQrcode"
             >
-              <i-option v-for="item in cornerTypes" :value="item" :key="item"
-                >{{ item }}</i-option
-              >
+              <i-option v-for="item in cornerTypes" :value="item" :key="item">{{ item }}</i-option>
             </i-select>
           </span>
         </i-col>
@@ -119,6 +106,7 @@ <h2>qrcode-with-logos</h2>
             'fluid',
             'fluid-line',
             'stripe',
+            'stripe-row',
             'stripe-column'
           ],
           cornerType: 'square',
@@ -140,13 +128,13 @@ <h2>qrcode-with-logos</h2>
           createQrcode() {
             window.qrcode = new QrCodeWithLogo({
               canvas: document.getElementById('canvas'),
-              content: 'https://github.com/zxpsuper',
+              content: 'https://github.com/zxpsuper/qrcode-with-logos',
               width: 1024,
               download: false,
               image: document.getElementById('image'),
               logo: {
                 src: 'https://avatars.githubusercontent.com/u/28730619?v=4',
-                borderWidth: 60,
+                // borderWidth: 60,
                 bgColor: '#eee',
                 borderRadius: 60,
                 logoRadius: 20
@@ -164,16 +152,23 @@ <h2>qrcode-with-logos</h2>
                 }
               },
               nodeQrCodeOptions: {
-                margin: 4,
+                margin: 10,
                 color: {
                   dark: '#f00',
                   light: '#eee'
                 }
               },
               onError(error) {
-                console.log(error)
+                console.log(error, 100)
               }
             })
+
+            window.qrcode.getImage().catch((err) => {
+              console.log(err, 111)
+            })
+            window.qrcode.getCanvas().catch((err) => {
+              console.log(err, 222)
+            })
           }
         }
       })