钉钉小程序不用canvas在后端绘图前端用image标签获取图片的实践
数据酷软件 人气:0公司的需求要用电子员工卡代替用了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):
搞定!
加载全部内容