1、使用wxml-to-canvas生成海报

demo效果图

1、npm install --save wxml-to-canvas

2、小程序页面json中引入

{
  "usingComponents": {
    "wxml-to-canvas": "wxml-to-canvas"
  }
}

3、使用组件

index.wxml

<wxml-to-canvas width="375" height="667" class="widget"></wxml-to-canvas>
<button bindtap="extraImage">导出图片</button>

index.js控制生成海报和保存海报

const { wxml, style } = require('./demo.js')
Page({
  data: {
    src: ''
  },
  onLoad() {
    this.widget = this.selectComponent('.widget')

  },
  onReady() {
    setTimeout(()=>{
      this.renderToCanvas()
    },150)
  },
  //生成海报
  renderToCanvas() {
    const p1 = this.widget.renderToCanvas({ wxml, style })
    p1.then((res) => {
      console.log('container', res.layoutBox)
      this.container = res
    })
  },
  //保存海报
  extraImage() {
    const p2 = this.widget.canvasToTempFilePath()
    p2.then(res => {
      console.log(res)
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success(res) {
          console.log(res)
        }
      })
    }).catch(err=>{
      console.log(err)
    })
  }
})

demo.js中配置海报样式

const wxml = `
<view class="container" >
  <image class="bg" src="/static/bg.jpeg"></image>
  <image class="bgTop" src="https://qiniu-image.qtshe.com/1560248372315_467.jpg"></image>
  <image class="logo" src="https://thirdwx.qlogo.cn/mmopen/vi_32/g2vb7Jj3x7UfOl0S8Wph20caQF2RQ9yB92rk7P7TD7lNvdlcpbwC63epdZQc0iarI3abFbPEASiavVaHrAMfKclQ/132"></image>
  <text class="name">测试号</text>
  <text class="sharetext">邀请您参与助力活动</text>
  <text class="title">测试测试测试测试测试测试</text>
  <image class="code" src="https://thirdwx.qlogo.cn/mmopen/vi_32/g2vb7Jj3x7UfOl0S8Wph20caQF2RQ9yB92rk7P7TD7lNvdlcpbwC63epdZQc0iarI3abFbPEASiavVaHrAMfKclQ/132"></image>
</view>
`
const style = {
  container: {
    position:'relative',
    width: 375,
    height: 667,
    backgroundColor: '#ccc',
    flexDirection: 'column',
    alignItems:'center'
  },
  bg: {
    position:'absolute',
    left:0,
    top:0,
    width: 375,
    height: 667
  },
  bgTop: {
    marginTop:16,
    width:344,
    height:210,
    borderRadius:8
  },
  logo: {
    marginTop:-22,
    width:48,
    height:48,
    borderRadius:24
  },
  name: {
    marginTop: 6,
    width: 300,
    lineHeight:'1',
    height: 18,
    textAlign:'center',
    fontSize:12,
    color:'#999'
  },
  sharetext: {
    marginTop: 6,
    width: 300,
    lineHeight:'1',
    height: 18,
    textAlign:'center',
    fontSize:12,
    color:'#999'
  },
  title: {
    marginTop:20,
    width: 300,
    height: 60,
    textAlign:'center',
    fontWeight: 'bold',
    fontSize:22,
    color:'#333'
  },
  code: {
    marginTop:50,
    width:100,
    height:100,
    borderRadius:50
  }
}

module.exports = {
  wxml,
  style
}

2、使用Canvas 2D生成海报

index.wxml

<canvas type="2d" id="canvas_box" style="width:375px;height:420px"></canvas>
<button class='bottom' catchtap="saveToAlbum" canvas-id="mycanvas"> 保存到相册 </button>

index.js

