미니 프로그램을 사용하여 친구들을 위한 사진을 생성하는 방법-미니 프로그램 개발-php.cn

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

不言

풀어 주다： 2018-07-14 15:20:06

원래의

3241명이 탐색했습니다.

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

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

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

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

길게 눌러 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(&#39;myCanvas&#39;);    
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   : &#39;生成中...&#39;,
      icon    : &#39;loading&#39;,
      duration: 2000
    });
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: &#39;myCanvas&#39;,
        success : function (res) {          
        var tempFilePath = res.tempFilePath;
          _this.setData({
            imagePath   : tempFilePath,
          });     
          var img  = _this.data.imagePath;
          let urls = []
          urls.push(img, &#39;二维码路径&#39;)   //二维码路径是为了用户也可以保存二维码，分享到朋友圈有合成的图片也有二维码（参考拉钩小程序分享）
          wx.previewImage({
            current: img,  // 当前显示图片的http链接
            urls   : urls  // 需要预览的图片http链接列表          })
        },
        fail: function (res) {
          console.log(res);
        }
      });
    }, 2000);
  },

로그인 후 복사

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

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