nodejs+小程序 请求微信生成 商品+二维码图片

最近遇见一个很常见的需求就是在分享的时候，将后端返回的二维码加上商品图片生成一个用于分享的图片

 

使用微信小程序的vances去话的，废话不多说了直接上代码：

在onload当中 先将我们的到的商品图片转化 

export default class GoodsDetail extends wepy.page {
//先声明需要的一些变量：
data = {
 
      goods: {},
      goodsId: null,
      qrc: null,
      qrcode: null,
      width: 0,
      height: 0,
      imgsrcima: null,
      srcima: null,
      chooseSize: false,
      fillText: '您的好友',
      src: null,
      drawimg:'/images/cv-botomm.png',
    };


async onLoad(options) {
   
//请求后端获得商品的基本信息
      let params = {
        id: goodsId
      };
      let goodsDetail = await request('/goods', {
        data: params
      });

//将获得的商品信息赋值给你声明的变量
      this.goods = goodsDetail;
//亲求后端获得相应的二维码
      let params1 = {
        scene: this.goods.id,
        path: 'pages/goods-detail'
      };
//将得到的二维码赋值给你声明的对象
      this.qrc = await request('/goodsDetail/qrcode', { data: params1 ,method:'POST'});
  
      console.log(this.qrc);
      //获取系统信息
      let res = wepy.getStorageSync(SYSTEM_INFO);
      this.width = res.windowWidth;
      this.height = res.windowHeight;
      this.$apply();
//在这里我们先将的到的商品图片的网络地址进行转化，转化到本地，这样才能将其画出来显在手机上
//有个坑就是，只能画转换未本地的图片
      this.clipImg(this.goods.imgs[0].thumb, this);
    }
//下面是一个具体转化的方法：
//当然还得注意一个问题，就是再success回调方式的写法当中 是无法得到你当前页面的this的所以要将其
//再方法之间进行传递
 clipImg(imgsrc, aaa) {
      console.log('on clipimg:' + imgsrc);
      let that = aaa;
//将商品的图片链接进行转化，得到相应的图片信息
      wx.getImageInfo({
        src: imgsrc,
        success: function(res) {
  
          // console.log(res);
//给src赋值
          let src = res.path;
          that.src = res.path;
//创建canvas，
//下面是关于创建canvas的一些介绍，详细了解去看官网
//CanvasContext wx.createCanvasContext(string canvasId, Object this)
//创建 canvas 的绘图上下文 CanvasContext 对象

//参数
///string canvasId
//要获取上下文的 <canvas> 组件 canvas-id 属性

//Object this
//在自定义组件下，当前组件实例的this，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/> ，
//如果省略则不在任何自定义组件内查找
          var cxt = wx.createCanvasContext('canvas');
//下面是一些具体的计算
          var bili = res.width / that.width;
          var a = res.width / res.height;
          console.log(bili);
          if (a >= 3 / 4) {
            //根据条件画值
            cxt.drawImage(that.src, 0, 0, that.width, res.height / bili);

//draw 方法
//定义
//将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
//参数
//1.reserve。本次绘制是否接着上一次绘制，即reserve参数为false，则在本次调用drawCanvas绘制之前native层应先清空画布再继续绘制；若reserver参数为true，则保留当前画布上的内容，本次调用drawCanvas绘制的内容覆盖在上面，默认 false	
//2.callback	Function	绘制完成后回调

            cxt.draw(false, function() {
              //以回调的方法
              //canvasToTempFilePath将当前 Canvas 保存为一个临时文件。
             //具体的参数可以去看官网：https://developers.weixin.qq.com/minigame/dev/api/Canvas.toTempFilePath.html?search-key=canvasToTempFilePath
              wx.canvasToTempFilePath({
                x: (res.width / 2 / bili) - (res.height / 8 * 3 / bili),
                y: 0,
                width: res.height / bili * 3 / 4,
                height: res.height / bili,
                destWidth: res.height * 3 / 4,
                destHeight: res.height,
                canvasId: 'canvas',
                quality: 1,
                success: function(res) {
                  console.log('if3');
    
                  let urls = [res.tempFilePath];
                  console.log('share urls');
                  console.log(urls);
                  //将得到的临时路径保存起来
                  that.imgsrcima = res.tempFilePath,
                    console.log('that.data.imgsrcima if');
                  console.log(that.imgsrcima);
                  that.$apply();
                },
                fail: function(err) {
                  console.log('faile');
                  console.error(err);
                }

              });
            });
          }
          else {
            cxt.drawImage(that.src, 0, 0, that.width, res.height / bili);
            cxt.draw(false, function() {
              wx.canvasToTempFilePath({
                x: 0,
                y: (res.height / 2 / bili) - (res.width / 3 * 2 / bili),
                width: res.width / bili,
                height: res.width / 3 * 4 / bili,
                destWidth: res.width,
                destHeight: res.width / 3 * 4,
                canvasId: 'canvas',
                quality: 1,
                success: function(res) {
                  let urls = [res.tempFilePath];
                  console.log('share urls');
                  console.log(urls);
                    that.imgsrcima= res.tempFilePath,
                  console.log('that.data.imgsrcima else');
                  console.log(that.imgsrcima);
                }
              });
            });


          }
        }
      });
    }

}

