怎么將html轉(zhuǎn)化為圖片

這篇文章將為大家詳細(xì)講解有關(guān)怎么將html轉(zhuǎn)化為圖片，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司從2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站制作、成都做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元濉溪做網(wǎng)站,已為上家服務(wù),為濉溪各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

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>
//設(shè)置canva畫布大小，這里會把畫布大小設(shè)置為2倍，為了解決生成圖片不清晰的問題，需要注意接下來所有的函數(shù)都是在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(){
            //循環(huán)出所有圖片元素，一個個圖片添加
                that.addImgToCanvas(domArray[i],that.imgAllLoad);
            }())
        }
    },

b，獲取每個圖片元素的在頁面上大小，距離頂部地步距離，然后繪制到canvas相應(yīng)的位置

  addImgToCanvas:function(obj,fn){      var width=obj.width()*2,//圖片在網(wǎng)頁寬度
          height=obj.height()*2,//圖片在網(wǎng)頁高度
          x=obj[0].x*2,//圖片距離網(wǎng)頁最頂部距離
          y=obj[0].y*2,//圖片距離網(wǎng)頁最右邊距離
          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，獲取每個文字元素距離網(wǎ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è)置文字對其方向
          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繪制文字的時候只能設(shè)置最大寬度和距離頂部左邊距離。所以我們需要自行處理下。

getTrueLength:function(str){//獲取字符串的真實長度（字節(jié)長度）
            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é)長度截取字符串，返回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)行圖片的生成，要不然會造成生成的圖片不全。文字載入可以不考慮。

   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.獲取圖片和文字位置，通過canvas的ctx.drawImage(IMG,left,top,width,height)繪制圖片，通過.ctx.fillText(text, left,top)繪制文字，通過canvas.toDataURL();生成圖片。
2.需要注意為了生成圖片不失真，canvas大小是2倍，圖片文字都是2倍。
3.為了文字換行， getTrueLength 。
4.必須等到圖片都繪制完成，再生成圖片，這個很重要。

關(guān)于怎么將html轉(zhuǎn)化為圖片就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

分享標(biāo)題：怎么將html轉(zhuǎn)化為圖片
網(wǎng)站路徑：http://bm7419.com/article6/jdedog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、軟件開發(fā)、虛擬主機(jī)、建站公司、域名注冊、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計公司