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");
 });
相关推荐
WHOVENLY5 小时前
【javaScript】- 笔试题合集(长期更新,建议收藏,目前已更新至31题)
开发语言·前端·javascript
指尖跳动的光5 小时前
将多次提交合并成一次提交
前端·javascript
程序员码歌5 小时前
短思考第263天,每天复盘10分钟,胜过盲目努力一整年
android·前端·后端
oden5 小时前
1 小时速通!手把手教你从零搭建 Astro 博客并上线
前端
若梦plus5 小时前
JS之类型化数组
前端·javascript
若梦plus5 小时前
Canvas 深入解析:从基础到实战
前端·javascript
若梦plus5 小时前
Canvas渲染原理与浏览器图形管线
前端·javascript
C_心欲无痕5 小时前
vue3 - 依赖注入(provide/inject)组件跨层级通信的优雅方案
前端·javascript·vue.js
幺零九零零6 小时前
全栈程序员-前端第二节- vite是什么?
前端