1.     /**
    2.      * 业务场景：
    3.      * 微信小程序利用canvas生成海报分享图片
    4.      * 唯一一个不同点在于，要根据返回list算canvas的高度(也就是高度是不确定的，图片可以无限长)
    5.      * */
    7.     // 页面结构
    8.     <block>
    9.         <view class="dire-content" wx:if="{{postersShow}}" catchtouchmove="donMove">
    10.             <scroll-view scroll-y class="dire-scroll">
    11.                 <canvas class="inviteCanvas" canvas-id="inviteCanvas" style="width:{{canvasWidth}}rpx;height:{{canvasHeight}}rpx;"> </canvas>
    12.                 <image class="canvasimg" src="{{canvasImg}}" style="width:630rpx;height:{{canvasHeight}}rpx"></image>
    13.             </scroll-view>
    14.         </view>
    15.         <view class="create-poster-wbtn" bindtap="saveInviteCard" wx:if="{{postersShow}}">保存到手机</view>
    16.     </block>
    18.     const app = getApp();
    20.     var that;
    21.     var articleApps = require('../../banyan/logics/articleApps');
    22.     var promise = require("../../vendor/lib/promise.min.js");
    24.     Page({
    26.         data: {
    27.             resultList: [],
    28.             img: "",
    29.             showModal: false, // 遮罩层
    30.             showWeekly: false, // 分享
    31.             postersShow: false, // 生成海报
    32.             canWidth: Number,
    33.             canHeight: Number
    34.         },
    36.         /**
    37.          * 生命周期函数--监听页面加载
    38.          */
    39.         onLoad: function (options) {
    40.             that = this;
    41.             let wkid = options.wkid;
    42.             // let wkid = 8;
    43.             // let title = "生命周期函数--监听页面加载生命周期函数--监听页面加载"
    44.             that.setData({
    45.                 wkid: wkid,
    46.                 title: options.title
    47.                 // title: title
    48.             })
    49.             that.getWeeklyList(wkid);
    51.             // 扫码场景处理
    52.             var scene = options.scene ? decodeURIComponent(options.scene) : false;
    53.             console.log(options);
    54.             if (scene) {
    55.                 let param = scene.split(',');
    56.                 let wkidKey = param[0];
    57.                 // let wkidValue = param[1];
    58.                 if (param.length > 1 && wkidValue !== null) {
    59.                     that.getWeeklyList(wkidKey);
    60.                 } else {
    61.                     wx.switchTab({
    62.                         url: '/pages/index/index',
    63.                     });
    64.                 }
    65.             }
    66.         },
    68.         /**
    69.          * 生命周期函数--监听页面显示
    70.          */
    71.         onShow: function () {
    72.             that.setData({
    73.                 resultList: [],
    74.                 img: "",
    75.                 showModal: false,
    76.                 showWeekly: false,
    77.                 postersShow: false,
    78.             })
    79.             if (!app.globalData.userInfo) {
    80.                 app.getCurrentUser(res => {
    81.                     that.getWeeklyList(that.data.wkid)
    82.                 }, 2);
    83.             } else {
    84.                 that.getWeeklyList(that.data.wkid)
    85.             }
    86.         },
    88.         // 加载页面数据
    89.         getWeeklyList(id) {
    90.             let reqData = {
    91.                 wkid: id
    92.             }
    93.             articleApps.weeklyList({
    94.                 data: reqData
    95.             }, that, data => {
    96.                 that.setData({
    97.                     resultList: data.list,
    98.                     img: data.qrcode
    99.                 })
    100.                 that.dowloadImgFiles(that.data.img);
    101.             });
    102.         },
    105.         // 显示分享弹框
    106.         share() {
    107.             that.setData({
    108.                 showModal: true,
    109.                 showWeekly: true
    110.             })
    111.         },
    113.         // 显示canvas海报
    114.         posters() {
    115.             that.setData({
    116.                 showModal: true,
    117.                 showWeekly: false,
    118.                 postersShow: true,
    119.             })
    120.             that.getCanvasSize();
    121.             that.drawInviteCard();
    122.         },
    124.         // 关闭分享弹框
    125.         unShow() {
    126.             that.setData({
    127.                 showModal: false,
    128.                 showWeekly: false,
    129.                 postersShow: false
    130.             })
    131.         },
    133.         // 下载图片
    134.         downloadImage: function (url) {
    135.             var ulpromise = new promise(function (resolve, reject) {
    136.                 wx.downloadFile({
    137.                     url: url,
    138.                     success: function (res) {
    139.                         resolve(res);
    140.                     },
    141.                     fail: function (e) {
    142.                         reject(e);
    143.                         console.log('download image failed');
    144.                     }
    145.                 });
    146.             });
    147.             return ulpromise;
    148.         },
    150.         // 下载图片到缓存
    151.         dowloadImgFiles(img) {
    152.             try {
    153.                 var imgArr = [];
    154.                 that.downloadImage(img).then(function (res) {
    155.                     imgArr.push(res.tempFilePath);
    156.                     that.data.imgArr = imgArr;
    157.                     return that.downloadImage(img);
    158.                 }.bind(this)).then(function (res) {
    159.                     that.getCanvasSize();
    160.                     that.drawInviteCard();
    161.                 });
    162.             } catch (err) {
    163.                 console.log(err)
    164.                 that.setData({
    165.                     loaded: true,
    166.                 });
    167.                 app.ulToast('加载失败', 0);
    168.             }
    169.         },
    171.         // 获取画布宽高
    172.         getCanvasSize() {
    173.             wx.getSystemInfo({
    174.                 success(res) {
    175.                     that.setData({
    176.                         canWidth: res.windowWidth,
    177.                         canHeight: res.windowHeight
    178.                     })
    179.                 }
    180.             });
    181.         },
    183.         // 绘制邀请卡画布
    184.         drawInviteCard(callback) {
    185.             let imgArr = that.data.imgArr;
    186.             let con = that.data.resultList;
    187.             // 文本list添加序号
    188.             for (let j = 0; j < con.length; j++) {
    189.                 con[j].index = j;
    190.             }
    191.             let ctx = wx.createCanvasContext('inviteCanvas');
    193.             // 设置单个主体内容高度
    194.             let _height = 190;
    196.             // 绘制白色背景
    197.             ctx.setFillStyle('#fff');
    198.             ctx.fillRect(0, 0, that.changeRpx(630), (that.changeRpx(_height) * con.length + that.changeRpx(600)));
    199.             // ctx.clip(); //剪切矩形后 开始画画
    200.             ctx.fill();
    201.             that.setData({
    202.                 canvasWidth: that.changeRpx(630) * 2,
    203.                 // canvasHeight: Math.round((that.changeRpx(_height) * con.length + that.changeRpx(680)) * 2)
    204.                 canvasHeight: (95 * con.length + 300) * 2
    205.             })
    207.             // 文本标题
    208.             // let title = "本周报告更新目录";
    209.             let title = that.data.title;
    210.             ctx.beginPath();
    211.             ctx.setFillStyle('#000');
    212.             ctx.font = "bold 16px Arial";
    213.             // ctx.fillText(title, that.changeRpx(60), that.changeRpx(104));
    214.             that.drawText(ctx, title, that.changeRpx(60), that.changeRpx(104), that.changeRpx(530), that.changeRpx(32), 1);
    217.             // 以下为研究中心本期更新内容
    218.             let title_two = "以下为研究中心本期更新内容";
    219.             ctx.beginPath();
    220.             ctx.setFontSize(that.changeRpx(28));
    221.             ctx.setFillStyle('#747474');
    222.             ctx.font = "nobold 14px Arial";
    223.             ctx.fillText(title_two, that.changeRpx(60), that.changeRpx(150));
    225.             // canvas主体内容
    226.             for (let i = 0; i < con.length; i++) {
    227.                 // 标题
    228.                 let con_title = con[i].index + 1 + '.' + con[i].Title;
    229.                 ctx.beginPath();
    230.                 ctx.setFillStyle('#000');
    231.                 ctx.font = "bold 16px Arial";
    232.                 that.drawText(ctx, con_title, that.changeRpx(60), that.changeRpx(_height) * i + that.changeRpx(260), that.changeRpx(530), that.changeRpx(40), 2);
    234.                 // 内容
    235.                 let con_content = con[i].Summary;
    236.                 ctx.beginPath();
    237.                 ctx.setFillStyle('#747474');
    238.                 ctx.font = "nobold 14px Arial";
    239.                 // 判断10的用意是因为第二行是摘要，要缩略与标题保持一致
    240.                 if (i < 10) {
    241.                     that.drawText(ctx, con_content, that.changeRpx(90), that.changeRpx(_height) * i + that.changeRpx(340), that.changeRpx(470), that.changeRpx(32), 3);
    242.                 } else {
    243.                     that.drawText(ctx, con_content, that.changeRpx(110), that.changeRpx(_height) * i + that.changeRpx(340), that.changeRpx(470), that.changeRpx(32), 3);
    244.                 }
    246.                 // // 设置文本之间距离
    247.                 // let distance = that.changeRpx(160);
    248.                 // // 线框
    249.                 // ctx.moveTo(that.changeRpx(40), that.changeRpx(200) + i * distance);
    250.                 // ctx.lineTo(that.changeRpx(600), that.changeRpx(200) + i * distance);
    251.                 // ctx.lineTo(that.changeRpx(600), that.changeRpx(340) + i * distance);
    252.                 // ctx.lineTo(that.changeRpx(40), that.changeRpx(340) + i * distance);
    253.                 // ctx.lineTo(that.changeRpx(40), that.changeRpx(340) + i * distance);
    254.                 // ctx.closePath(); //闭合路径
    255.                 // ctx.lineWidth = 1;
    256.                 // ctx.strokeStyle = '#F6F6F6';
    257.                 // ctx.stroke();
    258.             }
    260.             // 小程序二维码
    261.             ctx.beginPath();
    262.             ctx.drawImage(imgArr[0], that.changeRpx(230), ((that.changeRpx(_height) * con.length) + that.changeRpx(260)), that.changeRpx(172), that.changeRpx(172));
    263.             ctx.draw();
    265.             setTimeout(() => {
    266.                 that.downloadCanvasImg(0, 0, that.changeRpx(630), (that.changeRpx(_height) * con.length + that.changeRpx(600)), (that.changeRpx(630) * 2), ((that.changeRpx(_height) * con.length + that.changeRpx(630)) * 2));
    267.             }, 500);
    268.         },
    270.         /**
    271.          *
    272.          * @method downloadCanvasImg 把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
    273.          * @param { Number } x 画布区域的左上角横坐标
    274.          * @param { Number } y 画布区域的左上角纵坐标
    275.          * @param { Number } width 画布区域的宽度
    276.          * @param { Number } height 画布区域的高度
    277.          * @param { Number } destWidth 图片的宽度
    278.          * @param { Number } destHeight 图片的高度
    279.          */
    280.         downloadCanvasImg(x, y, width, height, destWidth, destHeight) {
    281.             wx.canvasToTempFilePath({
    282.                 x: x,
    283.                 y: y,
    284.                 width: width,
    285.                 height: height,
    286.                 destWidth: destWidth,
    287.                 destHeight: destHeight,
    288.                 canvasId: 'inviteCanvas',
    289.                 fileType: 'jpg',
    290.                 quality: 2,
    291.                 success(res) {
    292.                     console.log(res)
    293.                     let filePath = res.tempFilePath;
    294.                     that.setData({
    295.                         canvasImg: filePath
    296.                     })
    297.                 },
    298.                 fail(err) {
    299.                     console.log(err);
    300.                 }
    301.             });
    302.         },
    304.         /**
    305.          * 
    306.          * @method centerText canvas文本居中 
    307.          * @param {*} ctx canvas对象
    308.          * @param {*} text 文字
    309.          * @param {*} fontSzie 字体
    310.          * @param {*} color 颜色
    311.          * @param {*} height 绘制高度
    312.          */
    313.         centerText(ctx, text, fontSzie, color, height) {
    314.             ctx.font = fontSzie;
    315.             ctx.fillStyle = color;
    316.             ctx.textAlign = "center";
    317.             ctx.textBaseline = "middle";
    318.             ctx.fillText(text, ctx.width / 2, height);
    319.         },
    321.         /**
    322.          * 
    323.          * @method drawText canvas文本超过隐藏 
    324.          * @param {*} ctx canvas对象
    325.          * @param {*} text 文字
    326.          * @param {*} x X轴
    327.          * @param {*} y Y轴
    328.          * @param {*} maxWidth 文本宽度
    329.          * @param {*} lineHeight 行高
    330.          * @param {*} maxLine 显示行数
    331.          */
    332.         drawText(ctx, text, x, y, maxWidth, lineHeight, maxLine) {
    333.             let arrText = text.split('');
    334.             let line = '';
    335.             let num = 1;
    336.             for (let n = 0; n < arrText.length; n++) {
    337.                 let testLine = line + arrText[n];
    338.                 let metrics = ctx.measureText(testLine);
    339.                 let testWidth = metrics.width;
    340.                 if (testWidth > maxWidth && n > 0) {
    341.                     if (maxLine != undefined && num >= maxLine) {
    342.                         ctx.fillText(line.substr(0, line.length - 1) + '...', x, y);
    343.                         return num;
    344.                     }
    345.                     num++;
    346.                     ctx.fillText(line, x, y);
    347.                     line = arrText[n];
    348.                     y += lineHeight;
    349.                 } else {
    350.                     line = testLine;
    351.                 }
    352.             }
    353.             ctx.fillText(line, x, y);
    354.             return num;
    355.         },
    357.         // canvas圆角
    358.         // drawRoundRect()
    359.         drawRoundRect(ctx, x, y, width, height, radius) {
    360.             ctx.beginPath();
    361.             ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
    362.             ctx.lineTo(width - radius + x, y);
    363.             ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
    364.             ctx.lineTo(width + x, height + y - radius);
    365.             ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
    366.             ctx.lineTo(radius + x, height + y);
    367.             ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
    368.             ctx.closePath();
    369.         },
    372.         // 转换rpx单位为px
    373.         changeRpx(rpx) {
    374.             return rpx * that.data.canWidth / 750;
    375.         },
    377.         // 保存图片
    378.         saveInviteCard(e) {
    379.             app.saveCanvasToAlbum(e, that, res => {
    380.                 app.ulToast('保存成功', 1);
    381.                 that.setData({
    382.                     showModal: false,
    383.                     showWeekly: false,
    384.                     postersShow: false
    385.                 });
    386.             });
    387.         },
    388.     })
    389. //