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");
 });
相关推荐
Erishen11 分钟前
🚀 重新定义前端组件安装体验:shadcn + Bun 的极致开发效率
前端
冬奇Lab11 分钟前
Vercel部署全攻略:从GitHub到上线,10分钟让你的前端项目免费拥有自己的域名
前端·后端·node.js
牛马11114 分钟前
Flutter Web性能优化标签解析
前端·flutter·性能优化
Bigger14 分钟前
Tauri (25)——消除搜索列表默认选中的 UI 闪动
前端·react.js·weui
松涛和鸣19 分钟前
45、无依赖信息查询系统(C语言+SQLite3+HTML)
c语言·开发语言·数据库·单片机·sqlite·html
李少兄26 分钟前
简单讲讲 SVG:前端开发中的矢量图形
前端·svg
前端小万27 分钟前
告别 CJS 库加载兼容坑
前端·前端工程化
恋猫de小郭27 分钟前
Flutter 3.38.1 之后,因为某些框架低级错误导致提交 Store 被拒
android·前端·flutter
JarvanMo31 分钟前
Flutter 需要 Hooks 吗?
前端
光影少年41 分钟前
前端如何虚拟列表优化?
前端·react native·react.js