let CodeUrlbg = '/static/bg.jpeg'; //背景图片
let ctx, canvas;
Page({
  data: {},

  onLoad: function () {

  },
  onReady() {
    const query = wx.createSelectorQuery()
    query.select('#canvas_box').fields({
      id: true,
      node: true,
      size: true
    }).exec(this.init.bind(this))
  },
  //初始化画布
  init(res) {
    canvas = res[0].node
    ctx = canvas.getContext('2d')
    const dpr = wx.getSystemInfoSync().pixelRatio; //获取屏幕的像素比  值为2
    //新接口需显示设置画布宽高； w*2 h*2
    canvas.width = res[0].width * dpr;
    canvas.height = res[0].height * dpr;
    ctx.scale(dpr, dpr); //缩放

    //向画布载入图片的方法
    this.canvasDraw(ctx, canvas).then(res => {
      //图片头像渲染完成之后，渲染文字
      this.drawText(ctx)
    })

  },
  // 绘制背景图
  canvasDraw(ctx, canvas) {
    return new Promise(resolve => {
      let img = canvas.createImage(); //创建img对象
      img.src = CodeUrlbg;
      img.onload = () => {
        ctx.drawImage(img, 0, 0, 375, 430);
        let timer = setTimeout(() => {
          resolve(true);
          clearTimeout(timer);
        }, 100);
      };
    })

  },
  //绘制文字
  drawText(ctx) {
    ctx.font="30px Verdana";
    // 创建渐变
    var gradient = ctx.createLinearGradient(0, 0, 375, 0);
    gradient.addColorStop("0", "magenta");
    gradient.addColorStop("0.5", "blue");
    gradient.addColorStop("1.0", "red");
    // 用渐变填色
    ctx.fillStyle = gradient;
    ctx.fillText('测试测试测试123', 50, 50); //    ctx.fillText(文字, 移动x, 移动y) 
  },
  // 保存到相册
  saveToAlbum() {
    wx.canvasToTempFilePath({ //将canvas生成图片
      canvas: canvas,
      x: 0,
      y: 0,
      width: 690,
      height: 995,
      destWidth: 690 * 2, //截取canvas的宽度
      destHeight: 995 * 2, //截取canvas的高度
      success: function (res) {
        console.log('生成图片成功：', res)
        wx.saveImageToPhotosAlbum({ //保存图片到相册
          filePath: res.tempFilePath,
          success: function (res) {
            wx.showToast({
              title: "保存图片成功！",
              duration: 2000
            })
          }
        })

      },
    }, this)

  }
})

微信小程序中生成二维码weapp-qrcode-canvas-2d

微信小程序中生成二维码

/**
 * weapp.qrcode.js v1.1.2 (undefined)
 */

