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");
 });
相关推荐
zpjing~.~4 分钟前
css 二维码始终显示在按钮的正下方,并且根据不同的屏幕分辨率自动调整位置
前端·javascript·html
红虾程序员19 分钟前
Linux进阶命令
linux·服务器·前端
yinuo20 分钟前
uniapp在微信小程序中实现 SSE 流式响应
前端
lynx_29 分钟前
又一个跨端框架——万字长文解析 ReactLynx 实现原理
前端·javascript·前端框架
子燕若水35 分钟前
UE5 Chaos :官方文献总结 + 渲染网格体 (Render Mesh) 和模拟网格体 是如何关联的?为什么模拟网格体 可以驱动渲染网格体?
前端
Anlici1 小时前
深度前端面试知识体系总结
前端·面试
夜寒花碎1 小时前
前端基础理论——02
前端·javascript·html
uhakadotcom1 小时前
简单易懂的Storybook介绍:让前端UI组件开发变得更高效
前端·javascript·面试
bnnnnnnnn1 小时前
前端实现多服务器文件 自动同步宝塔定时任务 + 同步工具 + 企业微信告警(实战详解)
前端·javascript·后端
返乡coder1 小时前
一文掌握React基础用法:从零开始构建现代Web应用
前端