feat: new feature

.github/workflows/deploy.yml

@@ -0,0 +1,33 @@
+name: Build and Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - feature  # 指定触发部署的分支，通常是main或master
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest  # 使用最新的Ubuntu虚拟环境
+
+    steps:
+    - name: Checkout Code
+      uses: actions/checkout@v2
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v1
+      with:
+        node-version: '19'  # 指定Node.js的版本，根据您的项目需求调整
+
+    - name: Install Dependencies
+      run: npm install # 安装依赖
+
+    - name: Build
+      run: npm run docs:build # 构建文档
+
+    - name: Deploy to GitHub Pages
+      uses: JamesIves/github-pages-deploy-action@4.1.4 # 使用他人的 action 将文档推送至 gh-pages 分支
+      with:
+        GITHUB_TOKEN: ${{ secrets.BLOB_DEPLOY_PRI }}
+        BRANCH: gh-pages  # 部署到gh-pages分支
+        FOLDER: docs/.vitepress/dist  # 指定构建目录，根据您的构建工具可能不同，如'build'或'dist'
+        CLEAN: true  # 清理旧文件

.gitignore

@@ -60,6 +60,9 @@ typings/
 # next.js build output
 .next
 
-dist
+.cache
 
-.cache
+docs/.vitepress/dist/
+docs/.vitepress/cache/
+
+dist/

.npmignore

@@ -1,9 +1,14 @@
+.cache/
+.github/
+docs/
 dist/
 src/
 .gitignore
 .npmignore
 .npmrc
 index.html
+index.ts
+index.css
 demo.png
 index.ts
 rollup.config.js

CHANGELOG.md

@@ -0,0 +1,7 @@
+## 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.
+- **canvas:** Faster drawing speed then before.

README.md

@@ -20,193 +20,9 @@ It can create a canvas or a image for the QRcode and even you can use the method
 npm install qrcode-with-logos --save
 ```
 
-## Options
+## Documentation
 
-### `content`(required)
-
-Type: `String`
-
-QR Code content.
-
-### `width`
-
-Type: `Number`
-
-Default: `0`
-
-QR Code width.
-
-### `canvas`
-
-Type: `DomElement`
-
-Default: a new canvas tag
-
-A canvas tag to show the QR code.
-
-### `image`
-
-Type: `DomElement`
-
-Default: a new img tag
-
-A img tag to show the QR code.
-
-### `download`
-
-Type: `Boolean`
-
-Default: `false`
-
-You can set the value to be true to download the file immediately.
-
-Examplate
-
-```js
-new QrCodeWithLogo({
-  canvas: document.getElementById("canvas"),
-  content: "https://github.com/zxpsuper",
-  width: 380,
-  download: true,
-  image: document.getElementById("image"),
-  logo: {
-    src: "https://avatars1.githubusercontent.com/u/28730619?s=460&v=4"
-  }
-})
-```
-
-### `downloadName`
-
-Type: `String`
-
-Default: `qr-code.png`
-
-Set the download file name, should be used with the `download` property.
-
-### `nodeQrCodeOptions`
-
-Type: `Object`
-
-`nodeQrCodeOptions.margin`:
-
-Type `Number` -- qrcode margin
-
-`nodeQrCodeOptions.errorCorrectionLevel`:
-
-Type `String`-- qrcode errorCorrectionLevel, such as "M", "Q", "H"
-
-`nodeQrCodeOptions.scale`:
-
-Type `Number`-- qrcode scale
-
-`nodeQrCodeOptions.color`:
-
-Type `Object`-- qrcode color
-
-`nodeQrCodeOptions.color.dark`:
-
-Type `String`-- qrcode color value of dark
-
-`nodeQrCodeOptions.color.light`:
-
-Type `String`-- qrcode color value of light
-
-### `logo`
-
-Type: `Object`
-
-`logo.src`(required):
-
-Type `String`-- logo url or logo module
-
-`logo.logoRadius`:
-
-Type `Number` -- Default: `0`
-
-`logo.logoSize`:
-
-Type `Number` -- Default: `0.15`, is the scale to qrcode
-
-`logo.borderRadius`:
-
-Type `Number` -- Default: `8`
-
-`logo.borderColor`:
-
-Type `String` -- Default: `"#ffffff"`
-
-`logo.borderSize`:
-
-Type `Number` -- Default: `0.05` , is the scale to qrcode
-
-`logo.bgColor`:
-
-Type `String` -- Default: `"#ffffff"`, the logo background color
-
-`logo.crossOrigin`:
-
-Type `String` -- Default: `"Anonymous"`
-
-## Methods
-
-`downloadImage(name: string)` ———— Return `Promise`, set the filename and download the image.
-
-```js
-let qrcode = new QrCodeWithLogo({
-  canvas: document.getElementById("canvas"),
-  content: "https://github.com/zxpsuper",
-  width: 380,
-  //   download: true,
-  image: document.getElementById("image"),
-  logo: {
-    src: "https://avatars1.githubusercontent.com/u/28730619?s=460&v=4"
-  }
-});
-
-qrcode.downloadImage("hello-world.png").then(() => {
-  // do what you want to do
-})
-```
-`getCanvas()` ———— Return `Promise<HTMLCanvasElement>`, you can use the HTMLCanvasElement to do more things with canvas.
-
-```js
-let qrcode = new QrCodeWithLogo({
-  canvas: document.getElementById("canvas"),
-  content: "https://github.com/zxpsuper",
-  width: 380,
-  //   download: true,
-  image: document.getElementById("image"),
-  logo: {
-    src: "https://avatars1.githubusercontent.com/u/28730619?s=460&v=4"
-  }
-});
-
-qrcode.getCanvas().then(canvas => {
-  canvas.toDataURL()
-  // or do other things with canvas
-});
-
-```
-
-`getImage()` ———— Return `Promise<HTMLImageElement>`, you can use the HTMLImageElement to do more things with image.
-
-```js
-let qrcode = new QrCodeWithLogo({
-  canvas: document.getElementById("canvas"),
-  content: "https://github.com/zxpsuper",
-  width: 380,
-  //   download: true,
-  image: document.getElementById("image"),
-  logo: {
-    src: "https://avatars1.githubusercontent.com/u/28730619?s=460&v=4"
-  }
-});
-
-qrcode.getImage().then(image => {
-  // or do other things with image
-});
-
-```
+visit [qrcode-with-logos](https://zxpsuper.github.io/qrcode-with-logos/)
 ## Example
 
 ```html