var hasOwn=Object.prototype.hasOwnProperty,toStr=Object.prototype.toString,defineProperty=Object.defineProperty,gOPD=Object.getOwnPropertyDescriptor,isArray=function(t){return"function"==typeof Array.isArray?Array.isArray(t):"[object Array]"===toStr.call(t)},isPlainObject=function(t){if(!t||"[object Object]"!==toStr.call(t))return!1;var e,r=hasOwn.call(t,"constructor"),o=t.constructor&&t.constructor.prototype&&hasOwn.call(t.constructor.prototype,"isPrototypeOf");if(t.constructor&&!r&&!o)return!1;for(e in t);return void 0===e||hasOwn.call(t,e)},setProperty=function(t,e){defineProperty&&"__proto__"===e.name?defineProperty(t,e.name,{enumerable:!0,configurable:!0,value:e.newValue,writable:!0}):t[e.name]=e.newValue},getProperty=function(t,e){if("__proto__"===e){if(!hasOwn.call(t,e))return;if(gOPD)return gOPD(t,e).value}return t[e]},extend=function t(){var e,r,o,n,i,a,s=arguments[0],u=1,l=arguments.length,h=!1;for("boolean"==typeof s&&(h=s,s=arguments[1]||{},u=2),(null==s||"object"!=typeof s&&"function"!=typeof s)&&(s={});u<l;++u)if(null!=(e=arguments[u]))for(r in e)o=getProperty(s,r),s!==(n=getProperty(e,r))&&(h&&n&&(isPlainObject(n)||(i=isArray(n)))?(i?(i=!1,a=o&&isArray(o)?o:[]):a=o&&isPlainObject(o)?o:{},setProperty(s,{name:r,newValue:t(h,a,n)})):void 0!==n&&setProperty(s,{name:r,newValue:n}));return s};function QR8bitByte(t){this.mode=QRMode.MODE_8BIT_BYTE,this.data=t}function QRCode(t,e){this.typeNumber=t,this.errorCorrectLevel=e,this.modules=null,this.moduleCount=0,this.dataCache=null,this.dataList=new Array}QR8bitByte.prototype={getLength:function(t){return this.data.length},write:function(t){for(var e=0;e<this.data.length;e++)t.put(this.data.charCodeAt(e),8)}},QRCode.prototype={addData:function(t){var e=new QR8bitByte(t);this.dataList.push(e),this.dataCache=null},isDark:function(t,e){if(t<0||this.moduleCount<=t||e<0||this.moduleCount<=e)throw new Error(t+","+e);return this.modules[t][e]},getModuleCount:function(){return this.moduleCount},make:function(){if(this.typeNumber<1){var t=1;for(t=1;t<40;t++){for(var e=QRRSBlock.getRSBlocks(t,this.errorCorrectLevel),r=new QRBitBuffer,o=0,n=0;n<e.length;n++)o+=e[n].dataCount;for(n=0;n<this.dataList.length;n++){var i=this.dataList[n];r.put(i.mode,4),r.put(i.getLength(),QRUtil.getLengthInBits(i.mode,t)),i.write(r)}if(r.getLengthInBits()<=8*o)break}this.typeNumber=t}this.makeImpl(!1,this.getBestMaskPattern())},makeImpl:function(t,e){this.moduleCount=4*this.typeNumber+17,this.modules=new Array(this.moduleCount);for(var r=0;r<this.moduleCount;r++){this.modules[r]=new Array(this.moduleCount);for(var o=0;o<this.moduleCount;o++)this.modules[r][o]=null}this.setupPositionProbePattern(0,0),this.setupPositionProbePattern(this.moduleCount-7,0),this.setupPositionProbePattern(0,this.moduleCount-7),this.setupPositionAdjustPattern(),this.setupTimingPattern(),this.setupTypeInfo(t,e),this.typeNumber>=7&&this.setupTypeNumber(t),null==this.dataCache&&(this.dataCache=QRCode.createData(this.typeNumber,this.errorCorrectLevel,this.dataList)),this.mapData(this.dataCache,e)},setupPositionProbePattern:function(t,e){for(var r=-1;r<=7;r++)if(!(t+r<=-1||this.moduleCount<=t+r))for(var o=-1;o<=7;o++)e+o<=-1||this.moduleCount<=e+o||(this.modules[t+r][e+o]=0<=r&&r<=6&&(0==o||6==o)||0<=o&&o<=6&&(0==r||6==r)||2<=r&&r<=4&&2<=o&&o<=4)},getBestMaskPattern:function(){for(var t=0,e=0,r=0;r<8;r++){this.makeImpl(!0,r);var o=QRUtil.getLostPoint(this);(0==r||t>o)&&(t=o,e=r)}return e},createMovieClip:function(t,e,r){var o=t.createEmptyMovieClip(e,r);this.make();for(var n=0;n<this.modules.length;n++)for(var i=1*n,a=0;a<this.modules[n].length;a++){var s=1*a;this.modules[n][a]&&(o.beginFill(0,100),o.moveTo(s,i),o.lineTo(s+1,i),o.lineTo(s+1,i+1),o.lineTo(s,i+1),o.endFill())}return o},setupTimingPattern:function(){for(var t=8;t<this.moduleCount-8;t++)null==this.modules[t][6]&&(this.modules[t][6]=t%2==0);for(var e=8;e<this.moduleCount-8;e++)null==this.modules[6][e]&&(this.modules[6][e]=e%2==0)},setupPositionAdjustPattern:function(){for(var t=QRUtil.getPatternPosition(this.typeNumber),e=0;e<t.length;e++)for(var r=0;r<t.length;r++){var o=t[e],n=t[r];if(null==this.modules[o][n])for(var i=-2;i<=2;i++)for(var a=-2;a<=2;a++)this.modules[o+i][n+a]=-2==i||2==i||-2==a||2==a||0==i&&0==a}},setupTypeNumber:function(t){for(var e=QRUtil.getBCHTypeNumber(this.typeNumber),r=0;r<18;r++){var o=!t&&1==(e>>r&1);this.modules[Math.floor(r/3)][r%3+this.moduleCount-8-3]=o}for(r=0;r<18;r++){o=!t&&1==(e>>r&1);this.modules[r%3+this.moduleCount-8-3][Math.floor(r/3)]=o}},setupTypeInfo:function(t,e){for(var r=this.errorCorrectLevel<<3|e,o=QRUtil.getBCHTypeInfo(r),n=0;n<15;n++){var i=!t&&1==(o>>n&1);n<6?this.modules[n][8]=i:n<8?this.modules[n+1][8]=i:this.modules[this.moduleCount-15+n][8]=i}for(n=0;n<15;n++){i=!t&&1==(o>>n&1);n<8?this.modules[8][this.moduleCount-n-1]=i:n<9?this.modules[8][15-n-1+1]=i:this.modules[8][15-n-1]=i}this.modules[this.moduleCount-8][8]=!t},mapData:function(t,e){for(var r=-1,o=this.moduleCount-1,n=7,i=0,a=this.moduleCount-1;a>0;a-=2)for(6==a&&a--;;){for(var s=0;s<2;s++)if(null==this.modules[o][a-s]){var u=!1;i<t.length&&(u=1==(t[i]>>>n&1)),QRUtil.getMask(e,o,a-s)&&(u=!u),this.modules[o][a-s]=u,-1==--n&&(i++,n=7)}if((o+=r)<0||this.moduleCount<=o){o-=r,r=-r;break}}}},QRCode.PAD0=236,QRCode.PAD1=17,QRCode.createData=function(t,e,r){for(var o=QRRSBlock.getRSBlocks(t,e),n=new QRBitBuffer,i=0;i<r.length;i++){var a=r[i];n.put(a.mode,4),n.put(a.getLength(),QRUtil.getLengthInBits(a.mode,t)),a.write(n)}var s=0;for(i=0;i<o.length;i++)s+=o[i].dataCount;if(n.getLengthInBits()>8*s)throw new Error("code length overflow. ("+n.getLengthInBits()+">"+8*s+")");for(n.getLengthInBits()+4<=8*s&&n.put(0,4);n.getLengthInBits()%8!=0;)n.putBit(!1);for(;!(n.getLengthInBits()>=8*s||(n.put(QRCode.PAD0,8),n.getLengthInBits()>=8*s));)n.put(QRCode.PAD1,8);return QRCode.createBytes(n,o)},QRCode.createBytes=function(t,e){for(var r=0,o=0,n=0,i=new Array(e.length),a=new Array(e.length),s=0;s<e.length;s++){var u=e[s].dataCount,l=e[s].totalCount-u;o=Math.max(o,u),n=Math.max(n,l),i[s]=new Array(u);for(var h=0;h<i[s].length;h++)i[s][h]=255&t.buffer[h+r];r+=u;var f=QRUtil.getErrorCorrectPolynomial(l),g=new QRPolynomial(i[s],f.getLength()-1).mod(f);a[s]=new Array(f.getLength()-1);for(h=0;h<a[s].length;h++){var c=h+g.getLength()-a[s].length;a[s][h]=c>=0?g.get(c):0}}var d=0;for(h=0;h<e.length;h++)d+=e[h].totalCount;var R=new Array(d),m=0;for(h=0;h<o;h++)for(s=0;s<e.length;s++)h<i[s].length&&(R[m++]=i[s][h]);for(h=0;h<n;h++)for(s=0;s<e.length;s++)h<a[s].length&&(R[m++]=a[s][h]);return R};for(var QRMode={MODE_NUMBER:1,MODE_ALPHA_NUM:2,MODE_8BIT_BYTE:4,MODE_KANJI:8},QRErrorCorrectLevel={L:1,M:0,Q:3,H:2},QRMaskPattern={PATTERN000:0,PATTERN001:1,PATTERN010:2,PATTERN011:3,PATTERN100:4,PATTERN101:5,PATTERN110:6,PATTERN111:7},QRUtil={PATTERN_POSITION_TABLE:[[],[6,18],[6,22],[6,26],[6,30],[6,34],[6,22,38],[6,24,42],[6,26,46],[6,28,50],[6,30,54],[6,32,58],[6,34,62],[6,26,46,66],[6,26,48,70],[6,26,50,74],[6,30,54,78],[6,30,56,82],[6,30,58,86],[6,34,62,90],[6,28,50,72,94],[6,26,50,74,98],[6,30,54,78,102],[6,28,54,80,106],[6,32,58,84,110],[6,30,58,86,114],[6,34,62,90,118],[6,26,50,74,98,122],[6,30,54,78,102,126],[6,26,52,78,104,130],[6,30,56,82,108,134],[6,34,60,86,112,138],[6,30,58,86,114,142],[6,34,62,90,118,146],[6,30,54,78,102,126,150],[6,24,50,76,102,128,154],[6,28,54,80,106,132,158],[6,32,58,84,110,136,162],[6,26,54,82,110,138,166],[6,30,58,86,114,142,170]],G15:1335,G18:7973,G15_MASK:21522,getBCHTypeInfo:function(t){for(var e=t<<10;QRUtil.getBCHDigit(e)-QRUtil.getBCHDigit(QRUtil.G15)>=0;)e^=QRUtil.G15<<QRUtil.getBCHDigit(e)-QRUtil.getBCHDigit(QRUtil.G15);return(t<<10|e)^QRUtil.G15_MASK},getBCHTypeNumber:function(t){for(var e=t<<12;QRUtil.getBCHDigit(e)-QRUtil.getBCHDigit(QRUtil.G18)>=0;)e^=QRUtil.G18<<QRUtil.getBCHDigit(e)-QRUtil.getBCHDigit(QRUtil.G18);return t<<12|e},getBCHDigit:function(t){for(var e=0;0!=t;)e++,t>>>=1;return e},getPatternPosition:function(t){return QRUtil.PATTERN_POSITION_TABLE[t-1]},getMask:function(t,e,r){switch(t){case QRMaskPattern.PATTERN000:return(e+r)%2==0;case QRMaskPattern.PATTERN001:return e%2==0;case QRMaskPattern.PATTERN010:return r%3==0;case QRMaskPattern.PATTERN011:return(e+r)%3==0;case QRMaskPattern.PATTERN100:return(Math.floor(e/2)+Math.floor(r/3))%2==0;case QRMaskPattern.PATTERN101:return e*r%2+e*r%3==0;case QRMaskPattern.PATTERN110:return(e*r%2+e*r%3)%2==0;case QRMaskPattern.PATTERN111:return(e*r%3+(e+r)%2)%2==0;default:throw new Error("bad maskPattern:"+t)}},getErrorCorrectPolynomial:function(t){for(var e=new QRPolynomial([1],0),r=0;r<t;r++)e=e.multiply(new QRPolynomial([1,QRMath.gexp(r)],0));return e},getLengthInBits:function(t,e){if(1<=e&&e<10)switch(t){case QRMode.MODE_NUMBER:return 10;case QRMode.MODE_ALPHA_NUM:return 9;case QRMode.MODE_8BIT_BYTE:case QRMode.MODE_KANJI:return 8;default:throw new Error("mode:"+t)}else if(e<27)switch(t){case QRMode.MODE_NUMBER:return 12;case QRMode.MODE_ALPHA_NUM:return 11;case QRMode.MODE_8BIT_BYTE:return 16;case QRMode.MODE_KANJI:return 10;default:throw new Error("mode:"+t)}else{if(!(e<41))throw new Error("type:"+e);switch(t){case QRMode.MODE_NUMBER:return 14;case QRMode.MODE_ALPHA_NUM:return 13;case QRMode.MODE_8BIT_BYTE:return 16;case QRMode.MODE_KANJI:return 12;default:throw new Error("mode:"+t)}}},getLostPoint:function(t){for(var e=t.getModuleCount(),r=0,o=0;o<e;o++)for(var n=0;n<e;n++){for(var i=0,a=t.isDark(o,n),s=-1;s<=1;s++)if(!(o+s<0||e<=o+s))for(var u=-1;u<=1;u++)n+u<0||e<=n+u||0==s&&0==u||a==t.isDark(o+s,n+u)&&i++;i>5&&(r+=3+i-5)}for(o=0;o<e-1;o++)for(n=0;n<e-1;n++){var l=0;t.isDark(o,n)&&l++,t.isDark(o+1,n)&&l++,t.isDark(o,n+1)&&l++,t.isDark(o+1,n+1)&&l++,0!=l&&4!=l||(r+=3)}for(o=0;o<e;o++)for(n=0;n<e-6;n++)t.isDark(o,n)&&!t.isDark(o,n+1)&&t.isDark(o,n+2)&&t.isDark(o,n+3)&&t.isDark(o,n+4)&&!t.isDark(o,n+5)&&t.isDark(o,n+6)&&(r+=40);for(n=0;n<e;n++)for(o=0;o<e-6;o++)t.isDark(o,n)&&!t.isDark(o+1,n)&&t.isDark(o+2,n)&&t.isDark(o+3,n)&&t.isDark(o+4,n)&&!t.isDark(o+5,n)&&t.isDark(o+6,n)&&(r+=40);var h=0;for(n=0;n<e;n++)for(o=0;o<e;o++)t.isDark(o,n)&&h++;return r+=10*(Math.abs(100*h/e/e-50)/5)}},QRMath={glog:function(t){if(t<1)throw new Error("glog("+t+")");return QRMath.LOG_TABLE[t]},gexp:function(t){for(;t<0;)t+=255;for(;t>=256;)t-=255;return QRMath.EXP_TABLE[t]},EXP_TABLE:new Array(256),LOG_TABLE:new Array(256)},i=0;i<8;i++)QRMath.EXP_TABLE[i]=1<<i;for(i=8;i<256;i++)QRMath.EXP_TABLE[i]=QRMath.EXP_TABLE[i-4]^QRMath.EXP_TABLE[i-5]^QRMath.EXP_TABLE[i-6]^QRMath.EXP_TABLE[i-8];for(i=0;i<255;i++)QRMath.LOG_TABLE[QRMath.EXP_TABLE[i]]=i;function QRPolynomial(t,e){if(void 0==t.length)throw new Error(t.length+"/"+e);for(var r=0;r<t.length&&0==t[r];)r++;this.num=new Array(t.length-r+e);for(var o=0;o<t.length-r;o++)this.num[o]=t[o+r]}function QRRSBlock(t,e){this.totalCount=t,this.dataCount=e}function QRBitBuffer(){this.buffer=new Array,this.length=0}function utf16to8(t){var e,r,o,n;for(e="",o=t.length,r=0;r<o;r++)(n=t.charCodeAt(r))>=1&&n<=127?e+=t.charAt(r):n>2047?(e+=String.fromCharCode(224|n>>12&15),e+=String.fromCharCode(128|n>>6&63),e+=String.fromCharCode(128|n>>0&63)):(e+=String.fromCharCode(192|n>>6&31),e+=String.fromCharCode(128|n>>0&63));return e}function drawQrcode(t,e){if(t=t||{},(t=extend(!0,{canvasId:"myQrcode",text:"爱一个人就要勇敢说出来",width:260,height:260,padding:20,typeNumber:-1,correctLevel:QRErrorCorrectLevel.H,background:"#ffffff",foreground:"#000000",image:{imageResource:"",width:80,height:80,round:!0}},t)).canvasId||t.canvas){if(t.paddingColor||(t.paddingColor=t.background),e){var r=new QRCode(t.typeNumber,t.correctLevel);return r.addData(utf16to8(t.text)),r.make(),new Promise(function(t,e){t(r)})}return new Promise(function(e,r){return e(function(){var e=new QRCode(t.typeNumber,t.correctLevel);e.addData(utf16to8(t.text)),e.make();const r=wx.getSystemInfoSync().pixelRatio;var o=t.canvas;const n=o.getContext("2d");o.width=t.width*r,o.height=t.width*r;const i=o.width;n.fillStyle=t.paddingColor,n.fillRect(0,0,i+2*t.padding,i+2*t.padding);for(var a=(i-2*t.padding)/e.getModuleCount(),s=(i-2*t.padding)/e.getModuleCount(),u=0;u<e.getModuleCount();u++)for(var l=0;l<e.getModuleCount();l++){n.fillStyle=e.isDark(u,l)?t.foreground:t.background;var h=Math.ceil((l+1)*a)-Math.floor(l*a),f=Math.ceil((u+1)*a)-Math.floor(u*a);n.fillRect(Math.round(l*a)+t.padding,Math.round(u*s)+t.padding,h,f)}if(t.image.imageResource){const e=t.image.width*r,o=t.image.height*r,a=(i-e)/2,s=(i-o)/2;if(t.image.round){const o=t.image.width*r+30,u=(i-o)/2,l=o/2,h=u+l;n.beginPath(),n.arc(h,h,l,0,2*Math.PI),n.fillStyle="#ffffff",n.fill(),n.restore();const f=e/2,g=a+f,c=s+f;n.beginPath(),n.arc(g,c,f,0,2*Math.PI),n.clip(),n.drawImage(t.image.imageResource,a,s,e,e),n.restore()}else n.drawImage(t.image.imageResource,a,s,e,o),n.restore()}return n}())})}console.warn("please set canvasId or canvas!")}QRPolynomial.prototype={get:function(t){return this.num[t]},getLength:function(){return this.num.length},multiply:function(t){for(var e=new Array(this.getLength()+t.getLength()-1),r=0;r<this.getLength();r++)for(var o=0;o<t.getLength();o++)e[r+o]^=QRMath.gexp(QRMath.glog(this.get(r))+QRMath.glog(t.get(o)));return new QRPolynomial(e,0)},mod:function(t){if(this.getLength()-t.getLength()<0)return this;for(var e=QRMath.glog(this.get(0))-QRMath.glog(t.get(0)),r=new Array(this.getLength()),o=0;o<this.getLength();o++)r[o]=this.get(o);for(o=0;o<t.getLength();o++)r[o]^=QRMath.gexp(QRMath.glog(t.get(o))+e);return new QRPolynomial(r,0).mod(t)}},QRRSBlock.RS_BLOCK_TABLE=[[1,26,19],[1,26,16],[1,26,13],[1,26,9],[1,44,34],[1,44,28],[1,44,22],[1,44,16],[1,70,55],[1,70,44],[2,35,17],[2,35,13],[1,100,80],[2,50,32],[2,50,24],[4,25,9],[1,134,108],[2,67,43],[2,33,15,2,34,16],[2,33,11,2,34,12],[2,86,68],[4,43,27],[4,43,19],[4,43,15],[2,98,78],[4,49,31],[2,32,14,4,33,15],[4,39,13,1,40,14],[2,121,97],[2,60,38,2,61,39],[4,40,18,2,41,19],[4,40,14,2,41,15],[2,146,116],[3,58,36,2,59,37],[4,36,16,4,37,17],[4,36,12,4,37,13],[2,86,68,2,87,69],[4,69,43,1,70,44],[6,43,19,2,44,20],[6,43,15,2,44,16],[4,101,81],[1,80,50,4,81,51],[4,50,22,4,51,23],[3,36,12,8,37,13],[2,116,92,2,117,93],[6,58,36,2,59,37],[4,46,20,6,47,21],[7,42,14,4,43,15],[4,133,107],[8,59,37,1,60,38],[8,44,20,4,45,21],[12,33,11,4,34,12],[3,145,115,1,146,116],[4,64,40,5,65,41],[11,36,16,5,37,17],[11,36,12,5,37,13],[5,109,87,1,110,88],[5,65,41,5,66,42],[5,54,24,7,55,25],[11,36,12],[5,122,98,1,123,99],[7,73,45,3,74,46],[15,43,19,2,44,20],[3,45,15,13,46,16],[1,135,107,5,136,108],[10,74,46,1,75,47],[1,50,22,15,51,23],[2,42,14,17,43,15],[5,150,120,1,151,121],[9,69,43,4,70,44],[17,50,22,1,51,23],[2,42,14,19,43,15],[3,141,113,4,142,114],[3,70,44,11,71,45],[17,47,21,4,48,22],[9,39,13,16,40,14],[3,135,107,5,136,108],[3,67,41,13,68,42],[15,54,24,5,55,25],[15,43,15,10,44,16],[4,144,116,4,145,117],[17,68,42],[17,50,22,6,51,23],[19,46,16,6,47,17],[2,139,111,7,140,112],[17,74,46],[7,54,24,16,55,25],[34,37,13],[4,151,121,5,152,122],[4,75,47,14,76,48],[11,54,24,14,55,25],[16,45,15,14,46,16],[6,147,117,4,148,118],[6,73,45,14,74,46],[11,54,24,16,55,25],[30,46,16,2,47,17],[8,132,106,4,133,107],[8,75,47,13,76,48],[7,54,24,22,55,25],[22,45,15,13,46,16],[10,142,114,2,143,115],[19,74,46,4,75,47],[28,50,22,6,51,23],[33,46,16,4,47,17],[8,152,122,4,153,123],[22,73,45,3,74,46],[8,53,23,26,54,24],[12,45,15,28,46,16],[3,147,117,10,148,118],[3,73,45,23,74,46],[4,54,24,31,55,25],[11,45,15,31,46,16],[7,146,116,7,147,117],[21,73,45,7,74,46],[1,53,23,37,54,24],[19,45,15,26,46,16],[5,145,115,10,146,116],[19,75,47,10,76,48],[15,54,24,25,55,25],[23,45,15,25,46,16],[13,145,115,3,146,116],[2,74,46,29,75,47],[42,54,24,1,55,25],[23,45,15,28,46,16],[17,145,115],[10,74,46,23,75,47],[10,54,24,35,55,25],[19,45,15,35,46,16],[17,145,115,1,146,116],[14,74,46,21,75,47],[29,54,24,19,55,25],[11,45,15,46,46,16],[13,145,115,6,146,116],[14,74,46,23,75,47],[44,54,24,7,55,25],[59,46,16,1,47,17],[12,151,121,7,152,122],[12,75,47,26,76,48],[39,54,24,14,55,25],[22,45,15,41,46,16],[6,151,121,14,152,122],[6,75,47,34,76,48],[46,54,24,10,55,25],[2,45,15,64,46,16],[17,152,122,4,153,123],[29,74,46,14,75,47],[49,54,24,10,55,25],[24,45,15,46,46,16],[4,152,122,18,153,123],[13,74,46,32,75,47],[48,54,24,14,55,25],[42,45,15,32,46,16],[20,147,117,4,148,118],[40,75,47,7,76,48],[43,54,24,22,55,25],[10,45,15,67,46,16],[19,148,118,6,149,119],[18,75,47,31,76,48],[34,54,24,34,55,25],[20,45,15,61,46,16]],QRRSBlock.getRSBlocks=function(t,e){var r=QRRSBlock.getRsBlockTable(t,e);if(void 0==r)throw new Error("bad rs block @ typeNumber:"+t+"/errorCorrectLevel:"+e);for(var o=r.length/3,n=new Array,i=0;i<o;i++)for(var a=r[3*i+0],s=r[3*i+1],u=r[3*i+2],l=0;l<a;l++)n.push(new QRRSBlock(s,u));return n},QRRSBlock.getRsBlockTable=function(t,e){switch(e){case QRErrorCorrectLevel.L:return QRRSBlock.RS_BLOCK_TABLE[4*(t-1)+0];case QRErrorCorrectLevel.M:return QRRSBlock.RS_BLOCK_TABLE[4*(t-1)+1];case QRErrorCorrectLevel.Q:return QRRSBlock.RS_BLOCK_TABLE[4*(t-1)+2];case QRErrorCorrectLevel.H:return QRRSBlock.RS_BLOCK_TABLE[4*(t-1)+3];default:return}},QRBitBuffer.prototype={get:function(t){var e=Math.floor(t/8);return 1==(this.buffer[e]>>>7-t%8&1)},put:function(t,e){for(var r=0;r<e;r++)this.putBit(1==(t>>>e-r-1&1))},getLengthInBits:function(){return this.length},putBit:function(t){var e=Math.floor(this.length/8);this.buffer.length<=e&&this.buffer.push(0),t&&(this.buffer[e]|=128>>>this.length%8),this.length++}};export default drawQrcode;

