淘宝 生成 图片二维码分享

最近公司需求提出仿淘宝分享生成一张含有图片/二维码/文字的图片

实现方法：

1. 采用的canvas 插入图片和生成图片的功能
2. 生成二维码采用的是QRCode 插件

实现效果：

实现步骤：
我是在vue环境中实现的
1.引入qrcode

1安装插件 npm install qrcode
2、在main.js中引入
import QRCode from 'qrcode'    //定义生成二维码组件

2.dom元素构建

 <div id="app">
    <button class="btn" @click="drawChart">绘图</button>  //点击按钮生成图片
    <div class="wrap" v-show="show">
      <canvas width="300" height="500" id="container"></canvas>
    </div>
  </div>

3.js绘制

drawChart() {
      this.canvas = document.querySelector('#container')
      let ctx = this.canvas.getContext('2d');
      ctx.fillStyle = '#fff'
      ctx.fillRect(0, 0, 300, 500)

      //标题
      let title = '这个不错#聚划算团购#宝贝不错：pawinpawing',
        price = '￥599'
      this.drawText(ctx，title, 10, 390, 170)  // 文字我默认显示两行
      ctx.fillStyle = '#f34234'
      ctx.font = "bold 30px 宋体";
      ctx.fillText(price, 10, 480)
      
      //生成的二维码内容，可以添加变量
      let QueryDetail = `https://detail.tmall.hk/hk/item.htm?spm=a1z10.1-b-s.w5003-18691032235.7.321f11cbnb03Tv&id=541928730880&rn=f938c20c3d2ec15358e831071db22d38&abbucket=8&scene=taobao_shop`;
      let canvsCode = document.createElement('canvas')
      canvsCode.width = 100
      canvsCode.height = 100
      QRCode.toCanvas(canvsCode, QueryDetail, function (error) { })
      var image = new Image();
      image.src = canvsCode.toDataURL("image/png");   // 将链接转化为图片之后，再绘制到canvas中去
      image.onload = () => {
        ctx.drawImage(image, 190, 400, 100, 100)  
      }

      // 大图
      let imgBig = new Image()
      imgBig.setAttribute('crossOrigin', 'anonymous')
      imgBig.src = 'https://img.alicdn.com/imgextra/i2/54199406/O1CN012JLzreAxzn1xhNP_!!54199406.jpg'

      imgBig.onload = () => {
        ctx.drawImage(imgBig, 10, 10, 280, 380)
        let img = this.canvas.toDataURL('image/png')
        console.log(img)    // 最终生成的base64图片
      }
    },

文字显示两行的方法

 drawText (ctx, tit, x, y, width) {

      var titArr = tit.split("");
      var temp = "";
      var row = [];

      ctx.font = "20px Arial";
      ctx.fillStyle = "black";
      ctx.textBaseline = "middle";

      for (let i = 0; i < titArr .length; i++) {

        if (ctx.measureText(temp).width < w && ctx.measureText(temp + (titArr [i])).width <=width) {
          temp += titArr [i];
        }    //ctx.measureText(text).width  测量文本text的宽度
        else {
          row.push(temp);
          temp = titArr [i];
        }
      }
      row.push(temp);
      // 只显示2行，多余的省略 加...
      for (let j  = 0; j < 2; j++) {
        var str = row[j];
        if (j == 1) {
          str = str.substring(0, str.length - 1) + '...';
        }
        ctx.fillText(str, x, y + (j + 1) * 24);
      }
    }