字符画生成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文件:

如何用代码控制浏览器下载知乎大v的粉丝数据?

本文分享自微信公众号 - 无界社区mixlab(Design-AI-Lab),作者:Hanz

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-05-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 像写作一样去写代码,如何把异步的形式改写成同步的形式

    写代码的时候,碰到一大堆的缩进、花括号是不是特别头疼?为什么会有这么多的标点符号,还有各种技术概念?能不能像写作一样,自由得书写?从形式上,代码比文章多的是格式...

    mixlab
  • CanisMinor WxApp 2.0

    UI/UX Desinger / FE Developer / 产品经理 / 设计管理

    mixlab
  • 自己动手做一个识别手写数字的web应用02

    继续上文。 自己动手做一个识别手写数字的web应用01 01 再次进入docker容器 接着上一篇文章,我们继续使用上次新建好的容器,可以终端输入 : d...

    mixlab
  • Swift---泛型(Generics)

    用户3004328
  • SpringBoot 控制并发登录的人数教程

    通常系统都会限制同一个账号的登录人数,多人登录要么限制后者登录,要么踢出前者,Spring Security 提供了这样的功能,本文讲解一下在没有使用Secur...

    java思维导图
  • Android训练课程(Android Training) - 使用Volley传输网络数据(Transmitting Network Data Using Volley)

    Volley 是一个 HTTP 库,它使得在Android应用程序中操作网络更容易,是重要的,更多快速的。Volley 属于“开放源代码项目”。.

    zhangyunfeiVir
  • SpringBoot 并发登录人数控制,附踢人功能

    通常系统都会限制同一个账号的登录人数,多人登录要么限制后者登录,要么踢出前者,Spring Security 提供了这样的功能,本文讲解一下在没有使用Secur...

    挨踢小子部落阁
  • SpringBoot 并发登录人数控制,附踢人功能

    通常系统都会限制同一个账号的登录人数,多人登录要么限制后者登录,要么踢出前者,Spring Security 提供了这样的功能,本文讲解一下在没有使用Secur...

    搜云库技术团队
  • SpringBoot 并发登录人数控制

    通常系统都会限制同一个账号的登录人数,多人登录要么限制后者登录,要么踢出前者,Spring Security 提供了这样的功能,本文讲解一下在没有使用Secur...

    用户4143945
  • SpringBoot 并发登录人数控制

    通常系统都会限制同一个账号的登录人数,多人登录要么限制后者登录,要么踢出前者,Spring Security 提供了这样的功能,本文讲解一下在没有使用Secur...

    JAVA葵花宝典

扫码关注云+社区

领取腾讯云代金券