使用demo

import drawQrcode from './weapp.qrcode.js'//路径根据实际引用的页面路径自行改变
Page({
  data: {

  },
  onReady() {
    const query = wx.createSelectorQuery()
    query.select('#myQrcode')
      .fields({
        node: true,
        size: true
      })
      .exec(async (res) => {
        var canvas = res[0].node

        var img = canvas.createImage();
        img.src = "../../static/bg.jpeg"//二维码中间的头像

        img.onload = function () {
          // img.onload完成后才能调用 drawQrcode方法

          var options = {
            canvas: canvas,
            canvasId: 'myQrcode',
            width: 260,
            padding: 30,
            paddingColor: '#fff',
            background: '#fff',
            foreground: '#000000',
            text: 'https://gitee.com/w386888618/weapp-qrcode-canvas-2d',
            image: {
              imageResource: img,
              width: 80, // 建议不要设置过大，以免影响扫码
              height: 80, // 建议不要设置过大，以免影响扫码
              round: true // Logo图片是否为圆形
            }
          }

          drawQrcode(options)

          // 获取临时路径（得到之后，想干嘛就干嘛了）
          wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: 260,
            height: 260,
            destWidth: 600,
            destHeight: 600,
            canvasId: 'myQrcode',
            canvas: canvas,
            success(res) {
              console.log('二维码临时路径为：', res.tempFilePath)
            },
            fail(res) {
              console.error(res)
            }
          })

        };
      })
  },
})