這篇文章主要介紹如何使用html創(chuàng)建canvas畫(huà)布生成圖片，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信平臺(tái)小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶(hù)創(chuàng)新互聯(lián)還提供了新吳免費(fèi)建站歡迎大家使用！

1，在html里新建canvas畫(huà)布

/**要生成圖片的html*/
    
        思路驚奇
        思路驚奇
    

    
    
/*生成的canvas和最終生成的圖片*/
    
    

//設(shè)置canva畫(huà)布大小，這里會(huì)把畫(huà)布大小設(shè)置為2倍，為了解決生成圖片不清晰的問(wèn)題，需要注意接下來(lái)所有的函數(shù)都是在html2canvas這個(gè)對(duì)象里定義的
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中，

一般我們想生成圖片的時(shí)候，dom元素基本上由圖片和文字組成，想一些效果之類(lèi)的是不適合生成圖片的。
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
b，獲取每個(gè)圖片元素的在頁(yè)面上大小，距離頂部地步距離，然后繪制到canvas相應(yīng)的位置
這里圖片大小和距離也是取得2倍，原因是解決生成的圖片不清晰。
  addImgToCanvas:function(obj,fn){      var width=obj.width()*2,//圖片在網(wǎng)頁(yè)寬度
          height=obj.height()*2,//圖片在網(wǎng)頁(yè)高度
          x=obj[0].x*2,//圖片距離網(wǎng)頁(yè)最頂部距離
          y=obj[0].y*2,//圖片距離網(wǎng)頁(yè)最右邊距離
          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類(lèi)似，首先需要獲取文字元素，確定文字在網(wǎng)頁(yè)中上下左右的位置，之后插入到相應(yīng)的canvas里。
a， 獲取要加載文字元素，
 textObj:[$(".title_des2"),$(".title_des3")],
 textArratLoad:function(){
        var that=this;        for(var m=0,len=that.textObj.length;m
b，獲取每個(gè)文字元素距離網(wǎng)頁(yè)距離，同樣的，距離距離長(zhǎng)度必須喂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; //設(shè)置文字顏色
          that.ctx.font = fontsize;//設(shè)置文字大小
          that.ctx.textAlign="left";//設(shè)置文字對(duì)其方向
          textBaseline = "middle";
          //因?yàn)閏anvas里的文字不會(huì)換行，所以我們需要想辦法讓長(zhǎng)段文字換行
        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時(shí)，自動(dòng)換行。。因?yàn)閏anvas繪制文字的時(shí)候只能設(shè)置最大寬度和距離頂部左邊距離。所以我們需要自行處理下。
解決思路：規(guī)定我們每行要顯示的字?jǐn)?shù)多少，然后根據(jù)字符串的長(zhǎng)度截取對(duì)應(yīng)的長(zhǎng)度。由于涉及到中午因?yàn)檎加玫淖址麛?shù)不一致所以建議都轉(zhuǎn)為字節(jié)長(zhǎng)度，方法如下。
 getTrueLength:function(str){//獲取字符串的真實(shí)長(zhǎng)度（字節(jié)長(zhǎng)度）
            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){//按字節(jié)長(zhǎng)度截取字符串，返回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轉(zhuǎn)為圖片，需要注意的是必須等所有圖片都載入完成才能進(jìn)行圖片的生成，要不然會(huì)造成生成的圖片不全。文字載入可以不考慮。
   imgAllLoad:function(nexi){
      var length=this.domArray.length;     if(nexi>=length){         var dataURL = canvas.toDataURL();
         $(".shareImg img").attr("src",dataURL);//canvas轉(zhuǎn)為圖片
     }
 }
總結(jié)：
1，獲取圖片和文字位置，通過(guò)canvas的ctx.drawImage(IMG,left,top,width,height)繪制圖片，通過(guò).ctx.fillText(text, left,top)繪制文字，通過(guò)canvas.toDataURL();生成圖片。
2，需要注意為了生成圖片不失真，canvas大小是2倍，圖片文字都是2倍。
3，為了文字換行， getTrueLength
4，必須等到圖片都繪制完成，再生成圖片，這個(gè)很重要。
以上是“如何使用html創(chuàng)建canvas畫(huà)布生成圖片”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
            
            
                        

            分享標(biāo)題：如何使用html創(chuàng)建canvas畫(huà)布生成圖片            

            網(wǎng)站URL：http://weahome.cn/article/pohdsc.html