Node.js와 캔버스는 사진을 합성하여 WeChat 공개 계정 포스터를 만듭니다.

이번에는 js와 캔버스 사진을 합성하여 WeChat 공개 계정 포스터를 만드는 기능을 알려드리겠습니다. js와 캔버스 사진을 합성하여 WeChat 공개 계정 포스터를 만들 때 사용할 수 있는 주의사항은 무엇인가요? 실제 사례를 한 번 살펴보겠습니다.

WeChat 공개 계정을 개발할 때 자신만의 QR 코드 포스터를 생성하거나 공유 포스터를 생성하기 위해 사진, 아바타, 닉네임 또는 기타 데이터를 추가해야 하는 경우가 종종 있습니다.

이 요구 사항에 대해 PHP의 gd 라이브러리는 다음을 실현할 수 있습니다. , 하지만 이미지 합성을 위해 서버를 사용하면 서버 리소스가 많이 소모됩니다

그러므로 다음과 같은 방법으로 구현하는 것을 고려해 볼 수 있습니다

One: JS Canvas 이미지 합성 방법

 $(function () {
        draw(function () {//生成之后的回调
            $('#img')[0].innerHTML='<img  src="/static/imghwm/default1.png" data-src="'+base64[0]+'" class="lazy" alt="Node.js와 캔버스는 사진을 합성하여 WeChat 공개 계정 포스터를 만듭니다." >';//将base生成图片
        });
    });
    var data=[图片1地址,图片2地址,图片3地址];
    base64=[];//用于保存生成之后的base64
    function draw(fn) {
        var img1= new Image;
        img1.src = data[0];
        img1.onload = function () {//这步必须,因为图片加载是异步的,必须等图片加载完成才开始下面的这些步骤
            var c = document.createElement('canvas'),
                    ctx = c.getContext('2d');
                        c.width = img1.naturalWidth;
                        c.height = img1.naturalHeight;
                        ctx.rect(0, 0, c.width, c.height);
                        ctx.fillStyle = '#fff';
                        ctx.fill();
            //生成一张图片1的底图
                         
            /*下面是为底图增加上文字*/
            ctx.drawImage(img1, 0, 0, c.width, c.height);(绘制图片资源,x坐标,y坐标,宽,高)
            //设置字体样式
            ctx.font = "24px Courier New";
            //设置字体填充颜色
            ctx.fillStyle = "write";
            //从坐标点(92,800)开始绘制文字
            ctx.fillText("这是文字内容", 92, 800);
            /*上面是增加文字,可以无限加*/
             
             
            var img2= new Image;
            img2.src = data[1];
            img2.onload = function () {//同理,如果是加载图片的话,需要等图片加载出来再下一步,所以要加onload
                ctx.drawImage(img2, 245, 660, 150, 150);(绘制图片资源,x坐标,y坐标,宽,高)
                    base64.push(c.toDataURL("image/jpeg", 1));//如果绘制完成了,就把base64数据填进数组,然后回调,没完成则继续这步
                fn();//回调
            };
        };
    }
 ///如果是坐标相同,或者觉得代码这样不美观的,可以使用递归方法实现onload的步骤,例如:
 
    function draw(fn) {
             
         a(0);
          
         fn();
    }
  
 function a(i){ 
       if (i == 0) {
         var img1= new Image;
        img1.src = data[0];
        img1.onload = function () {
            var c = document.createElement('canvas'),
            ctx = c.getContext('2d');
                        c.width = img1.naturalWidth;
                        c.height = img1.naturalHeight;
                        ctx.rect(0, 0, c.width, c.height);
                        ctx.fillStyle = '#fff';
                        ctx.fill();
            //生成一张图片1的底图
                         
            /*下面是为底图增加上文字*/
            ctx.drawImage(img1, 0, 0, c.width, c.height);(绘制图片资源,x坐标,y坐标,宽,高)
            //设置字体样式
            ctx.font = "24px Courier New";
            //设置字体填充颜色
            ctx.fillStyle = "write";
            //从坐标点(92,800)开始绘制文字
            ctx.fillText("这是文字内容", 92, 800);
            /*上面是增加文字,可以无限加*/
            a(1);//到第2个步骤
        }
        } else if (i == 1) {
           var img2= new Image;
            img2.src = data[1];
            img2.onload = function () {//同理,如果是加载图片的话,需要等图片加载出来再下一步,所以要加onload
                ctx.drawImage(img2, 245, 660, 150, 150);(绘制图片资源,x坐标,y坐标,宽,高)
                    base64.push(c.toDataURL("image/jpeg", 1));//如果绘制完成了,就把base64数据填进数组,然后回调,没完成则a(2)到第三步;
                return;
            };
        } 
   }

둘: html2canvas를 사용하여 웹 페이지를 이미지로 저장합니다. / html2canvas.js를 소개해야 합니다

<div>
    <img  class="qrbg lazy" src="/static/imghwm/default1.png" data-src="图片1" alt="Node.js와 캔버스는 사진을 합성하여 WeChat 공개 계정 포스터를 만듭니다." >
    <img  class="qrcode lazy" src="/static/imghwm/default1.png" data-src="图片2" alt="Node.js와 캔버스는 사진을 합성하여 WeChat 공개 계정 포스터를 만듭니다." >
    <span><img  class="touxiang lazy" src="/static/imghwm/default1.png" data-src="图片3" alt="Node.js와 캔버스는 사진을 합성하여 WeChat 공개 계정 포스터를 만듭니다." >文字</span>
    <div></div>
</div>
//使用css进行网页布局

$(window).load(function(){
    var shareContent = $(".qrbg")[0]; 
    var width = shareContent.offsetWidth; 
    var height = shareContent.offsetHeight;
    $(".qrcodepic").height(height);
    var canvas = document.createElement("canvas"); 
    var scale = 2; 
    canvas.width = width * scale; 
    canvas.height = height * scale; 
    canvas.getContext("2d").scale(scale, scale); 
    var rect = shareContent.getBoundingClientRect();
    canvas.getContext("2d").translate(-rect.left,-rect.top);
    var opts = {
        scale: scale, 
        canvas: canvas, 
        width: width, 
        height: height,
        useCORS:true
    };
    html2canvas($(".qrcodepic"), opts).then(function (canvas) {
        dataURL =canvas.toDataURL("image/png");
        $(".qrcodemain").html("<img  src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/857/211/485/1521163699667209.png?x-oss-process=image/resize,p_40" class="lazy" alt="Node.js와 캔버스는 사진을 합성하여 WeChat 공개 계정 포스터를 만듭니다." >");
    });
});

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JQ를 사용하여 웹 페이지를 마우스 오른쪽 버튼으로 클릭하여 북마크하는 방법

jQuery가 마스터해야 하는 API

진행률 표시줄 애니메이션으로 파일 업로드를 구현하는 방법

이후 jQuery는 다중 계층 검증을 구현합니다. 양식 검증

위 내용은 Node.js와 캔버스는 사진을 합성하여 WeChat 공개 계정 포스터를 만듭니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!