<!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>
四字关键词转文字
最新推荐文章于 2024-08-27 15:59:21 发布