Art-QRCode-min

說明

• 這版先做一個純js合成藝術二維碼的縮減版，暫時只能通過輸入文字生成，後續會實現一個前後端分離的項目，實現更復雜的功能.

• 目前暫時只設計了三款二維碼，後續可能會依次上傳，稍後會附上設計規範，可以自行設計上傳。

• 查看demo請戳：http://www.duhonghui.top/artqrcode/#/

• 生成代碼是基於QRcode.js進行封裝的，利用canvas實現藝術圖案填充，vue全家桶構建...

素材尺寸以及命名規範

圖中單位尺寸為 50px ，黑字為該素材在下面的代碼中的命名。

注：灰色淺底為輔助展示，實際裁剪時並沒有灰色底，裁剪圖片一律為png格式的透明底。

合成二維碼代碼

/** * 組件中引入 * import QRcode from 'core.js'; * let qrcode = new QRCode.QRCode(DOMElement, {Options配置}); */// 組件中引入配置let qrcode = new QRCode.QRCode(document.getElementById("qrcode"), { /** * text：二維碼的信息 */text: self.text, /** * width,height 是二維碼區域的長寬 * bgWidth,bgHeight 是整張背景圖片的長寬 * top,left 是二維碼距離整圖的座標距離 */width: self.UIscource.position.width,height: self.UIscource.position.height,bgWidth: self.UIscource.position.bgWidth,bgheight: self.UIscource.position.bgHeight,top: self.UIscource.position.top,left: self.UIscource.position.left, /** * 對應每種情況的填充圖案 * 切記需要等圖片加載完畢（可以使用 promis.all）再執行繪製的代碼，否則會報錯 */border: self.UIscource.border,eye: self.UIscource.eye,row4: self.UIscource.row4,row3: self.UIscource.row3,row2col3:self.UIscource.row2col3,row3col2:self.UIscource.row3col2,single: self.UIscource.single,row2col2: self.UIscource.row2col2,corner:self.UIscource.corner});

功能

選擇二維碼樣式 輸入鏈接或者文字 點擊生成藝術二維碼

導出高清圖片

待優化

二維碼名片設計

. . .

效果展示

界面

生成藝術二維碼示例：

GitHub:https://github.com/252860883/Art-QRCode-min

小主們記得關注喲

閱讀更多 前端圈 的文章

關鍵字: 藝術 後續 二維碼