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");
 });
相关推荐
问心无愧05133 分钟前
ctf show web入门81
前端·笔记
ZC跨境爬虫7 分钟前
跟着MDN学HTML_day_49:(ShadowRoot接口)
前端·javascript·ui·html·ecmascript·媒体
小则又沐风a13 分钟前
初步了解进程的概念
java·linux·服务器·前端
审判长烧鸡13 分钟前
【前端】npm audit fix 修复漏洞时的具体逻辑
前端·npm
幽络源小助理18 分钟前
IP定位系统源码二开版 新增分销功能 PHP地理位置查询系统
前端·开源·源码·php源码
JianZhen✓18 分钟前
前端面试“八股文” - 核心、高频知识体系整理
前端·ai编程
sheeta199818 分钟前
Pinia核心笔记
前端·vue.js·笔记
淑子啦23 分钟前
TS 和组件绑定深耕(泛型表格)
前端·javascript·react.js
道清茗1 小时前
【shell编程知识点汇总】第九章 HTML 清洗、多行合并与条件替换
前端·html
噢,我明白了2 小时前
表单的完整 CRUD 练习【极简个人记账本】(含前端后端链接mySQL)
java·前端·数据库·mysql