[摘要]在我们做h5页面或者推广小程序的时候，特别是在微信里，为了让用户更好的分享给朋友，往往需要将动态生成的html生成一个图片，然后让用户长按保存发给朋友或者朋友圈。1，在html里新建canvas画布...
在我们做h5页面或者推广小程序的时候，特别是在微信里，为了让用户更好的分享给朋友，往往需要将动态生成的html生成一个图片，然后让用户长按保存发给朋友或者朋友圈。
1，在html里新建canvas画布
/**要生成图片的html*/<p class="con_1">
<p class="con_1_5">
<span class="title_des2">思路惊奇</span>
<span class="title_des3">思路惊奇</span>
</p>
<img class="con_1_1" src="style/ActiveCDN/bonus/page7_1.png" alt="">
<img class="con_1_2" src="style/ActiveCDN/bonus/page7_1.png" alt="">
</p>/*生成的canvas和最终生成的图片*/<p class="shareImg">
<canvas id="canvas" width="750" height="1206"></canvas>
<img src="" alt="">
</p>//设置canva画布大小，这里会把画布大小设置为2倍，为了解决生成图片不清晰的问题，需要注意接下来所有的函数都是在html2canvas这个对象里定义的
var html2canvas={
canvas:document.getElementById("canvas"),
ctx:canvas.getContext("2d"),
saveImage:function(){
this.canvas.width=windowPro.innerWidth*2;
this.canvas.height=windowPro.innerHeight*2-4.8*bastFontSize;
this.ctx.fillStyle="#0c3e78";
this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
}
}2，将要生成的图片的dom元素载入canvas中
a， 获取要加载到canvas的图片
domArray:[$(".con_1_1"),$(".con_1_2")],//要加载的图片元素列表
imgArrayLoad:function(){
var that=this,domArray=this.domArray; for(var i=0,len=domArray.length;i<len;i++){
(function(){
//循环出所有图片元素，一个个图片添加
that.addImgToCanvas(domArray[i],that.imgAllLoad);
}())
}
},b，获取每个图片元素的在页面上大小，距离顶部地步距离，然后绘制到canvas相应的位置
addImgToCanvas:function(obj,fn){ var width=obj.width()*2,//图片在网页宽度
height=obj.height()*2,//图片在网页高度
x=obj[0].x*2,//图片距离网页最顶部距离
y=obj[0].y*2,//图片距离网页最右边距离
img=new Image(),
that=this,
src=obj.attr("src");
img.src=src;
img.onload=function(){ //把图片绘制到canvas上
that.ctx.drawImage(obj[0],x,y,width,height);上
that.loadImgNum++; if(fn && typeof fn === "function")fn(that.loadImgNum); /**位置1**/
}
},
3，将要生成的文字的dom元素载入canvas中
a， 获取要加载文字元素
textObj:[$(".title_des2"),$(".title_des3")],
textArratLoad:function(){
var that=this; for(var m=0,len=that.textObj.length;m<len;m++){
(function(){
that.writeTextOnCanvas(domArray[m],parseInt(28)+"px 微软雅黑","#d0b150")
})()
}
},b，获取每个文字元素距离网页距离，同样的，距离距离长度必须喂2倍，把文字添加到canvas上
writeTextOnCanvas:function(obj,fontsize,color){//添加文字到canvas
var width=obj.width()*2,
height=obj.height()*2, x=obj.offset().left*2, y=obj.offset().top*2;
var that=this;
var text=obj.html().replace(/^\s+ 关键词：如何将html转化为图片