字符画生成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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏hightopo

原 Web SCADA 电力接线图工控组态

3276
来自专栏ytkah

Excel表格的35招必学秘技[配图]

一、让数据按需排序   如果你要将员工按其所在的部门进行排序,这些部门名称既的有关信息不是按拼音顺序,也不是按笔画顺序,怎么办?可采用自定义序列来排序。  ...

6138
来自专栏GIS讲堂

OL3+中链家地图找房功能实现

看看链家的地图找房功能,其实比较简单,主要包涵: 1)基于行政区划的统计展示; 2)分级别展示,逐级钻取。

2193
来自专栏阮一峰的网络日志

网页性能管理详解

你遇到过性能很差的网页吗? 这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅。 ? 你会有什么反应?我猜想,大多数用户会...

2909
来自专栏Android源码框架分析

理解Android硬件加速原理的小白文

硬件加速,直观上说就是依赖GPU实现图形绘制加速,软硬件加速的区别主要是图形的绘制究竟是GPU来处理还是CPU,如果是GPU,就认为是硬件加速绘制,反之,软件绘...

2774
来自专栏哈雷彗星撞地球

(译)快速指南:用UIViewPropertyAnimator做动画

翻译自:QUICK GUIDE: ANIMATIONS WITH UIVIEWPROPERTYANIMATOR 译者:Haley_Wong

643
来自专栏Python小屋

基于Python+tkinter+pygame的音乐播放器完整源码

import os import tkinter import tkinter.filedialog import random import time imp...

4344
来自专栏Python小屋

Python使用tkinter打造自定义对话框完整代码

问题来源:前一阵发过一个技术文章Python编写抽奖式随机提问程序,其中有个弹出式对话框,好像上海科技大学宋老师在群里当时问了一句对话框中中奖姓名是否能显示的大...

5394
来自专栏谦谦君子修罗刀

react-native-swiper组件-横扫你的轮播图

一念起,万水千山。一念灭,沧海桑田。 许久不曾召幸React Native爱妃,未曾想一见竟让寡人目瞪口呆。啥~~~你就说你买包包的速度能跟上你版本迭代更新的...

6136
来自专栏前端说吧

JS案例 - 基于vue的移动端长按手势

当时首先想到要做长按事件的时候,我想到的是vue内部的自定义指令,毕竟官网里边有这么一句描述:

1902

扫码关注云+社区

领取腾讯云代金券