效果图:
html 部分
<canvas canvas-id="myCanvas" id="canvas" class="canvas" style="height:{{initHeight}}px"/>
wxss 部分
- .canvas{
- position: fixed;
- top: -1000rpx;
- left: -1000rpx;
- width: 600rpx;
- background-color: #FFFFFF;
- }
js 部分
- import drawQrcode from 'weapp-qrcode'
- this.getWritePhotosAlbum();
- this.getQrcodeUrl(data);
- getQrcodeUrl(orderInfo) {
- const _this = this;
- drawQrcode({
- width: 150,
- height: 150,
- canvasId: 'myQrcode',
- text: orderInfo&&orderInfo.qrCodeConfig&&orderInfo.qrCodeConfig.content?orderInfo.qrCodeConfig.content:'',
- callback: function (e) {
- wx.canvasToTempFilePath({
- canvasId: 'myQrcode',
- success: function (res) {
- _this.qrCodeUrl = res.tempFilePath;
- },
- fail: function (res) {
- console.log(res);
- }
- });
- }
- });
- }
- generateImg(QRcode) {
- const _this = this;
- let orderInfo = this.orderInfo;
- let initHeight = 55;
- let context = wx.createCanvasContext('myCanvas')
- context.setFillStyle('white')
- context.fillRect(0, 0, 300, 1650)
- context.setFillStyle('#000000')
- context.setTextAlign('center')
- context.font = '20px bold'
- initHeight = this.drawText(orderInfo&&orderInfo.shopName?orderInfo.shopName:'', context, 150, initHeight, 25, 280);
- context.setFontSize(14)
- context.setFillStyle('#333333')
- initHeight = this.drawText('24 小时自助售药机', context, 150, initHeight+20, 20, 280);
- context.setTextAlign('left')
- context.fillText('******************************************************', 10, initHeight+23,280)
- initHeight = this.drawText(orderInfo&&orderInfo.orderNo?'交易单号:'+ orderInfo.orderNo:'交易单号:', context, 10, initHeight+40, 20, 280, true);
- initHeight = this.drawText(orderInfo&&orderInfo.paymentOrderDate?'交易时间:'+ orderInfo.paymentOrderDate:'交易时间:', context, 10, initHeight+20, 20, 280, true);
- // this.drawDashedLine(context,10,155,290,155, 5)
- context.fillText('******************************************************', 10, initHeight+23,280)
- initHeight = this.drawText(orderInfo&&orderInfo.stockProductInfo?'商品名称:'+ orderInfo.stockProductInfo.productName:'商品名称:', context, 10, initHeight+40, 20, 280);
- initHeight = this.drawText(orderInfo&&orderInfo.stockProductInfo?'规格:'+ orderInfo.stockProductInfo.specification:'规格:', context, 10, initHeight+20, 20, 280);
- initHeight = this.drawText(orderInfo&&orderInfo.stockProductInfo?'生产厂家:'+ orderInfo.stockProductInfo.manufacturerName:'生产厂家:', context, 10, initHeight+20, 20, 280);
- initHeight = this.drawText(orderInfo&&orderInfo.stockProductInfo?'产品批号:'+ orderInfo.stockProductInfo.batchNumber:'产品批号:', context, 10, initHeight+20, 20, 280, true);
- initHeight = this.drawText(orderInfo&&orderInfo.stockProductInfo?'生产日期:'+ orderInfo.stockProductInfo.productionDate:'生产日期:', context, 10, initHeight+20, 20, 280);
- initHeight = this.drawText(orderInfo&&orderInfo.stockProductInfo?'有效期至:'+ orderInfo.stockProductInfo.effectiveDate:'有效期至:', context, 10, initHeight+20, 20, 280);
- initHeight = this.drawText(orderInfo&&orderInfo.number?'购买数量:'+ orderInfo.number:'购买数量:', context, 10, initHeight+20, 20, 280);
- initHeight = this.drawText(orderInfo&&orderInfo.totalFee?'商品金额:¥'+ orderInfo.totalFee:'商品金额:¥0', context, 10, initHeight+20, 20, 280);
- initHeight = this.drawText(orderInfo&&orderInfo.discountFee?'优惠金额:-¥'+ orderInfo.discountFee:'优惠金额:-¥0', context, 10, initHeight+20, 20, 280);
- initHeight = this.drawText(orderInfo&&orderInfo.fee?'实付金额:¥'+ orderInfo.fee:'实付金额:¥0', context, 10, initHeight+20, 20, 280);
- initHeight = this.drawText('* 请仔细阅读说明书并按说明使用或在药师指导下购买和使用', context, 10, initHeight+20, 20, 280);
- context.fillText('******************************************************', 10, initHeight+23,280)
- initHeight = this.drawText(orderInfo&&orderInfo.deviceInfo&&orderInfo.deviceInfo.deviceName?'设备名称:'+orderInfo.deviceInfo.deviceName:'设备名称:', context, 10, initHeight+40, 20, 280);
- initHeight = this.drawText(orderInfo&&orderInfo.deviceInfo?'地址:'+ orderInfo.deviceInfo.districtName+orderInfo.deviceInfo.streetAddr:'地址:', context, 10, initHeight+20, 20, 280);
- if(orderInfo&&orderInfo.deviceInfo&&orderInfo.deviceInfo.telphone) initHeight = this.drawText(orderInfo&&orderInfo.deviceInfo&&orderInfo.deviceInfo.telphone?'客服电话:'+ orderInfo.deviceInfo.telphone:'客服电话:', context, 10, initHeight+20, 20, 280, true);
- context.fillText('******************************************************', 10, initHeight+23,280)
- initHeight = this.drawText('* 温馨提醒: 药品属于特殊商品, 非质量问题, 一经售出, 不得退换', context, 10, initHeight+40, 20, 280);
- context.drawImage(QRcode, 75, initHeight+40, 150, 150)
- context.setTextAlign('center')
- initHeight = this.drawText(orderInfo&&orderInfo.qrCodeConfig&&orderInfo.qrCodeConfig.description?orderInfo.qrCodeConfig.description:'', context, 150, initHeight+215, 20, 280);
- context.setTextAlign('left')
- context.fillText('******************************************************', 10, initHeight+53,280)
- initHeight = this.drawText('谢谢您的惠顾!', context, 10, initHeight+70, 20, 280);
- this.initHeight = initHeight+40;
- context.draw(false, setTimeout(function () {
- wx.canvasToTempFilePath({
- x: 0,
- y: 0,
- width: 300,
- height: initHeight+40,
- // destWidth: 2200,
- // destHeight: 8000,
- // fileType: 'jpg',
- canvasId: 'myCanvas',
- quality: 1,
- success: function (res) {
- console.log(res);
- wx.saveImageToPhotosAlbum({
- filePath: res.tempFilePath,
- success(res) {
- wepy.showToast({title: '电子小票已保存至相册!',icon: 'none',duration: 2000});
- },
- fail(err) {
- wepy.showToast({title: '保存失败!',icon: 'none',duration: 2000});
- }
- })
- },
- fail(err) {
- console.log(err);
- }
- })
- },200))
- }
- getWritePhotosAlbum(){
- if(this.qrCodeUrl!=''){
- const _this = this;
- wx.getSetting({
- success(res) {
- if (!res.authSetting['scope.writePhotosAlbum']) {
- wx.authorize({
- scope: 'scope.writePhotosAlbum',
- success() {
- _this.generateImg(_this.qrCodeUrl);
- }
- })
- }else{
- _this.generateImg(_this.qrCodeUrl);
- }
- }
- })
- }else wepy.showToast({title: '正在生成二维码, 请稍等!',icon: 'none',duration: 2000});
- }
- drawText(str, ctx, textAlign, initHeight, lineHeight, maxWidth, time) {
- let lastSubStrIndex = 0;
- let num = 21;
- if(time) num = 32;
- let lineNum = Math.floor(str.length/num)+1;
- for(let i=1; i<=lineNum; i++){
- ctx.fillText(str.substring(lastSubStrIndex, i*num), textAlign, initHeight, maxWidth);// 绘制截取部分
- if(lineNum>1&&i<lineNum) initHeight += lineHeight;
- lastSubStrIndex = i*num;
- }
- return initHeight;
- }
- drawTest(str, ctx, textAlign, initHeight, lineHeight, maxWidth) {
- let lineWidth = 0;
- let lastSubStrIndex = 0;
- for (let i = 0; i <str.length; i++) {
- lineWidth += ctx.measureText(str[i]).width;
- if (lineWidth> 280) {
- ctx.fillText(str.substring(lastSubStrIndex, i), textAlign, initHeight, maxWidth);// 绘制截取部分
- initHeight += lineHeight;
- lineWidth = 0;
- lastSubStrIndex = i;
- }
- if (i == str.length - 1) {// 绘制剩余部分
- ctx.fillText(str.substring(lastSubStrIndex, i + 1), textAlign, initHeight, maxWidth);
- }
- }
- return initHeight;
- }
- drawDashedLine(context, x1, y1, x2, y2, dashLength) {// 传入参数: 上下文, 起点, 终点, 虚线间隔
- dashLength = dashLength ? dashLength : 5 ;
- let deltaX = x2 - x1;// 水平长度
- let deltaY = y2 - y1;// 垂直长度
- let numDashes = Math.floor(
- Math.sqrt(deltaX * deltaX + deltaY * deltaY) / dashLength);// 虚线数量
- for (let i=0; i < numDashes; ++i) {
- context[ i % 2 === 0 ? 'moveTo' : 'lineTo' ]
- (x1 + (deltaX / numDashes) * i, y1 + (deltaY / numDashes) * i);//(deltaX/numDashed) 是指虚线的长度
- }
- context.stroke();
- }
来源: http://www.qdfuns.com/article/34308/bd7a49697915aa09c3c7f4bc74091502.html