用html建立canvas畫布產生圖片

本篇文章主要介紹如何用html創建canvas畫布產生圖片，有興趣的朋友參考下，希望對大家有幫助。

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>

//设置canva画布大小，这里会把画布大小设置为2倍，为了解决生成图片不清晰的问题，需要注意接下来所有的函数都是在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中，

一般我們想產生圖片的時候，dom元素基本上是由圖片和文字組成，想一些效果之類的是不適合產生圖片的。
a， 取得要載入到canvas的圖片

r​​rreee

---

b，取得每個圖片元素的在頁面上大小，距離頂端地步距離，然後繪製到canvas對應的位置
這裡圖片大小和距離也是取得2倍，原因是解決產生的圖片不清晰。

---

 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(){
            //循环出所有图片元素，一个个图片添加
                that.addImgToCanvas(domArray[i],that.imgAllLoad);
            }())
        }
    },

3，將要產生的文字的dom元素載入canvas中，

同把圖片插入到canvas類似，首先需要取得文字元素，確定文字在網頁中上下左右的位置，之後插入到對應的canvas裡。

a， 取得要載入文字元素，

  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.onload=function(){           //把图片绘制到canvas上
              that.ctx.drawImage(obj[0],x,y,width,height);上
              that.loadImgNum++;              if(fn && typeof fn === "function")fn(that.loadImgNum);               /**位置1**/

          }
  },

b，取得每個文字元素距離網頁距離，同樣的，距離距離長度必須餵2倍，把文字加到canvas上

 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")
            })()
        }
    },

c，文字繪製到canvas時，自動換行。 。因為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);
        }
    },

4，最後把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;
        }

總結：

1，取得圖片和文字位置，透過canvas的ctx.drawImage(IMG,left,top,width,height)繪製圖片，透過.ctx. fillText(text, left,top)繪製文字，透過canvas.toDataURL();產生圖片。
2，要注意為了產生圖片不失真，canvas大小是2倍，圖片文字都是2倍。
3，為了文字換行， getTrueLength
4，必須等到圖片都繪製完成，再產生圖片，這個很重要。

相關推薦：

HTML圖片的img標籤如何使用

HTML圖片與超連結學習筆記

html圖片img加上超連結後產生難看的藍色邊框的解決方法

以上是用html建立canvas畫布產生圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！