[[375760]]

 簡(jiǎn)單調(diào)用就能滿(mǎn)足網(wǎng)址掃碼預(yù)覽和分享、登錄掃碼認(rèn)證等二維碼功能。

QRCanvas 能用來(lái)做什么

動(dòng)態(tài)生成帶二維碼的海報(bào)是業(yè)務(wù)型產(chǎn)品中很常見(jiàn)的需求，之前分享過(guò)如何通過(guò) html2canvas 將html+css寫(xiě)出來(lái)的布局生成海報(bào)，而今天分享的 QRCanvas 則是專(zhuān)門(mén)滿(mǎn)足如何在前端生成動(dòng)態(tài)二維碼的需求。

QRCanvas 功能特性

API 非常簡(jiǎn)單，簡(jiǎn)單到只需要一個(gè)文本參數(shù)就能生成二維碼

雖然調(diào)用簡(jiǎn)單，但也提供了強(qiáng)大的定制化功能

零依賴(lài)，只需要瀏覽器支canvas，兼容性極佳

支持 vue / react 等框架以及 cdn 引入的方式在前端使用，也支持 node.js 后端調(diào)用

開(kāi)發(fā)使用體驗(yàn)

多年以前，前端發(fā)展并沒(méi)有像如今那么繁榮，生成二維碼海報(bào)的開(kāi)發(fā)依賴(lài)于后端，幾乎是將文字和圖片像水印一樣疊加合成，極其繁瑣而且受限，生成出來(lái)的海報(bào)在視覺(jué)上往往質(zhì)量很低。

而 QRCanvas 的使用非常簡(jiǎn)單，無(wú)論是使用 vue 開(kāi)發(fā)還是傳統(tǒng)的 cdn 引入，都能快速地集成到已有的項(xiàng)目中，并且提供了詳細(xì)的代碼例子，也提供了可視化的工具來(lái)調(diào)節(jié)定制化參數(shù)，不僅能調(diào)整二維碼大小、像素點(diǎn)的樣式和顏色，還能動(dòng)態(tài)添加背景圖片、logo 等支持，這對(duì)于實(shí)現(xiàn)海報(bào)設(shè)計(jì)的個(gè)性化豐富非常友好，配合 html2canvas ，能夠快速開(kāi)發(fā)實(shí)現(xiàn)動(dòng)態(tài)生成美觀(guān)好看的二維碼營(yíng)銷(xiāo)海報(bào)。

二維碼定制工具

代碼例子

當(dāng)然了，QRCanvas 不僅僅是用來(lái)生成海報(bào)，也可以單獨(dú)使用，比如生成網(wǎng)址掃碼預(yù)覽和分享、登錄掃碼認(rèn)證等功能，是一個(gè)使用簡(jiǎn)單，功能強(qiáng)大的優(yōu)秀開(kāi)源項(xiàng)目，非常值得收藏使用。

免費(fèi)開(kāi)源使用說(shuō)明

QRCanvas 的前身是 jsqrgen，基于 MIT 協(xié)議在 Github 上開(kāi)源，任何人都可以免費(fèi)下載安裝使用，祝大家搬磚愉快。

原文鏈接：https://www.thosefree.com/qrcanvas