用html创建canvas画布生成图片(2)-木庄网络博客

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