1，在html里新建canvas画布

 

　　/**要生成图片的html*/<pclass="con_1">

 

　　<pclass="con_1_5">

 

　　<spanclass="title_des2">思路惊奇</span>

 

　　<spanclass="title_des3">思路惊奇</span>

 

　　</p>

 

　　<imgclass="con_1_1"src="style/ActiveCDN/bonus/page7_1.png"alt="">

 

　　<imgclass="con_1_2"src="style/ActiveCDN/bonus/page7_1.png"alt="">

 

　　</p>/*生成的canvas和最终生成的图片*/<pclass="shareImg">

 

　　<canvasid="canvas"width="750"height="1206"></canvas>

 

　　<imgsrc=""alt="">

 

　　</p>

 

　　//设置canva画布大小，这里会把画布大小设置为2倍，为了解决生成图片不清晰的问题，需要注意接下来所有的函数都是在html2canvas这个对象里定义的

 

　　varhtml2canvas={

 

　　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(){

 

　　varthat=this,domArray=this.domArray;for(vari=0,len=domArray.length;i<len;i++){

 

　　(function(){

 

　　//循环出所有图片元素，一个个图片添加

 

　　that.addImgToCanvas(domArray[i],that.imgAllLoad);

 

　　}())

 

　　}

 

　　},

 

　　b，获取每个图片元素的在页面上大小，距离顶部地步距离，然后绘制到canvas相应的位置

 

　　这里图片大小和距离也是取得2倍，原因是解决生成的图片不清晰。

 

　　addImgToCanvas:function(obj,fn){varwidth=obj.width()*2,//图片在网页宽度

 

　　height=obj.height()*2,//图片在网页高度

 

　　x=obj[0].x*2,//图片距离网页最顶部距离

 

　　y=obj[0].y*2,//图片距离网页最右边距离

 

　　img=newImage(),

 

　　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&&typeoffn==="function")fn(that.loadImgNum);/**位置1**/

 

　　}

 

　　},

 

　　3，将要生成的文字的dom元素载入canvas中，

 

　　同把图片插入到canvas类似，首先需要获取文字元素，确定文字在网页中上下左右的位置，之后插入到相应的canvas里。

 

　　a，获取要加载文字元素，

 

　　textObj:[$(".title_des2"),$(".title_des3")],

 

　　textArratLoad:function(){

 

　　varthat=this;for(varm=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

 

　　varwidth=obj.width()*2,

 

　　height=obj.height()*2,x=obj.offset().left*2,y=obj.offset().top*2;

 

　　varthat=this;

 

　　vartext=obj.html().replace(/^\s+|\s+$/,"");//去掉文字里的空格

 

　　that.ctx.fillStyle=color;//设置文字颜色

 

　　that.ctx.font=fontsize;//设置文字大小

 

　　that.ctx.textAlign="left";//设置文字对其方向

 

　　textBaseline="middle";

 

　　//因为canvas里的文字不会换行，所以我们需要想办法让长段文字换行

 

　　for(vari=1;that.getTrueLength(text)>0;i++){

 

　　vartl=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){//获取字符串的真实长度（字节长度）

 

　　varlen=str.length,truelen=0;for(varx=0;x<len;x++){if(str.charCodeAt(x)>128){

 

　　truelen+=2;

 

　　}else{

 

　　truelen+=1;

 

　　}

 

　　}returntruelen;

 

　　},

 

　　cutString:function(str,leng){//按字节长度截取字符串，返回substr截取位置

 

　　varlen=str.length,tlen=len,nlen=0;for(varx=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;

 

　　}

 

　　}

 

　　}returntlen;

 

　　}

 

　　4，最后把canvas转为图片，需要注意的是必须等所有图片都载入完成才能进行图片的生成，要不然会造成生成的图片不全。文字载入可以不考虑。

 

　　imgAllLoad:function(nexi){

 

　　varlength=this.domArray.length;if(nexi>=length){vardataURL=canvas.toDataURL();

 

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





本文转载自中文网