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");
 });
相关推荐
小扳24 分钟前
Web 毕设篇-适合小白、初级入门练手的 Spring Boot Web 毕业设计项目:电影院后台管理系统(前后端源码 + 数据库 sql 脚本)
java·前端·数据库·spring boot·mysql·spring·课程设计
田本初24 分钟前
从0-1逐步搭建一个前端脚手架工具并发布到npm
前端·npm·node.js
Marshall35721 小时前
Canvas 和 SVG 的高级使用与性能优化
前端·svg·canvas
Java学长-kirito2 小时前
springboot/ssm网购平台管理系统Java在线购物商城管理平台web电商源码
java·前端·spring boot
夫琅禾费米线2 小时前
JavaScript 中的 Generator 函数及其方法
开发语言·前端·javascript
Traced back2 小时前
pinia的使用
前端
世界和平�����2 小时前
vue3 命名式(函数式)弹窗
前端·javascript·vue.js
所遇所思2 小时前
vue项目中中怎么获取环境变量
前端·javascript·vue.js
ljklxlj3 小时前
webview4/edgewebbrower学习记录——执行js
前端·javascript·学习
潜龙在渊灬3 小时前
纯CSS实现无限轮播banner,这道题你解出来了吗?
前端·css·程序员