php将div转图片不显示,如何将html转化为图片

在我们做h5页面或者推广小程序的时候，特别是在微信里，为了让用户更好的分享给朋友，往往需要将动态生成的html生成一个图片，然后让用户长按保存发给朋友或者朋友圈。

1，在html里新建canvas画布/**要生成图片的html*/

思路惊奇

思路惊奇

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

(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.οnlοad=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

(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.必须等到图片都绘制完成，再生成图片，这个很重要。

相关推荐：