So konvertieren Sie HTML in Bilder

Wenn wir H5-Seiten erstellen oder kleine Programme bewerben, insbesondere in WeChat, müssen wir häufig ein Bild aus dem dynamisch generierten HTML generieren und den Benutzer dann gedrückt halten, damit Benutzer ihn besser mit Freunden teilen können Speichern und an Freunde oder Freundeskreis senden.

1. Erstellen Sie eine neue Leinwand in HTML

/**要生成图片的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>

rrree

2. Laden Sie das DOM-Element des zu generierenden Bildes in die Leinwand

a, rufen Sie das Bild ab, das in die Leinwand geladen werden soll

//设置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);
    }
}

b, ermitteln Sie die Größe jedes Bildelements auf der Seite, den Abstand vom oberen Rand und zeichnen Sie es dann an die entsprechende Position von die Leinwand

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. Laden Sie das DOM-Element des zu generierenden Textes in die Leinwand

a, Holen Sie sich das zu ladende Textelement

  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, ermitteln Sie den Abstand jedes Textelements von der Webseite. Ebenso muss die Abstandslänge das Zweifache betragen. Fügen Sie den Text zur Leinwand hinzu

 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. Wenn der Text auf die Leinwand gezeichnet wird, wird er automatisch umbrochen. . Denn beim Zeichnen von Text auf Leinwand können Sie nur die maximale Breite und den maximalen Abstand von oben und links festlegen. Wir müssen also selbst damit umgehen.

 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. Konvertieren Sie abschließend die Leinwand in ein Bild. Beachten Sie, dass Sie warten müssen, bis alle Bilder geladen sind, bevor das Bild generiert werden kann. Das Laden von Text kann ignoriert werden.

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;
        }

Zusammenfassung:

1. Holen Sie sich die Bild- und Textpositionen und zeichnen Sie sie durch ctx.drawImage(IMG,left,top,width,height) von Canvas Zeichnen Sie für Bilder Text über .ctx.fillText(text, left,top) und generieren Sie Bilder über canvas.toDataURL();.
2. Um Bilder ohne Verzerrung zu erzeugen, ist die Leinwandgröße doppelt so groß und der Bildtext doppelt so groß.
3. Um Text umzubrechen, getTrueLength.
4. Sie müssen warten, bis die Bilder gezeichnet sind, bevor Sie die Bilder erstellen.

Verwandte Empfehlungen:

html5 – HTML-Bild-Klickereignis nicht gefunden

Javascript – HTML-Bild heiße Bereiche wie adaptive Karten-Tags

Fragen zu HTML-Bildern?

Das obige ist der detaillierte Inhalt vonSo konvertieren Sie HTML in Bilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!