HTML을 이미지로 변환하는 방법

h5 페이지를 만들거나 특히 WeChat에서 작은 프로그램을 홍보할 때 사용자가 친구들과 더 잘 공유할 수 있도록 하기 위해 종종 동적으로 생성된 HTML에서 그림을 생성한 다음 사용자가 길게 눌러 저장하고 친구나 친구들에게 보내세요.

1, 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에서 새 캔버스를 만들고, 생성할 이미지의 dom 요소를 캔버스

a에 로드하고, 이미지를 캔버스

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에 로드합니다. 각 이미지를 가져옵니다. 페이지 요소의 크기, 상단으로부터의 거리, 캔버스의 해당 위치에 그려집니다.

  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. 생성할 텍스트의 dom 요소를 로드합니다. 캔버스

a, 로드할 텍스트 요소 가져오기

 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, 웹 페이지에서 각 텍스트 요소의 거리 가져오기 마찬가지로 거리 길이는 2배여야 합니다. 텍스트를 캔버스에 추가하세요

 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, 텍스트가 캔버스에 그려지면 자동으로 줄바꿈됩니다. . 왜냐하면 캔버스에 텍스트를 그릴 때 최대 너비와 위쪽 및 왼쪽으로부터의 거리만 설정할 수 있기 때문입니다. 그러니 우리가 직접 처리해야 합니다.

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. 마지막으로 캔버스를 그림으로 변환합니다. 그림이 생성되기 전에 모든 그림이 로드될 때까지 기다려야 합니다. 그렇지 않으면 생성된 그림이 불완전해집니다. 텍스트 로딩은 무시될 수 있습니다.

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

요약:

1. 이미지와 텍스트 위치를 가져와 캔버스의 ctx.drawImage(IMG,left,top,width,height)를 통해 이미지를 그린 다음 .ctx.fillText(text, left)를 사용합니다. ,top) canvas.toDataURL();을 통해 텍스트를 그리고 이미지를 생성합니다.
2. 왜곡 없이 이미지를 생성하려면 캔버스 크기가 2배, 이미지 텍스트가 2배라는 점에 유의하세요.
3 텍스트를 줄바꿈하려면 getTrueLength를 사용하세요.
4. 그림을 생성하기 전에 그림이 그려질 때까지 기다려야 합니다.

관련 추천:

html5 - html 이미지 클릭 이벤트를 찾을 수 없습니다

javascript - 적응형 지도 태그와 같은 html 이미지 핫 영역

html 이미지에 대해 질문이 있으신가요?

위 내용은 HTML을 이미지로 변환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!