今天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文件:
如何用代码控制浏览器下载知乎大v的粉丝数据?