미니 프로그램을 사용하여 친구들을 위한 사진을 생성하는 방법

이 글은 주로 미니 프로그램을 통해 친구 서클에서 사진을 생성하는 방법을 소개합니다. 이제 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있습니다.

WeChat의 미니 프로그램은 공유되지 않습니다. 친구의 서클. 미니 프로그램은 현재 그룹과 공유하거나 친구에게만 보낼 수 있습니다. 하지만 사업은 쉽게 홍보되고 친구들과 공유될 수 있어야 합니다.

조사 끝에 다음과 같은 아이디어가 떠올랐습니다. 미니 프로그램 캔버스를 사용하여 그림을 그리고 배경 이미지와 QR 코드를 하나의 그림으로 그리는 것입니다. 바이두에서 여러 좋은 데모를 참고해서 이 문제를 해결하기 쉬울 줄 알았는데, 미니 프로그램 캔버스의 어려움은 이게 아닙니다! bintap='createSharePic'> 친구들의 서클에 공유 사진을 생성하세요65281c5ac262bf6d81768915a4a77ac0

캔버스를 실행하는 버튼입니다

길게 눌러 QR 코드를 식별하세요

  <view class=&#39;canvas-box&#39;>
    <canvas style="width:750rpx; height:940rpx;" canvas-id="myCanvas"/>
    <image src=&#39;{{imagePath}}&#39;></image>  
  </view>

그리기 a picture

  settext: function (context) {
    let _this = this;    
    var size  = _this.setCanvasSize();    
    var text  = "长按识别小程序";
    context.setFontSize(12);
    context.setTextAlign("center");
    context.setFillStyle("#000");
    context.fillText(text, size.w / 2, size.h * 0.90);
    context.stroke();
  },

원래는 네트워크 그림을 직접 그렸는데, 실제 머신에서는 네트워크 그림이 나오지 않더라구요! 그래서 Baidu가 살펴보니 먼저 다운로드한 다음 인터페이스에서 반환된 그림을 그릴 수 있습니다

createNewImg: function () {    
var _this       = this;    
var size        = _this.setCanvasSize();    
var context     = wx.createCanvasContext('myCanvas');    
var path        = "/assets/images/qrshare1.jpg";  //测试的图片    
var imageQrCode = _this.data.filePath;　　　　　　　//二维码
    context.drawImage(path, 0, 0, size.w, size.h);
    context.drawImage(imageQrCode, size.w / 2 - 55, size.h * 0.55, size.w * 0.33, size.w * 0.33);    
    this.settext(context);    //绘制图片    
    context.draw();    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时    
    wx.showToast({
      title   : '生成中...',
      icon    : 'loading',
      duration: 2000
    });
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success : function (res) {          
        var tempFilePath = res.tempFilePath;
          _this.setData({
            imagePath   : tempFilePath,
          });     
          var img  = _this.data.imagePath;
          let urls = []
          urls.push(img, '二维码路径')   //二维码路径是为了用户也可以保存二维码，分享到朋友圈有合成的图片也有二维码（参考拉钩小程序分享）
          wx.previewImage({
            current: img,  // 当前显示图片的http链接
            urls   : urls  // 需要预览的图片http链接列表          })
        },
        fail: function (res) {
          console.log(res);
        }
      });
    }, 2000);
  },

문제가 나왔습니다. 로컬 테스트와 원격 디버깅에는 문제가 없습니다. 휴대폰에 저장

한참 고민하다가 백그라운드에서 다운로드 도메인 이름을 추가하지 않은 것을 발견했습니다. 왜냐하면 일반적으로 로컬 체크박스는 도메인 이름을 확인하지 않기 위해 체크되어 있기 때문입니다. 그래서 예전부터 궁금했어요! ! ! ! ! ! !

요약:

미니 프로그램 캔버스는 제어하기 어렵습니다. 스타일을 작성할 때는 rpx를 사용하고 캔버스에는 px를 사용하세요.

네트워크 사진이 표시되지 않습니다. (네트워크 사진을 사용할 때 표시되지 않습니다.) . 이 문제는 제 작동 문제인지 미니 프로그램의 한계인지 잘 모르겠습니다. 확실한 결론을 내리시기 바랍니다.

위챗 배경에서 다운로드 도메인 이름을 설정해야 합니다. 그리는 방법은 여기서 다운받아서 사용했는데, 혹시 다운받는 방법 좀 알려주세요! 감사합니다)

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 콘텐츠를 보려면 PHP 중국어 웹사이트를 주목하세요! 관련 권장 사항:

애플릿은 보기 내부 구성 요소를 사용하여 페이지 레이아웃 기능을 수행하는 것과 같습니다

항목의 클릭 이벤트를 바인딩하기 위해 for 루프를 사용하는 애플릿 구현

위 내용은 미니 프로그램을 사용하여 친구들을 위한 사진을 생성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!