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");
 });
相关推荐
Eric_见嘉4 小时前
打开这个 VSC 设置「组件引用位置」和数量就都清楚了
前端·typescript·visual studio code
李高钢5 小时前
Python Tornado 框架入门:从零搭建你的第一个异步 Web 应用
前端·python·tornado
宁风5 小时前
JavaScript:函数体系-1
前端·javascript
mmsx5 小时前
Android 手簿 ADB 无线调试全攻略:USB 转 WiFi 一键连接
android·前端
guwentian5 小时前
Rolldown vs esbuild vs Webpack:Rust 打包器大战我们该怎么选
前端·webpack·rust·esbuild
特立独行的猫A5 小时前
用纯 Rust 重写 Podcastfy:把网页、PDF 和一段文字,变成一档双人对话播客
前端
oooo_z5 小时前
美股历史K线数据API接口选型指南:iTick覆盖1分钟到月线全周期
服务器·前端·javascript
今日无bug5 小时前
从 0 到 1 搭建端侧 AI 项目:DeepSeek-R1 + WebGPU + React + TS + Tailwind 全栈笔记
前端·react.js·typescript
mmsx5 小时前
MapLibre 实战 08|GPS 点漂了几百米才被发现:GCJ-02 纠偏原理与"转两次"陷阱
android·前端
QUOR6 小时前
ZorvAI · GenUI 技术构架与功能介绍
html·github