技术选型

要在前端生成图片，自然会想到使用Canvas来做。

  1. 自己封装Canvas API
  2. 使用开源库，如 html2canvas

方案一开发、维护成本较高，并且 html2canvas 已经比较成熟稳定了，所以选择方案二。

html2canvas的基本介绍

该脚本允许您直接在用户浏览器上拍摄网页或部分网页的"截图"。屏幕截图基于 DOM，因此可能无法 100% 准确到真实表示，因为它不会进行实际屏幕截图，而是根据页面上提供的信息构建屏幕截图。

官方文档

使用

安装

npm install html2canvas

只需调用 html2canvas(element, options) 如：

import html2canvas from 'html2canvas'
/**
 * 导出图表
 * @param {Element} dom 要保存为图片的DOM节点
 */
html2canvas(dom).then(canvas => {
  const imgUrl = canvas.toDataURL()
  const a = document.createElement('a')
  a.href = imgUrl
  a.download = '图片名字'
  a.click()
})

更多关于options的配置请查看官方文档

# vue.js # javascript
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区