@@ -230,7 +46,7 @@ let qrcode = new QrCodeWithLogo({
 qrcode.downloadImage("qrcode.png");
 ```
 
-## Ecosystem
+## Dependencies
 
 | Project  | Status                             | Description                   |
 | -------- | ---------------------------------- | ----------------------------- |

docs/.vitepress/components/comment.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="giscus"></div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Comment',
+  mounted() {
+    const script = document.createElement('script')
+    script.setAttribute('data-repo', 'zxpsuper/qrcode-with-logos')
+    script.setAttribute('data-repo-id', 'MDEwOlJlcG9zaXRvcnkxOTM4MjUxODg=')
+    script.setAttribute('data-category', 'Announcements')
+    script.setAttribute('data-category-id', 'DIC_kwDOC42JpM4CgVKz')
+    script.setAttribute('data-mapping', 'pathname')
+    script.setAttribute('data-strict', '0')
+    script.setAttribute('data-reactions-enabled', '1')
+    script.setAttribute('data-emit-metadata', '0')
+    script.setAttribute('data-input-position', 'bottom')
+    script.setAttribute('data-theme', 'preferred_color_scheme')
+    script.setAttribute('data-lang', 'en')
+    script.setAttribute('crossorigin', 'anonymous')
+    script.src = 'https://giscus.app/client.js'
+    document.body.appendChild(script)
+  }
+}
+</script>

docs/.vitepress/components/tongji.vue

@@ -0,0 +1,17 @@
+<template>
+  <div></div>
+</template>
+<script>
+export default {
+  name: 'Tongji',
+  mounted() {
+    var _hmt = _hmt || []
+    ;(function () {
+      var hm = document.createElement('script')
+      hm.src = 'https://hm.baidu.com/hm.js?21afdcf6c76090b1f2ee7c584c71dd98'
+      var s = document.getElementsByTagName('script')[0]
+      s.parentNode.insertBefore(hm, s)
+    })()
+  }
+}
+</script>