笔者在去年的一个项目当中是给学校做的一个后台管理系统，当时是要有在页面上编辑卷子然后将卷子导出的功能。就这涉及到了富文本编辑器的知识和将HTML转成图片的技术。今天这个文章主要是讲如何将html转成图片，富文本编辑器的知识可以观看笔者的另外一篇博客富文本编辑器实现原理如果想将html元素转变成图片那么就需要俩个技术。1.html2canvas–将html转变成canvas2.canvas2image–将canvas转变成图片html2canvas在npm官网里面下载下来是可以用的，但是canvas2image在npm官网里下载出来用不了，这个就很恼火，不过没关系，笔者之前经过多番的处理，已经弄成了，可以到此处下载：吴小迪的资源或者加笔者qq或者微信索要，QQ微信统一为1336791007。
我们先来写一个小demo（下面有实际项目，不要急）：
先看效果：接下来上代码：
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><style>*{margin:0;padding:0;}div{padding:20px;border:5pxsolidblack;}h2{background:#efefef;margin:10px;}.toPic{display:none;}</style></head><body><h2>原始HTML</h2><divstyle="background:red;width:600px;"class="test"><divstyle="background:green;"><divstyle="background:blue;"><divstyle="background:yellow;"><divstyle="background:orange;">6666666666666666666666666666666</div></div></div></div></div><h2class="toCanvas"><ahref="javascript:void(0);">转成canvas</a></h2><h2class="toPic"><ahref="javascript:void(0);">转成图片</a></h2><h5><labelfor="imgW">宽度:</label><inputtype="number"value=""id="imgW"placeholder="默认是原图宽度"/><labelfor="imgH">高度:</label><inputtype="number"value=""id="imgH"placeholder="默认是原图高度"/><labelfor="imgFileName">文件名:</label><inputtype="text"placeholder="文件名"id="imgFileName"/><selectid="sel"><optionvalue="png">png</option><optionvalue="jpeg">jpeg</option><optionvalue="bmp">bmp</option></select><buttonid="save">保存</button></h5></body></html>
js代码如下：
<scripttype="text/javascript"src="./jquery-3.3.1.js"></script>//自己在jquery官网下载下<scripttype="text/javascript"src="./html2canvas.min.js"></script>//自己在npm里面搜索下载下<scripttype="text/javascript"src="./canvas2image.js"></script>//在笔者的资源处下载下，或者找笔者索要<scripttype="text/javascript">vartest=$(".test").get(0);//将jQuery对象转换为dom对象//点击转成canvas$('.toCanvas').click(function(e){//调用html2canvas插件html2canvas(test).then(function(canvas){//canvas宽度varcanvasWidth=canvas.width;//canvas高度varcanvasHeight=canvas.height;//渲染canvas$('.toCanvas').after(canvas);//显示‘转成图片’按钮$('.toPic').show(1000);//点击转成图片$('.toPic').click(function(e){//调用Canvas2Image插件varimg=Canvas2Image.convertToImage(canvas,canvasWidth,canvasHeight);//渲染图片$(".toPic").after(img);//点击保存$('#save').click(function(e){lettype=$('#sel').val();//图片类型letw=$('#imgW').val();//图片宽度leth=$('#imgH').val();//图片高度letf=$('#imgFileName').val();//图片文件名w=(w==='')?canvasWidth:w;//判断输入宽高是否为空，为空时保持原来的值h=(h==='')?canvasHeight:h;//调用Canvas2Image插件Canvas2Image.saveAsImage(canvas,w,h,type,f);});});});});</script>
恭喜你，你已经完成了将HTML转变成Image的功能！，接下来我们走入实战！
实际项目展示：
这是一个html的富文本编辑器。而后我们看一下canvas的效果：最后我们将其变为图片：看完效果以后我们来看代码：当时这个项目使用react做的，直接在命令行安装的html2canvas包，因为在线上环境也是依赖的所以是-S
npmihtml2canvas-S
但是canvas2image包你在npm下载下来的是用不了的，所以笔者不推荐用npm安装，可以将笔者的资源拿去使用。吴小迪的资源这就可以依赖使用了。笔者是加了俩个点击事件，先转变成canvas而后转变成图片，朋友们也可以直接转变成图片。最后一个按钮是用于保存图片的
<Tagcolor="magenta"visible={this.state.visible1}onClick={this.toCanvas.bind(this)}ref={this.toCanvasImg}>转成canvas</Tag><Tagcolor="red"ref={this.toCanvasImgBtn}onClick={this.toImage.bind(this)}visible={this.state.visible2}>转成图片</Tag><Tagcolor="cyan"onClick={this.saveImage.bind(this)}visible={this.state.visible3}>保存模板</Tag>
然后我们来写方法
toCanvas=(e)=>{constjqueryDom=this.editor.$textContainerElem[0].childNodes[0];html2canvas(jqueryDom).then(function(canvas){this.setState({canvasImg:canvas,canvasWidth:canvas.width,canvasHeight:canvas.height,})//渲染canvasthis.toCanvasTitle1.current.style.display='block'this.toCanvasParent.current.style.display='block'this.toCanvasParent.current.appendChild(canvas)this.setState({visible1:false,visible2:true})}.bind(this))}toImage=(e)=>{constimg=Canvas2Image.convertToImage(this.state.canvasImg,this.state.canvasWidth,this.state.canvasHeight);//渲染canvasthis.toCanvasTitle2.current.style.display='block'this.toImageParent.current.style.display='block'this.toImageParent.current.appendChild(img)this.setState({visible2:false,visible3:true})}saveImage=(e)=>{Canvas2Image.saveAsImage(this.state.canvasImg,this.state.canvasWidth,this.state.canvasHeight,'png','template.png');}
这是笔者在实际项目中的使用。感谢大家的观看，有问题请评论留言。感觉的不错的有用的麻烦点个赞让更多的朋友知道，谢谢！
