字符画生成01
今天mixlab群里有人问：
网站
https://www.fontke.com/tool/image2ascii/
上传图片生成字符画，如何把文本转化为图片保存下来。
解决方案是：
1 获取每行的字符：
document.querySelector('#char-image-data').innerText.split('\n')；
2 通过for循环，把每行的每个字符画到canvas里；
3 另存canvas成图片下载至本地。
把这个过程写成js代码，console里注入网站即可下载图片。
代码是 Hanz 现写的：
function draw () {
let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d')
let elem = document.querySelector('#char-image-data')
let elemSizeRect = elem.getBoundingClientRect() canvas.width = elemSizeRect.width canvas.height = elemSizeRect.height
let textContent = elem.innerText
let textList = textContent.split('\n')
let len = textList.length
// color ctx.fillStyle = 'black' ctx.font = elem.style.fontSize + ' monospace' const LINE_HEIGHT = parseInt(elem.style.lineHeight)
for (let index = 0; index < len; index++) { ctx.fillText( textList[index], 0, // x LINE_HEIGHT * (index + 1) // y ) }
document.body.appendChild(canvas)
let img = document.createElement('img') img.src = canvas.toDataURL()
let downloadLink = document.createElement('a')
downloadLink.download = 'text-img-' + Date.now() + '.png'
downloadLink.href = img.src
downloadLink.click()
downloadLink.innerHTML = "下载图片" downloadLink.style.fontSize = '20px' downloadLink.style.display = 'block' downloadLink.style.padding = '1em'
document.body.appendChild(downloadLink)
}draw()
知识点：
通过a标签，click自动下载canvas生成的图片。
另外，还可以通过a标签下载爬取的数据存成json文件：
对了，6月的活动开启报名了～
在公众号菜单里，6月活动可以获取链接报名噢～