Comment convertir du HTML en images

Lorsque nous créons des pages h5 ou promouvons de petits programmes, en particulier dans WeChat, afin de permettre aux utilisateurs de mieux partager avec leurs amis, nous devons souvent générer une image à partir du code HTML généré dynamiquement, puis laisser l'utilisateur appuyer longuement sur enregistrez-le et envoyez-le à des amis ou à un cercle d'amis.

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.

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 de l'image sur la page, la distance depuis le haut, puis dessinez-le à la position correspondante sur le canevas

  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. Chargez l'élément DOM du texte à générer dans le canevas .

a, obtenez le requis Chargez l'élément de texte

 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 et obtenez la distance de chaque élément de texte à partir de la page Web De même, la longueur de la distance doit être doublée. sur la toile

 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 , le texte sera automatiquement renvoyé lorsqu'il sera dessiné sur la toile. . 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.

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 convient de noter que vous devez attendre que toutes les images soient chargées avant de pouvoir 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 via ctx.drawImage(IMG,left,top,width,height) de Canvas. dessinez des images, dessinez du texte via .ctx.fillText(text, left,top) et générez 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. Pour envelopper le texte, getTrueLength.
4. Vous devez attendre que les images soient dessinées avant de générer les images. C'est très important.

Recommandations associées :

html5 - Événement de clic sur l'image html introuvable

javascript - Zones chaudes de l'image html telles que les balises de carte adaptatives

Des questions sur les images html ?

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!