html转换成图片

使用html2canvas依赖包

一、安装依赖

javascript 复制代码
npm install --save html2canvas

二、使用方法

javascript 复制代码
html2canvas(element, options).then((canvas) => {});

三、参数说明

element:需要将HTML内容写入canvas的jQuery对象;
options:配置信息,常用的配置基本信息包括:

1.scale:缩放比例,默认为1;

2.allowTaint:是否允许跨域图像污染画布,默认为false;

3.useCORS:是否尝试使用CORS从服务器加载图像,默认为false;

4.width:canvas画布的宽度,默认为jQuery对象的宽度;

5.height:canvas画布的高度,默认为jQuery对象的高度;

6.backgroundColor:画布的背景色,默认为透明(#fff),参数可以为#表示的颜色,也可以使用rgba。

canvas.toDataURL()将html转换成base64图片

如果您的HTML内容中有指定的内容不希望被写入到canvas中,可以给相应的标签添加data-html2canvas-ignore="true"属性

四、示例

javascript 复制代码
import html2canvas from 'html2canvas';
 html2canvas(testText.value).then((canvas) =>{
     url.value = canvas.toDataURL("image/png");
 });
相关推荐
觉醒大王3 小时前
哪些文章会被我拒稿?
论文阅读·笔记·深度学习·考研·自然语言处理·html·学习方法
大橙子额3 小时前
【解决报错】Cannot assign to read only property ‘exports‘ of object ‘#<Object>‘
前端·javascript·vue.js
爱喝白开水a5 小时前
前端AI自动化测试:brower-use调研让大模型帮你做网页交互与测试
前端·人工智能·大模型·prompt·交互·agent·rag
Never_Satisfied5 小时前
在JavaScript / HTML中,关于querySelectorAll方法
开发语言·javascript·html
董世昌415 小时前
深度解析ES6 Set与Map:相同点、核心差异及实战选型
前端·javascript·es6
吃杠碰小鸡6 小时前
高中数学-数列-导数证明
前端·数学·算法
kingwebo'sZone6 小时前
C#使用Aspose.Words把 word转成图片
前端·c#·word
xjt_09016 小时前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
我是伪码农7 小时前
Vue 2.3
前端·javascript·vue.js
夜郎king7 小时前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落