怎么将html内容写入到canvas中并生成图片？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
一：下载html2canvas插件
下载html2canvas插件
使用npm进行下载
npm install html2canvas二：html2canvas使用介绍
在html2canvas中主要使用两种方法
将html内容写入到canvas中
html2canvas(element，options).then((canvas) =>{})参数说明：
element：需要将html内容写入canvas的jQuery对象
options：配置信息
常用的配置基本信息：
scale：缩放比例,默认为1
allowTaint：是否允许跨域图像污染画布，默认为false
useCORS：是否尝试使用CORS从服务器加载图像，默认为false
width：canvas画布的宽度,默认为jQuery对象的宽度
height：canvas画布的高度,默认为jQuery对象的高度
backgroundColor：/画布的背景色，默认为透明(#fff),参数可以为#表示的颜色，也可以使用rgba
将canvas画布信息转化为base64格式图片
canvas.toDataURL("image/png")如果你的html内容中有指定的内容不写入到canvas中的话，你可以给标签添加如下属性
data-html2canvas-ignore="true"三：简单实例
引入html2canvas
<script src="js/html2canvas.min.js"></script>或者使用import引入html2canvas
import html2canvas from 'html2canvas';需要转化的的html内容
<div class="capture"> <img src="./wj.jpg" alt=""> <div> <span style="color: #f00;letter-spacing: 20px">这是文字文字</span> <span data-html2canvas-ignore="true">不写入canvas</span> </div></div>将html内容写入canvas并转化为base64图片
html2canvas(document.getElementsByClassName("capture")[0], { scale: 2,//缩放比例,默认为1 allowTaint: false,//是否允许跨域图像污染画布 useCORS: true,//是否尝试使用CORS从服务器加载图像 width: '500',//画布的宽度 height: '500',//画布的高度 backgroundColor: '#000000',//画布的背景色，默认为透明 }).then((canvas) => { //将canvas转为base64格式 var imgUri = canvas.toDataURL("image/png"); });这里注意jQuery对象是do关于怎么将html内容写入到canvas中并生成图片问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注编程网行业资讯频道了解更多相关知识。
