怎么将html内容写入到canvas中并生成图片?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
创新互联是一家集网站建设,温宿企业网站建设,温宿品牌网站建设,网站定制,温宿网站建设报价,网络营销,网络优化,温宿网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。一:下载html2canvas插件
1:下载html2canvas插件
2:使用npm进行下载
npm install html2canvas
二:html2canvas使用介绍
在html2canvas中主要使用两种方法
1:将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
2:将canvas画布信息转化为base64格式图片
canvas.toDataURL("image/png")
如果你的html内容中有指定的内容不写入到canvas中的话,你可以给标签添加如下属性
data-html2canvas-ignore="true"
三:简单实例
1:引入html2canvas
或者使用import引入html2canvas
import html2canvas from 'html2canvas';
2:需要转化的的html内容
这是文字文字 不写入canvas
3:将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中并生成图片问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。