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')
// 显示图片
})

最终效果:

项目 demo源码

利用 html2canvas 做个简单的诗词卡片生成器的更多相关文章

  1. 利用Excel做一些简单的数据分析

    先来几个原始数据的截图,如下所示: 示例图就举一个吧,因为这些数据量还挺大的,大概的总结了一下,这下列这几栏中不合规范的数据占比很大: (1)民族(经分析,在此表中所涉及到的民族分别为:汉族,满族,蒙 ...

  2. 利用jmeter做一个简单的性能测试并进行参数化设置

    1.新增一个线程组,并在下面添加基本原件,包括:监听器.http请求默认值和一个事务控制器 在http请求默认值中填写 ip 地址和端口号,协议类型默认为http 2.添加代理服务器,以便之后进行录制 ...

  3. 利用Django做一个简单的分页页面

    views代码: from django.shortcuts import render from django.conf import settings from booktest.models i ...

  4. 利用ANTLR4实现一个简单的四则运算计算器

    利用ANTLR4实现一个简单的四则运算计算器 ANTLR4介绍 ANTLR能够自动地帮助你完成词法分析和语法分析的工作, 免去了手写去写词法分析器和语法分析器的麻烦 它是基于LL(k)的, 以递归下降 ...

  5. 使用Multiplayer Networking做一个简单的多人游戏例子-3/3(Unity3D开发之二十七)

    使用Multiplayer Networking做一个简单的多人游戏例子-1/3 使用Multiplayer Networking做一个简单的多人游戏例子-2/3 使用Multiplayer Netw ...

  6. 利用Python做绝地科学家(外挂篇)

    i春秋作家:奶权 前言  玩吃鸡时间长的鸡友们 应该都知道现在的游戏环境非常差 特别在高端局 神仙满天飞 搞得很多普通玩家非常没有游戏体验  因为吃鸡的火爆 衍生出了一条巨大的外挂利益链 导致市面上出 ...

  7. 程序猿修仙之路--数据结构之你是否真的懂数组? c#socket TCP同步网络通信 用lambda表达式树替代反射 ASP.NET MVC如何做一个简单的非法登录拦截

    程序猿修仙之路--数据结构之你是否真的懂数组?   数据结构 但凡IT江湖侠士,算法与数据结构为必修之课.早有前辈已经明确指出:程序=算法+数据结构  .要想在之后的江湖历练中通关,数据结构必不可少. ...

  8. MUI框架-05-用MUI做一个简单App

    MUI框架-05-用MUI做一个简单App MUI 是一个前端框架,前端框架就像 Bootstrap,EasyUI,Vue ,为了做 app 呢,就有了更加高效的 MUI,我觉得前端框架有很多,也没有 ...

  9. 【译文】利用STAN做贝叶斯回归分析:Part 2 非正态回归

    [译文]利用STAN做贝叶斯回归分析:Part 2 非正态回归 作者 Lionel Hertzogn 前一篇文章已经介绍了怎样在R中调用STAN对正态数据进行贝叶斯回归.本文则将利用三个样例来演示怎样 ...

随机推荐

  1. SSM学习(三)--集成spring mvc

    spirng mvc是一个mvc框架,与struts2类似,都是基于Servlet封装而成的框架,所以要了解spring mvc或者struts2比需先了解Servlet,本篇我们先把spring m ...

  2. 使用Spring访问Mongodb的方法大全——Spring Data MongoDB查询指南

    1.概述 Spring Data MongoDB 是Spring框架访问mongodb的神器,借助它可以非常方便的读写mongo库.本文介绍使用Spring Data MongoDB来访问mongod ...

  3. SQL Server 全文索引的管理

    全文索引不同于常见的聚集索引或非聚集索引,这些索引的内部实现是平衡树(B-Tree)结构,而全文索引在物理上是由一系列的内部表(Internal tables)构成的,这些内部表称作全文索引片段(Fr ...

  4. SpringMVC+ZTree实现树形菜单权限配置

    计划在开源项目里加入权限配置的功能,打算加入zTree实现树形结构. Team的Github开源项目链接:https://github.com/u014427391/jeeplatform 欢迎sta ...

  5. 前后端分离ueditor富文本编辑器的使用-Java版本

    最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...

  6. 转:一篇讲线上优化查 CPU的脚本

    原文链接:https://my.oschina.net/leejun2005/blog/1524687   摘要: 本文主要针对 Java 服务而言 0.背景 经常做后端服务开发的同学,或多或少都遇到 ...

  7. bzoj 1801: [Ahoi2009]chess 中国象棋

    Description 在N行M列的棋盘上,放若干个炮可以是0个,使得没有任何一个炮可以攻击另一个炮. 请问有多少种放置方法,中国像棋中炮的行走方式大家应该很清楚吧. Input 一行包含两个整数N, ...

  8. Macaca环境配置及样例执行

    1.Macaca简介 macaca是由阿里巴巴公司开发的一套自动化解决方案,适用于PC端和移动端.Macaca基于Node.js开发,测试案例编写语言暂时也只支持Node.js. 2.Macaca与A ...

  9. [编织消息框架][消息服务]rmi

    RMI(即Remote Method Invoke 远程方法调用) 远程对象: 用于远程客户端调用 必需继承java.rmi.Remote,每个调用方法必须添加java.rmi.RemoteExcep ...

  10. Python爬虫通过替换http request header来欺骗浏览器实现登录

    以豆瓣为例,访问https://www.douban.com/contacts/list 来查看自己关注的人,要登录才能查看. 如果用requests.get()方法获取这个http,没登录只能抓取回 ...