HTML을 사용하여 캔버스를 만들어 그림 생성

이 글은 주로 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 요소를 캔버스에 로드합니다.

일반적으로 이미지를 생성할 때 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, 페이지에 있는 각 이미지 요소의 크기 , 상단으로부터 거리 거리 를 가져온 다음 해당 위치에 그립니다. 캔버스
여기에 이미지 크기와 거리가 있습니다. 생성된 이미지가 선명하지 않기 때문에 2번도 달성됩니다.

---

  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. 그림을 생성하기 전에 그림이 그려질 때까지 기다려야 합니다.

관련 권장 사항:

HTML 이미지의 img 태그를 사용하는 방법

HTML 이미지 및 하이퍼링크에 대한 학습 노트

html 이미지의 img에 하이퍼링크를 추가하여 생성되는 보기 흉한 파란색 테두리에 대한 솔루션

위 내용은 HTML을 사용하여 캔버스를 만들어 그림 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!