Javascript:使用canvas画二维码矩阵

矩阵是由0和1组成的数组。

0-白色

1-黑色

javascript 复制代码
/**
 * 
 * @param matrix Array
 * @param size Int
 * @param padding Int
 * @param transparentBackground Boolean
 * @returns {string}
 */
function createQRCodeCanvas(matrix, size, padding, transparentBackground) {
  size = size || 3
  padding = padding === undefined ? 3 : padding
  const width = Math.sqrt(matrix.length)
  const canvasWith = width * size + padding * 2

  const canvas = document.createElement('canvas')
  canvas.width = canvasWith
  canvas.height = canvasWith

  const ctx = canvas.getContext('2d')
  if(!transparentBackground) {
    ctx.fillStyle = 'rgb(255,255,255)'
    ctx.fillRect(0, 0, canvasWith, canvasWith)
  }
  ctx.fillStyle = 'rgb(0,0,0)'

  for (let y = 0; y < width; y++) {
    for (let x = 0; x < width; x++) {
      const point = y * width + x
      if (matrix[point] === 1) {
        ctx.fillRect(padding + x * size, padding + y * size, size, size)
      }
    }
  }
  return canvas.toDataURL()
}
相关推荐
WebInfra1 分钟前
Midscene v1.0 发布 - 视觉驱动,UI 自动化体验跃迁
javascript·人工智能·测试
自由与自然16 分钟前
栅格布局常用用法
开发语言·前端·javascript
Violet_YSWY23 分钟前
讲一下ruoyi-vue3的前端项目目录结构
前端·javascript·vue.js
C_心欲无痕26 分钟前
vue3 - toRaw获取响应式对象(如由reactive创建的)的原始对象
前端·javascript·vue.js
小林攻城狮30 分钟前
一个基于 canvas 的 pdf 图片分页切割方法
前端·javascript
OpenTiny社区33 分钟前
2025年OpenTiny年度人气贡献者评选正式开始
前端·javascript·vue.js
JosieBook36 分钟前
【Vue】04 Vue技术——Vue 模板语法详解:插值与指令
前端·javascript·vue.js
贺今宵42 分钟前
el-table-v2element plus+大量数据展示虚拟表格实现自定义排序,选择样式调整行高亮
javascript·vue.js·ecmascript
1024肥宅1 小时前
面试和算法:常见面试题实现与深度解析
前端·javascript·面试
Ashley_Amanda1 小时前
JavaScript 中数组的常用处理方法
开发语言·javascript·网络