Erstellen Sie eine Leinwand mit HTML, um Bilder zu generieren

In diesem Artikel wird hauptsächlich erläutert, wie man mit HTML eine Leinwand erstellt, um Bilder zu generieren. Ich hoffe, dass er für alle hilfreich ist.

1. Erstellen Sie eine neue Leinwand-Leinwand

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

rree

2. Laden Sie das Dom-Element des zu generierenden Bildes in die Leinwand um das Bild zu generieren. Derzeit bestehen DOM-Elemente im Wesentlichen aus Bildern und Text. Einige Effekte und dergleichen sind nicht zum Generieren von Bildern geeignet.

a, Holen Sie sich das Bild, 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, Holen Sie sich die

---

Größe

jedes Bildelements auf der Seite und den Abstand , und dann an die entsprechende Position auf der Leinwand zeichnen Auch hier werden Bildgröße und Abstand verdoppelt, da das erzeugte Bild nicht klar ist.

 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. Das Laden des Dom-Elements

des zu generierenden

---

-Textes in die Leinwand ähnelt dem Einfügen eines Bildes in die Leinwand Sie müssen es zuerst abrufen. Das Textelement bestimmt die Position des Textes oben, unten, links und rechts auf der Webseite und fügt ihn dann in die entsprechende Leinwand ein.

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, holen Sie sich den Abstand jedes Textelements von der Webseite, ebenso muss die Distanzlänge 2-mal sein, fügen Sie den Text hinzu auf die Leinwand

 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,

Text wird automatisch umbrochen, wenn er auf die Leinwand gezeichnet wird.

. 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.

Lösung: Geben Sie die Anzahl der Wörter an, die in jeder Zeile angezeigt werden sollen, und fangen Sie dann die entsprechende Länge entsprechend der Länge der Zeichenfolge ab. Da die Anzahl der belegten Zeichen mittags inkonsistent ist, wird empfohlen, sie in Bytelänge umzuwandeln. Die Methode ist wie folgt.

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

Zuletzt konvertieren Sie die Leinwand in ein Bild. Beachten Sie, dass Sie warten müssen, bis alle Bilder geladen sind, bevor Sie das Bild generieren, da das generierte Bild sonst unvollständig ist. 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. Ermitteln Sie die Bild- und Textposition und zeichnen Sie das Bild durch ctx.drawImage(IMG,left,top,width,height) der Leinwand. ctx. fillText(text, left,top) zeichnet Text und generiert 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 den Text zu umbrechen, getTrueLength

4 Sie müssen warten, bis die Bilder gezeichnet sind, bevor Sie die Bilder generieren.

Verwandte Empfehlungen:


So verwenden Sie das img-Tag von HTML-Bildern

Studiennotizen zu HTML-Bildern und Hyperlinks

Lösung für den hässlichen blauen Rand, der durch Hinzufügen eines Hyperlinks zum HTML-Bildbild entsteht

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Leinwand mit HTML, um Bilder zu generieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!