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");
 });
相关推荐
举个栗子dhy1 分钟前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js
Coding_Doggy7 分钟前
苍穹外卖前端Day1 | vue基础、Axios、路由vue-router、状态管理vuex、TypeScript
前端
前端与小赵8 分钟前
vue3和vue2生命周期的区别
前端·javascript·vue.js
用户4582031531711 分钟前
10个你可能不知道的实用CSS技巧,立竿见影提升开发效率
前端·css
在逃牛马11 分钟前
【Uni-App+SSM+MP 宠物实战】Day4:Uni-App 项目初始化
前端
J_Asia13 分钟前
如何exclude不必要的so文件?
前端
一鹿有你们~14 分钟前
面试题-前端如何解决跨域
前端·javascript·跨域
文心快码BaiduComate19 分钟前
文心快码升级至3.5S版本,强化多智能体自协同能力
前端·后端·程序员
Sailing20 分钟前
👉 👉 Vue3 自定义 Hook:从入门到进阶(~~安静的阅读2分钟,相信我,这篇文章一定能给你启发)
前端·javascript·vue.js
南雨北斗27 分钟前
Vue3 v-html的用法
前端