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/

README.md

@@ -89,7 +89,7 @@ Type: `Object`
 
 `nodeQrCodeOptions.margin`:
 
-Type `Number` -- qrcode margin
+Type `Number`  -- Default: 4. qrcode margin 
 
 `nodeQrCodeOptions.errorCorrectionLevel`:
 

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>

docs/.vitepress/config.js

@@ -0,0 +1,38 @@
+export default {
+  // 站点级选项
+  title: 'qrcode-with-logos',
+  description: 'The tool for creating a QRcode with logo',
+  base: '/qrcode-with-logos/',
+  lastUpdated: true,
+  markdown: {
+    image: {
+      // 默认禁用图片懒加载
+      lazyLoading: true
+    }
+  },
+  themeConfig: {
+    search: {
+      provider: 'local'
+    },
+    // 主题级选项
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Github', link: 'https://github.com/zxpsuper/qrcode-with-logos' },
+    ],
+    sidebar: [
+      {
+        text: 'Introduction',
+        items: [
+          { text: 'Getting Started', link: '/guide/getting-started' },
+          { text: 'Options', link: '/guide/options' },
+          { text: 'Methods', link: '/guide/methods' },
+          { text: 'Discussions', link: '/guide/discussions' },
+        ]
+      }
+    ],
+    footer: {
+      message: 'Released under the MIT License.',
+      copyright: 'Copyright © 2019-present zxpsuper'
+    }
+  }
+}

docs/.vitepress/theme/index.js

@@ -0,0 +1,18 @@
+// .vitepress/theme/index.js
+import DefaultTheme from 'vitepress/theme'
+import ElementPlus from 'element-plus'
+import Comment from '../components/comment.vue'
+
+import Tongji from '../components/tongji.vue'
+import 'element-plus/dist/index.css'
+
+/** @type {import('vitepress').Theme} */
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    // 注册自定义全局组件
+    app.use(ElementPlus)
+    app.component('Comment', Comment)
+    app.component('Tongji', Tongji)
+  }
+}

docs/guide/discussions.md

@@ -0,0 +1,16 @@
+# Discussions
+
+We’re using Discussions as a place to connect with other members of our community. We hope that you:
+
+- Ask questions you’re wondering about.
+- Share ideas.
+- Engage with other community members.
+- Welcome others and are open-minded. Remember that this is a community we
+build together 💪.
+
+To get started, comment below with an introduction of yourself and tell us about what you do with this community.
+
+<Comment/>
+
+
+<Tongji/>

docs/guide/getting-started.md

@@ -0,0 +1,43 @@
+# Getting-started
+
+## Installation
+
+Qrcode-with-logos has been published on npm and you can install it with:
+
+::: code-group
+
+```sh [npm]
+npm install qrcode-with-logos --save
+```
+
+```sh [pnpm]
+pnpm add qrcode-with-logos --save
+```
+
+```sh [yarn]
+yarn add qrcode-with-logos --save
+```
+
+:::
+
+## Usage
+
+You can new a QrCodeWithLogo instance with canvas and content to create a qrcode.
+
+```js
+import QrCodeWithLogo from 'qrcode-with-logos'
+
+new QrCodeWithLogo({
+  canvas: document.getElementById("canvas"),
+  content: "https://github.com/zxpsuper",
+  width: 380,
+  logo: {
+    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!
+
+
+
+<Tongji/>

docs/guide/methods.md

@@ -0,0 +1,61 @@
+# Methods
+
+## downloadImage(name: string)
+
+Return `Promise`, set the filename and download the image.
+
+```js
+let qrcode = new QrCodeWithLogo({
+  content: "https://github.com/zxpsuper",
+  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,
+  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,
+  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
+});
+```
+
+<Tongji/>