四字关键词转文字

最新推荐文章于 2024-05-09 15:15:12 发布

秃头小宝贝(柚子君)

最新推荐文章于 2024-05-09 15:15:12 发布

阅读量73

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_43557302/article/details/134332637

版权

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <title>Logo Creator</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
<input type="text" id="companyName" placeholder="Enter your company name">
<button onclick="createLogo(document.getElementById('companyName').value)">Create Logo</button>
<br>
<canvas id="canvas"></canvas>
<script>
  // 将base64转换为文件(file 格式)
  function dataURLtoFile(dataurl, filename) {
    console.log("dataurl====>",dataurl)
    var _arr = dataurl.split(','), mime = _arr[0].match(/:(.*?);/)[1],
      bstr = atob(_arr[1]), n = bstr.length, u8arr = new Uint8Array(n)
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([ u8arr ], filename, { type: mime })
  }

  function createLogo(companyName, toFile=true) {
    let colors = [ '#A0DEF1', '#F1A0A0', '#A5BFE5', '#E5C387', '#B2CF91', '#BFA5DE', '#E6C8A9', '#A7ADE2', '#E898C0' ]
    let index = Math.floor(Math.random()*9)
    let company = document.getElementById("companyName").value
    var c = document.getElementById("canvas")
    c.width = 100
    c.height = 100
    var ctx=c.getContext("2d")

    ctx.textBaseline = "middle"
    ctx.fillStyle=colors[index]
    ctx.fillRect(0, 0, 100, 100)
    ctx.fillStyle = "#fff"

    if(company.length==1) {
      ctx.font = '50px "微软雅黑"'
      ctx.fillText(company, 25, 54)
    } else if(company.length==2) {
      ctx.font = '38px "微软雅黑"'
      ctx.fillText(company, 12, 54)
    } else if(company.length==3) {
      ctx.font = '28px "微软雅黑"'
      ctx.fillText(company, 8, 54)
    } else if(company.length==4) {
      let a = company.substring(0, 2)
      let b = company.substring(2, 4)

      ctx.font = '28px "微软雅黑"'
      ctx.fillText(a, 24, 36)
      ctx.fillText(b, 24, 74)
    }

    if(toFile) {
      let dataUrl = c.toDataURL("image/png")
      return {
        file: dataURLtoFile(dataUrl, `${company}_logo.png`),
        url: dataUrl
      }
    }
    console.log("c=====>",c)
    console.log("dataUrl=====>",dataUrl)
    return c.toDataURL("image/png")
  }
</script>
</body>
</html>

在这里插入图片描述