HTML制作诗词,利用 html2canvas 做个简单的诗词卡片生成器

html2canvas 简介

html2canvas 顾名思义，就是一个可以把 DOM 元素转换成图片的类库，常用于网页截图。网页截图常见的应用场景是，在意见反馈里对当前页面进行截图，方便反馈页面出现的问题，比如页面样式出错，举报网站上的违规行为等等。

除了截图外，还可以用来制作一些在线生成图片的功能，比如这个在线生成条形图。

做一个诗词卡片生成工具

所谓诗词卡片生成工具，就是能把某一首诗词，生成一张精美的诗词卡片。当然对于不懂设计的我来说，想要做到精美有点困难。

实现原理是，利用富文本编辑器，让用户输入诗词，生成 HTML，再通过 html2canvas 把 HTML 生成图片。

大致实现

安装依赖。wangeditor 是一个比较不错的富文本编辑器，至少界面不会太丑。

npm install html2canvas --save-dev

npm install wangeditor--save-dev

把 wangeditor 封装成 Vue 组件。

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()

}

把用户输入的富文本，保存在一个 div 里面。captureStyle 是用户设置的卡片的样式。

最后利用 html2canvas 生成卡片，供用户下载。

html2canvas(document.querySelector('#capture')).then(canvas => {

let img = canvas.toDataURL('image/png')

// 显示图片

})

最终效果：

HTML制作诗词,利用 html2canvas 做个简单的诗词卡片生成器相关推荐

python自己做个定时器_技术图文：如何利用 Python 做一个简单的定时器类？
原标题:技术图文:如何利用 Python 做一个简单的定时器类? 背景今天在B站上看有关 Python 最火的一个教学视频 -- "零基础入门学习 Python",这也是我们 P ...
利用Python做一个简单的对战小游戏
利用Python做一个简单的文字对战小游戏一.游戏介绍 1.大体介绍:文字版的对战小游戏,可以利用Python随机生成两个角色,角色带有各自的血量和攻击值两个指标.两人在对战时同时攻击对方,同时造成 ...
技术图文：如何利用 Python 做一个简单的定时器类？
背景今天在B站上看有关 Python 最火的一个教学视频,零基础入门学习 Python,这也是我们 Python基础刻意练习活动的推荐视频教程. 在学习魔法方法的时候,有一节视频是制作一个简单的定 ...
利用python做一个简单小应用--学生通讯录管理系统
该简单学生通讯录管理系统六个可操作过程 1.添加学生 2.删除学生 3.修改学生 4.查询学生 5.获取所有学生通讯信息 6.退出系统话不多说,上代码 # -*- codeing = utf-8 - ...
利用java做一个简单的计算器
共两个类.还只是完成+.-.×.÷运算而已. GUI只是用了AWT,很简单,相信一看就能懂了. Calculator.java public class Calculator{ private Str ...
利用pytorch 做一个简单的神经网络实现sklearn库中莺尾花的分类
本文针对本人学习pytorch的分类问题,自己写了一个简单的code import numpy as np from collections import Counter from sklearn i ...
python开发酷q插件gui_【酷Q插件制作】教大家做一个简单的签到插件
.版本 2.支持库 internet .程序集程序集1 .子程序 _启动子程序, 整数型, , 请在本子程序中放置易模块初始化代码 _临时子程序 ()'在初始化代码执行完毕后调用测试代码返回 (0 ...
android用kotlin制作计算器,使用Kotlin做一个简单计算器
样式如下图: 1.布局文件: xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http: ...
利用Python做一个简单的打印店计费程序
我自己买了一个打印机,除了自己用,打算方便大家,为大家提供付费打印服务. 按张数 x 计费: 1.你有纸,每张0.2元:0.2 * x 2.没纸,我有纸,分段计费: (1)1到20张,每张0.3元:0 ...
利用OpenCV做个熊猫表情包吧
有的时候很想把一些有意思的图中的人脸做成熊猫表情,但是由于不太会ps,只能无奈放弃,so sad... 正好最近想了解下opencv的使用,那就先试试做个简单的熊猫表情生成器把~~ 思路就是,工具给两 ...

HTML制作诗词,利用 html2canvas 做个简单的诗词卡片生成器

HTML制作诗词,利用 html2canvas 做个简单的诗词卡片生成器相关推荐

最新文章

热门文章