Créer un canevas en utilisant HTML pour générer des images

Cet article explique principalement comment utiliser le HTML pour créer un canevas afin de générer des images. Les amis intéressés peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

1. Créez un nouveau canevas en 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>

//设置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. Chargez l'élément DOM de l'image à générer dans le canevas,

Général Lorsque nous voulons générer des images, les éléments DOM sont essentiellement composés d'images et de texte. Certains effets et autres ne sont pas adaptés à la génération d'images.

a, obtenez l'image à charger dans le canevas

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

---

b, obtenez la

taille de chaque élément d'image sur la page et la distance à partir du haut , puis dessinez-le à la position correspondante sur la toile
Ici, la taille et la distance de l'image sont également doublées, car l'image générée n'est pas claire.

---

  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**/

          }
  },

3. Charger l'élément dom

du texte à générer dans le canevas

est similaire à l'insertion d'une image dans le canevas. .Vous devez d'abord obtenir l'élément de texte, déterminer les positions supérieure, inférieure, gauche et droite du texte sur la page Web, puis l'insérer dans le canevas correspondant.

a, obtenez l'élément de texte à charger,

 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, obtenez la distance de chaque élément de texte à partir de la page Web, de même, la longueur de la distance doit être 2 fois, ajoutez le texte sur le canevas Sur

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

c, lorsque le texte

est dessiné sur le canevas, il s'enroulera automatiquement. . Parce que lorsque vous dessinez du texte sur une toile, vous ne pouvez définir la largeur et la distance maximales qu'en haut et à gauche. Nous devons donc nous en occuper nous-mêmes.

Solution : Préciser le nombre de mots que l'on souhaite afficher dans chaque ligne, puis intercepter la longueur correspondante en fonction de la longueur de la chaîne. Étant donné que le nombre de caractères occupés est incohérent à midi, il est recommandé de le convertir en longueur d'octets. La méthode est la suivante.

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

4. Enfin, convertissez la toile en image

Il est à noter que vous devez attendre que toutes les images soient chargées avant de générer l'image, sinon l'image générée sera incomplète. Le chargement du texte peut être ignoré.

   imgAllLoad:function(nexi){
      var length=this.domArray.length;     if(nexi>=length){         var dataURL = canvas.toDataURL();
         $(".shareImg img").attr("src",dataURL);//canvas转为图片
     }
 }

Résumé :

1. Obtenez la position de l'image et du texte, et dessinez l'image via ctx.drawImage(IMG,left,top,width,height) du canevas. ctx.fillText(text, left,top) dessine du texte et génère des images via canvas.toDataURL();.

2. Il convient de noter que afin de générer des images sans distorsion, la taille du canevas est 2 fois et le texte de l'image est 2 fois.
3. Afin d'envelopper le texte, getTrueLength
4. Vous devez attendre que les images soient dessinées avant de générer les images.

Recommandations associées :

Comment utiliser la balise img des images HTML

Notes d'étude sur les images et les hyperliens HTML

Solution à la vilaine bordure bleue produite en ajoutant un lien hypertexte vers l'image html img

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!