几行代码让你轻松掌握微信生成海报和二维码

2023-09-12 08:36:37

在当今信息传播迅速的时代，海报和二维码已成为企业和个人进行营销推广和信息分享的重要工具。它们可以有效地传递信息，吸引人们的注意力并引导他们采取行动。本文将向您展示如何使用简单的代码生成微信海报和二维码，让您轻松实现营销目标。

微信海报生成

import wepy from 'wepy';
import qrcode from 'qrcodejs';
import canvas from 'canvas';

wepy.component({
  methods: {
    generatePoster() {
      const qr = new qrcode.QRCode(0, 'H');
      qr.addData(this.data.url);
      qr.make();

      const ctx = canvas.createCanvasContext('poster');
      ctx.setFillStyle('white');
      ctx.fillRect(0, 0, 300, 300);

      const imgData = ctx.getImageData(0, 0, 300, 300);
      for (let i = 0; i < imgData.data.length; i += 4) {
        const r = imgData.data[i];
        const g = imgData.data[i + 1];
        const b = imgData.data[i + 2];
        const a = imgData.data[i + 3];

        if (r + g + b < 128) {
          imgData.data[i] = 0;
          imgData.data[i + 1] = 0;
          imgData.data[i + 2] = 0;
          imgData.data[i + 3] = 0;
        }
      }

      ctx.putImageData(imgData, 0, 0);
      ctx.drawImage(this.data.bgImage, 0, 0, 300, 300);
      ctx.drawImage(qr.toDataURL(), 100, 100, 100, 100);
      ctx.setFontSize(16);
      ctx.setFillStyle('black');
      ctx.fillText(this.data.text, 100, 220);

      wepy.canvasToTempFilePath({
        canvasId: 'poster',
        success: (res) => {
          this.setData({
            posterUrl: res.tempFilePath,
          });
        },
      });
    },
  },
});

微信二维码生成

import wepy from 'wepy';
import qrcode from 'qrcodejs';
import canvas from 'canvas';

wepy.component({
  methods: {
    generateQrCode() {
      const qr = new qrcode.QRCode(0, 'H');
      qr.addData(this.data.url);
      qr.make();

      const ctx = canvas.createCanvasContext('qrcode');
      ctx.setFillStyle('white');
      ctx.fillRect(0, 0, 200, 200);

      const imgData = ctx.getImageData(0, 0, 200, 200);
      for (let i = 0; i < imgData.data.length; i += 4) {
        const r = imgData.data[i];
        const g = imgData.data[i + 1];
        const b = imgData.data[i + 2];
        const a = imgData.data[i + 3];

        if (r + g + b < 128) {
          imgData.data[i] = 0;
          imgData.data[i + 1] = 0;
          imgData.data[i + 2] = 0;
          imgData.data[i + 3] = 0;
        }
      }

      ctx.putImageData(imgData, 0, 0);
      ctx.setFontSize(16);
      ctx.setFillStyle('black');
      ctx.fillText(this.data.text, 100, 220);

      wepy.canvasToTempFilePath({
        canvasId: 'qrcode',
        success: (res) => {
          this.setData({
            qrcodeUrl: res.tempFilePath,
          });
        },
      });
    },
  },
});