html转化成图片
在我们做h5页面或者推广小游戏的时候，特别是在微信里，为了让用户更好的分享给朋友，往往需要将动态生成的html生成一个图片，然后让用户长嗯保存发给朋友或者朋友圈。
先说下思路：将要生成的html元素逐一的加载到canvas画布中，然后用canvas的toDataURL方法生成图片。
下边将会介绍两种生成方法，方法一需要你自己来做。方法二现成的js插件html2canvas。
方法一：自己来做
这里我们按照之前的思路，我们首先把html元素绘制到canvas画板里。
1，在html里新建canvas画布
/**要生成图片的html*/
class="con_1">
class="con_1_5">
class="title_des2">思路惊奇
class="title_des3">思路惊奇
![]()
class="con_1_1" src="style/ActiveCDN/bonus/page7_1.png" alt="">
![]()
class="con_1_2" src="style/ActiveCDN/bonus/page7_1.png" alt="">
/*生成的canvas和最终生成的图片*/
class="shareImg">
"" alt="">
//设置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中，
一般我们想生成图片的时候，dom元素基本上由图片和文字组成，想一些效果之类的是不适合生成图片的。
a， 获取要加载到canvas的图片
domArray:[$(".con_1_1"),$(".con_1_2")],//要加载的图片元素列表
imgArrayLoad:function(){
var that=this,domArray=this.domArray;
for(var i=0,len=domArray.length;ifunction(){
//循环出所有图片元素，一个个图片添加
that.addImgToCanvas(domArray[i],that.imgAllLoad);
}())
}
},
b，获取每个图片元素的在页面上大小，距离顶部地步距离，然后绘制到canvas相应的位置
这里图片大小和距离也是取得2倍，原因是解决生成的图片不清晰。
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中，
同把图片插入到canvas类似，首先需要获取文字元素，确定文字在网页中上下左右的位置，之后插入到相应的canvas里。
a， 获取要加载文字元素，
textObj:[$(".title_des2"),$(".title_des3")],
textArratLoad:function(){
var that=this;
for(var m=0,len=that.textObj.length;mfunction(){
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+|\s+$/, "");//去掉文字里的空格
that.ctx.fillStyle =color; //设置文字颜色
that.ctx.font = fontsize;//设置文字大小
that.ctx.textAlign="left";//设置文字对其方向
textBaseline = "middle";
//因为canvas里的文字不会换行，所以我们需要想办法让长段文字换行
for(var i = 1; that.getTrueLength(text) > 0; i++){
var tl = that.cutString(text, 30);
that.ctx.fillText(text.substr(0, tl), x, y+36*i);// 把文字添加到canvas上
text = text.substr(tl);
}
},
c，文字绘制到canvas时，自动换行。。因为canvas绘制文字的时候只能设置最大宽度和距离顶部左边距离。所以我们需要自行处理下。
解决思路：规定我们每行要显示的字数多少，然后根据字符串的长度截取对应的长度。由于涉及到中午因为占用的字符数不一致所以建议都转为字节长度，方法如下。
getTrueLength:function(str){//获取字符串的真实长度（字节长度）
var len = str.length, truelen = 0;
for(var x = 0; x < len; x++){
if(str.charCodeAt(x) > 128){
truelen += 2;
}else{
truelen += 1;
}
}
return truelen;
},
cutString:function(str, leng){//按字节长度截取字符串，返回substr截取位置
var len = str.length, tlen = len, nlen = 0;
for(var x = 0; x < len; x++){
if(str.charCodeAt(x) > 128){
if(nlen + 2 < leng){
nlen += 2;
}else{
tlen = x;
break;
}
}else{
if(nlen + 1 < leng){
nlen += 1;
}else{
tlen = x;
break;
}
}
}
return tlen;
}4，最后把canvas转为图片，需要注意的是必须等所有图片都载入完成才能进行图片的生成，要不然会造成生成的图片不全。文字载入可以不考虑。
imgAllLoad:function(nexi){
var length=this.domArray.length;
if(nexi>=length){
var dataURL = canvas.toDataURL();
$(".shareImg img").attr("src",dataURL);//canvas转为图片
}
}总结：
1，获取图片和文字位置，通过canvas的ctx.drawImage(IMG,left,top,width,height)绘制图片，通过.ctx.fillText(text, left,top)绘制文字，通过canvas.toDataURL();生成图片。
2，需要注意为了生成图片不失真，canvas大小是2倍，图片文字都是2倍。
3，为了文字换行， getTrueLength
4，必须等到图片都绘制完成，再生成图片，这个很重要。
方法二：html2canvas
这个就不介绍了，点击官网可以进去自己按照步骤来。
用这个方法也是会存在图片不清晰的情况，也是需要用2倍的。
特别注意：生成的base64生成的图片，如果在微信里是含有二维码的，长嗯识别在安卓微信里会造成微信卡死。
解决办法是把base64的图片数据传到后台通过后台生成图片，把图片地址返回回来，这是我目前想到的，如果大家有更好的可以交流