釘釘小程序不用canvas在后端繪圖前端用image標簽獲取圖片的實踐

公司的需求要用電子員工卡代替用了N久的工作證，在各種場合刷二維碼來代替刷卡。在釘釘小程序里實現。感覺這回又要躺坑里了。

釘釘小程序第一次做。我這個自封的GDI+大神才不要想用釘釘jsapi的方式用canvas來實現呢，怎么樣，機智不。

我們看一眼官方的demo：

example.restore = function (context) {
  [3, 2, 1].forEach(function (item) {
    context.beginPath();
    context.setStrokeStyle('#108ee9');
    context.save();
    context.scale(item, item);
    context.rect(10, 10, 100, 100);
    context.stroke();
    context.restore();
  });

};

example.drawImage = function (context) {
  context.drawImage('/image/api.png',100, 50);
};

example.fillText = function (context) {
  context.beginPath();
  context.setStrokeStyle('#108ee9');
  context.moveTo(0, 10);
  context.lineTo(300, 10);
  context.stroke();

  // context.save();
  // context.scale(1.5, 1.5);
  // context.translate(20, 20);
  context.setFontSize(10);
  context.fillText('Hello Dingtalk', 0, 30);
  context.setFontSize(20);
  context.fillText('Hello Dingtalk', 200, 30);

  // context.restore();

  context.beginPath();
  context.moveTo(0, 30);
  context.lineTo(300, 30);
  context.stroke();
};

example.fill = function (context) {
  context.beginPath();
  context.setFillStyle('#108ee9');
  context.rect(20, 20, 150, 100);
  context.fill();
};

 

實現的過程：

1）前端：

<view class="page">
  <view class="page-section">
      <image style="background-color: #eeeeee; width: {{windowWidth}}px; height:{{windowHeight}}px;" 
          mode="aspectFit" 
          src="{{src}}" onError="imageError" 
          onLoad="imageLoad" />
  </view>
</view>

 

Page({
  data: {
    src: '',   
    windowHeight:488,
    windowWidth:298,
  },
  onLoad(query) {  
    dd.getSystemInfo({
          success: (res) => { 
            this.setData({
                windowHeight:res.windowHeight-32,
                windowWidth:res.windowWidth-26,
                src:query.src+'&imageWidth='+(res.windowWidth-26)+'&imageHeight='+(res.windowHeight-26)
            });  
            console.log(query.src+'&imageWidth='+(res.windowWidth-26)+'&imageHeight='+(res.windowHeight-26));
          }
    }); 
  },
  imageError: function (e) {
    console.log('image3 發生錯誤', e.detail.errMsg)
  },
  imageLoad: function (e) {
    console.log('image 加載成功', e);
  }
});

2)后端（ASP.NET CORE 3.1）：

 

 搞定！