미니 프로그램 내 사진 저장 및 친구들과 공유 기능 구현

이번에는 미니 프로그램의 사진 저장 및 모멘트 공유 기능 구현에 대해 알려드리겠습니다. 미니 프로그램의 사진 저장 및 모멘트 공유 기능 구현 시 주의사항은 무엇인가요? 봐.

설명

먼저 미니 프로그램 내에서는 모멘트에 직접 공유하는 것이 불가능합니다. 따라서 우리는 사진을 생성하고, 미니 프로그램의 QR 코드를 휴대하고, 휴대폰 앨범에 저장하고, 사용자가 선택하여 친구들에게 보낼 수 있도록 할 수 있습니다. 그러면 미니프로그램에 있는 QR코드를 인식하여 미니프로그램의 지정된 페이지로 들어갈 수 있습니다. 시중에서 공유를 지원하는 애플리케이션을 살펴보면 기본적으로 이런 방식으로 구현되어 있습니다.

준비 단계

1. 서버를 통해 미니 프로그램 코드를 얻습니다

여기에서 WeChat의 공식 문서를 참조하고 배경에 대한 매개변수, 경로 및 기타 정보를 지정하여 배경이 생성될 수 있도록 합니다. 지정된 미니 프로그램 코드. 그런 다음 wx.getImageInfo를 호출하여 백그라운드에서 생성된 작은 프로그램 코드를 저장합니다.

미니 프로그램 코드를 생성하는 공식 서버가 없으면 WeChat 문서를 주의 깊게 읽어야 합니다. 이는 디버깅에도 매우 짜증나고 불편합니다.

wx.getImageInfo({            
  src:'https://xxx.jpg',//服务器返回的带参数的小程序码地址
  success: function (res) {
    //res.path是网络图片的本地地址
    qrCodePath = res.path;
  },
  fail: function (res) {
    //失败回调
  }
});

1. 캔버스를 통해 필요한 정보를 그립니다

모든 그림을 준비한 후 캔버스를 통해 그린 다음 캔버스를 그림으로 내보낼 수 있습니다. 그리기에 관해서는 WeChat의 Canvas API를 참고할 수 있습니다. 다음은 기본적으로 API 메소드를 기반으로 합니다.

몇가지 주의사항이 있습니다.

1. 그려지는 텍스트의 길이를 모르기 때문에 텍스트를 언제 줄바꿈해야 할지 알 수 없습니다. 따라서 상품 제목의 경우 여러 줄의 데이터가 한 줄에 18자로 고정될 수 있습니다.

2. 공식 API에 따르면 draw() 완료 콜백에서 실행되어야 하는데,

canvasCtx.draw(false,function(res){
});

이 메소드를 통해서는 콜백이 완료되지 않습니다. 무엇이 잘못되었는지 모르겠습니다. 그래서 결국 사진을 저장하기 위해 지연을 추가해야 했습니다.

/**
 * 绘制分享的图片
 * @param goodsPicPath 商品图片的本地链接
 * @param qrCodePath 二维码的本地链接
 */
drawSharePic: function (goodsPicPath, qrCodePath) {
  wx.showLoading({
    title: '正在生成图片...',
    mask: true,
  });
  //y方向的偏移量，因为是从上往下绘制的，所以y一直向下偏移，不断增大。
  let yOffset = 20;
  const goodsTitle = this.data.orderDetail.paltProduct.name1;
  let goodsTitleArray = [];
  //为了防止标题过长，分割字符串,每行18个
  for (let i = 0; i < goodsTitle.length / 18; i++) {
    if (i > 2) {
      break;
    }
    goodsTitleArray.push(goodsTitle.substr(i * 18, 18));
  }
  const price = this.data.orderDetail.price;
  const marketPrice = this.data.orderDetail.marketPrice;
  const title1 = '您的好友邀请您一起分享精品好货';
  const title2 = '立即打开看看吧';
  const codeText = '长按识别小程序码查看详情';
  const imgWidth = 780;
  const imgHeight = 1600;
  const canvasCtx = wx.createCanvasContext('shareCanvas');
  //绘制背景
  canvasCtx.setFillStyle('white');
  canvasCtx.fillRect(0, 0, 390, 800);
  //绘制分享的标题文字
  canvasCtx.setFontSize(24);
  canvasCtx.setFillStyle('#333333');
  canvasCtx.setTextAlign('center');
  canvasCtx.fillText(title1, 195, 40);
  //绘制分享的第二行标题文字
  canvasCtx.fillText(title2, 195, 70);
  //绘制商品图片
  canvasCtx.drawImage(goodPicPath, 0, 90, 390, 390);
  //绘制商品标题
  yOffset = 490;
  goodsTitleArray.forEach(function (value) {
    canvasCtx.setFontSize(20);
    canvasCtx.setFillStyle('#333333');
    canvasCtx.setTextAlign('left');
    canvasCtx.fillText(value, 20, yOffset);
    yOffset += 25;
  });
  //绘制价格
  yOffset += 8;
  canvasCtx.setFontSize(20);
  canvasCtx.setFillStyle('#f9555c');
  canvasCtx.setTextAlign('left');
  canvasCtx.fillText('￥', 20, yOffset);
  canvasCtx.setFontSize(30);
  canvasCtx.setFillStyle('#f9555c');
  canvasCtx.setTextAlign('left');
  canvasCtx.fillText(price, 40, yOffset);
  //绘制原价
  const xOffset = (price.length / 2 + 1) * 24 + 50;
  canvasCtx.setFontSize(20);
  canvasCtx.setFillStyle('#999999');
  canvasCtx.setTextAlign('left');
  canvasCtx.fillText('原价:¥' + marketPrice, xOffset, yOffset);
  //绘制原价的删除线
  canvasCtx.setLineWidth(1);
  canvasCtx.moveTo(xOffset, yOffset - 6);
  canvasCtx.lineTo(xOffset + (3 + marketPrice.toString().length / 2) * 20, yOffset - 6);
  canvasCtx.setStrokeStyle('#999999');
  canvasCtx.stroke();
  //绘制最底部文字
  canvasCtx.setFontSize(18);
  canvasCtx.setFillStyle('#333333');
  canvasCtx.setTextAlign('center');
  canvasCtx.fillText(codeText, 195, 780);
  //绘制二维码
  canvasCtx.drawImage(qrCodePath, 95, 550, 200, 200);
  canvasCtx.draw();
  //绘制之后加一个延时去生成图片，如果直接生成可能没有绘制完成，导出图片会有问题。
  setTimeout(function () {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 390,
      height: 800,
      destWidth: 390,
      destHeight: 800,
      canvasId: 'shareCanvas',
      success: function (res) {
        that.setData({
          shareImage: res.tempFilePath,
          showSharePic: true
        })
        wx.hideLoading();
      },
      fail: function (res) {
        console.log(res)
        wx.hideLoading();
      }
    })
  }, 2000);
},

마지막으로 그려진 렌더링을 살펴보세요.

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

추천 도서:

프런트 엔드 방식을 사용하여 사진을 캐릭터 그림으로 변환

JS 배열 방식을 사용하는 단계에 대한 자세한 설명

위 내용은 미니 프로그램 내 사진 저장 및 친구들과 공유 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!