利用 html2canvas 做个简单的诗词卡片生成器
html2canvas 简介
html2canvas 顾名思义,就是一个可以把 DOM 元素转换成图片的类库,常用于网页截图。网页截图常见的应用场景是,在意见反馈里对当前页面进行截图,方便反馈页面出现的问题,比如页面样式出错,举报网站上的违规行为等等。
除了截图外,还可以用来制作一些在线生成图片的功能,比如这个在线生成条形图。
做一个诗词卡片生成工具
所谓诗词卡片生成工具,就是能把某一首诗词,生成一张精美的诗词卡片。当然对于不懂设计的我来说,想要做到精美有点困难。
实现原理是,利用富文本编辑器,让用户输入诗词,生成 HTML,再通过 html2canvas 把 HTML 生成图片。
大致实现
安装依赖。wangeditor 是一个比较不错的富文本编辑器,至少界面不会太丑。
npm install html2canvas --save-dev
npm install wangeditor--save-dev
把 wangeditor 封装成 Vue 组件。
<template>
<div>
<div class="rich-editor" id="editorElem" style="text-align:left"></div>
</div>
</template>
<script>
import E from 'wangeditor'
export default {
data() {
return {
editorContent: ''
}
},
props: {
value: {
type: String,
default: ''
}
},
mounted() {
this.editorContent = this.value
this.editor = new E('#editorElem')
this.editor.customConfig.onchange = html => {
this.editorContent = html
this.$emit('input', this.editorContent)
}
this.editor.create()
this.editor.txt.html(this.editorContent)
},
destroyed() {
// this.editor.destroy()
}
}
</script>
调用富文本编辑器。
<my-rich-editor v-model="content"></my-rich-editor>
把用户输入的富文本,保存在一个 div
里面。captureStyle
是用户设置的卡片的样式。
<div id="capture" v-html="content" :style="captureStyle"></div>
最后利用 html2canvas 生成卡片,供用户下载。
html2canvas(document.querySelector('#capture')).then(canvas => {
let img = canvas.toDataURL('image/png')
// 显示图片
})
最终效果:
利用 html2canvas 做个简单的诗词卡片生成器的更多相关文章
- 利用Excel做一些简单的数据分析
先来几个原始数据的截图,如下所示: 示例图就举一个吧,因为这些数据量还挺大的,大概的总结了一下,这下列这几栏中不合规范的数据占比很大: (1)民族(经分析,在此表中所涉及到的民族分别为:汉族,满族,蒙 ...
- 利用jmeter做一个简单的性能测试并进行参数化设置
1.新增一个线程组,并在下面添加基本原件,包括:监听器.http请求默认值和一个事务控制器 在http请求默认值中填写 ip 地址和端口号,协议类型默认为http 2.添加代理服务器,以便之后进行录制 ...
- 利用Django做一个简单的分页页面
views代码: from django.shortcuts import render from django.conf import settings from booktest.models i ...
- 利用ANTLR4实现一个简单的四则运算计算器
利用ANTLR4实现一个简单的四则运算计算器 ANTLR4介绍 ANTLR能够自动地帮助你完成词法分析和语法分析的工作, 免去了手写去写词法分析器和语法分析器的麻烦 它是基于LL(k)的, 以递归下降 ...
- 使用Multiplayer Networking做一个简单的多人游戏例子-3/3(Unity3D开发之二十七)
使用Multiplayer Networking做一个简单的多人游戏例子-1/3 使用Multiplayer Networking做一个简单的多人游戏例子-2/3 使用Multiplayer Netw ...
- 利用Python做绝地科学家(外挂篇)
i春秋作家:奶权 前言 玩吃鸡时间长的鸡友们 应该都知道现在的游戏环境非常差 特别在高端局 神仙满天飞 搞得很多普通玩家非常没有游戏体验 因为吃鸡的火爆 衍生出了一条巨大的外挂利益链 导致市面上出 ...
- 程序猿修仙之路--数据结构之你是否真的懂数组? c#socket TCP同步网络通信 用lambda表达式树替代反射 ASP.NET MVC如何做一个简单的非法登录拦截
程序猿修仙之路--数据结构之你是否真的懂数组? 数据结构 但凡IT江湖侠士,算法与数据结构为必修之课.早有前辈已经明确指出:程序=算法+数据结构 .要想在之后的江湖历练中通关,数据结构必不可少. ...
- MUI框架-05-用MUI做一个简单App
MUI框架-05-用MUI做一个简单App MUI 是一个前端框架,前端框架就像 Bootstrap,EasyUI,Vue ,为了做 app 呢,就有了更加高效的 MUI,我觉得前端框架有很多,也没有 ...
- 【译文】利用STAN做贝叶斯回归分析:Part 2 非正态回归
[译文]利用STAN做贝叶斯回归分析:Part 2 非正态回归 作者 Lionel Hertzogn 前一篇文章已经介绍了怎样在R中调用STAN对正态数据进行贝叶斯回归.本文则将利用三个样例来演示怎样 ...
随机推荐
- 工作随笔——selenium支持post请求,支持自定义header
背景: 最近在写一个小程序,发现博主所在的地区访问该网站时有防ddos功能验证导致程序不能正常工作. 经过试验发现可以用国外代理ip解决这个问题,但是程序走代理访问延迟高且不稳定. 思路: selen ...
- javascript中的异步 macrotask 和 microtask 简介
javascript中的异步 macrotask 和 microtask 简介 什么是macrotask?什么是microtask?在理解什么是macrotask?什么是microtask之前,我们先 ...
- 《奇思妙想:15位计算机天才及其重大发现》【PDF】下载
<奇思妙想:15位计算机天才及其重大发现>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196328 内容简介 本书介绍了15位当代 ...
- spring cloud eureka高可用
记录下自己踩的坑 spring cloud eureka的高可用网上的教程大致分为两种,一种是两两互相注册,一种是三个互相注册. 1.两两互相注册 普通服务的注册写法都是http://peer1/eu ...
- Platt SMO 和遗传算法优化 SVM
机器学习算法实践:Platt SMO 和遗传算法优化 SVM 之前实现了简单的SMO算法来优化SVM的对偶问题,其中在选取α的时候使用的是两重循环通过完全随机的方式选取,具体的实现参考<机器学习 ...
- 51、css初识
前端内容就分三部分html.css.javascript(js),对一个网页来说html相当于是一个裸体的人,css相当于给这个人穿上了衣服,javascript相当于给这个人赋予动作行为,今天我们要 ...
- 【python】函数闭包
列表时可以改
- ArcGIS 网络分析[1.1] 创建用于网络分析用的线类型shp文件[这个太基础了吧!]
具体的准备,在上一篇就说过了,不再赘述. 阅读本篇前,需要的预备知识是:ArcGIS创建各种矢量数据的方法,了解地理坐标与投影坐标 本篇只创建单一的线数据,至于点数据,以后进行复杂的网络分析时再添加进 ...
- UVA 10559 Blocks
题目大意:有一串带颜色的方块,每次可以消掉颜色相同的一段,得到size^2的分数,问最多能得到多少分数.n≤200. 给这题状态跪下来. 显然的区间DP,但设f[i][j]是不够的. 考虑到之前做过的 ...
- Create 命令详解
mkdir:创建一个目录 /mkdir a b c :创建同级目录 /mkdir -p aa/bb/cc: 递归创建目录touch:修改文件时间戳,或者新建一个不存在的文件 /-a 更改存取时间 /m ...