怎样将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+|\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.必需比及图片都绘制完成，再生成图片，这个很重要。
相关引荐：
html5 - html图片点击事件寻不到
javascript - html图片热区如自顺应 map标签
关于html图片的问题？
以上就是怎样将html转化为图片的具体内容，更多请关注百分百源码网其它相关文章！