在点击分享之后 触发的方法当中我们再去话图片，下面是相应的方法：

 share() {
        console.log(this.qrc, 'share');
        this.methods.drawShare(this);
        this.setData({
          chooseSize: false
        });
      },
  drawShare(aaa) {
        let that = aaa;
//我们用当时获取的后台的二维码，换取本地资源
          wx.downloadFile({
          url: that.qrc,
          success: (res) => {
            // console.log('downloadFile', res);
            that.qrcode = res.tempFilePath;
            that.$apply();
            that.draw(that);
          },
          fail: (err) => {
            console.error(err);
          }
        });
        
      },

//最后就是我们真正要画的方法了
draw(aaa) {
      var that = aaa;
      var width = that.width;
      var height = that.height;
//初始化canvas
      var context = wx.createCanvasContext('identify');
 

      // 底部矩形，背景图
      context.setFillStyle('white');
//画一个矩形 ，将准备好的背景图填充进去
      context.fillRect(width / 7, width / 13, width * 5 / 7, width * 1.16);
      // context.drawImage(that.goods.imgs[0].thumb, width / 7, width * 24 / 13 * 3 / 4 / 24, width * 5 / 7, width);
      context.drawImage(that.drawimg, width / 7, width * 24 / 13 * 3 / 4 / 24, width * 5 / 7, width);
//再画一个矩形，将所得到的商品本地资源填充
      context.fillRect(width / 4, width * 3 / 15, width / 2, width / 32 * 21);
      console.log('draw imaga canves',that.imgsrcima)
      context.drawImage(that.imgsrcima, width / 4, width * 3 / 15, width / 2, width / 32 * 21);

      //文字
      context.setFontSize(width / 30);
      context.setTextAlign('center');
      context.fillText(that.fillText + that.user.nickName, width / 2, width / 8);
      context.fillText('分享了一个宝贝给您~', width / 2, width / 5.5);
      context.fillText(that.goods.name, width / 2, width / 1.1);
      context.setFontSize(width / 25);
      context.fillText('￥' + that.goods.price, width * 5 / 12, width / 1.04);
      context.setFontSize(width / 35);
      context.fillText('￥' + that.goods.oldPrice, width * 6.5 / 12, width / 1.04);
      context.fillRect(width * 6.3 / 12, width / 1.05, 20, 1);

            //详情，开始画底部的二维码
      context.drawImage(that.qrcode, width * 1.2 / 7, width * 1.01, width / 6, width / 6);
      console.log(that.imgsrcima,'drawImage=========',that.qrcode)
      context.setFontSize(width / 30);
      context.setFillStyle('#666666');
      context.setTextAlign('left');
      context.fillText('长按识别小程序和我联系吧~', width / 13 * 5, width * 1.1);
      context.setFontSize(width / 38);
      context.setFillStyle('#fc716a');
      context.fillText('IM二货兔-校内二手交易平台', width / 13 * 5, width * 1.15);
      // context.fillText('', width / 12 * 5, height / 1.3)
      //商品图片

      console.log('goods2');
      wx.showToast({
        title: '加载中',
        icon: 'loading'
      });
      context.draw(true,
        setTimeout(() => {
          console.log('goods3');
//同样将当前 Canvas 保存为一个临时文件。
          wx.canvasToTempFilePath({
            x: width / 7,
            y: width / 13,
            width: width * 5 / 7,
            height: width * 1.16,
            destWidth: width * 20 / 7,
            destHeight: width * 4.64,
            canvasId: 'identify',
            quality: 1,
            success: function(res) {
              let urls = [res.tempFilePath];
              console.log('share urls2');
              console.log(urls);
                that.srcima=res.tempFilePath
              console.log('srcima');
              console.log(that.srcima);
              wx.hideToast();
              wx.previewImage({
                urls: [that.srcima]// 需要预览的图片http链接列表,
              });
            }

          })
        }, 700)
    )
      ;
    }

以上就是画一个二维码的全部过程，包括背景的填充，商品图片的填充

注意的是：需要将及的到的网络路径的图片，转化成本地这样才能够识别出来，不然是不会显示的；

本文是作者原创转载请注明出处，谢谢！！！