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");
 });
相关推荐
Charles_go11 小时前
C#8、有哪些访问修饰符
java·前端·c#
慧一居士11 小时前
Vue中 class 和 style 属性的区别对比
前端·vue.js
oil欧哟12 小时前
文心 5.0 来了,百度大模型的破局之战
前端·人工智能·百度·prompt
东华帝君12 小时前
react 切片 和 优先级调度
前端
洞窝技术12 小时前
Next.js 不只是前端框架!我们用它搭了个发布中枢,让跨团队协作效率翻倍
前端·next.js
带着梦想扬帆启航12 小时前
UniApp 多个异步开关控制教程
前端·javascript·uni-app
诚实可靠王大锤12 小时前
WebSocket调试工具(html),用于调试WebSocket链接是否畅通
websocket·网络协议·html
小高00712 小时前
JavaScript 内存管理是如何工作的?
前端·javascript
是大林的林吖12 小时前
解决 elementui el-cascader组件懒加载时存在选中状态丢失的问题?
前端·javascript·elementui
鹏仔工作室12 小时前
elemetui中el-date-picker限制开始结束日期只能选择当月
前端·vue.js·elementui