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.
/**要生成图片的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);
}
} jedes Bildelements auf der Seite und den Abstand < 🎜 von oben >, 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);
}())
}
},
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**/
}
}, 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")
})()
}
},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);
}
}, 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;
}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!
