<view style='width:100%;'>
<image style='width:100%;' src="../../img/china_img.png"></image>
</view>
<view class='CONTECT'>欢迎你是神啊深刻的三大杀菌剂啥都会受到大叔大婶帝国时代干</view>
<view style='width:100%;margin-top:0.5rem;'>
<view class='CREATETIME'>2016-11-03</view>
<view class='both'></view>
</view><view class='QRCODE'>
<image style='width:100%;height:100%;' src="../../img/china_img.png"></image>
</view>
<canvas canvas-id='share' style='width:100%;height:100%;' hidden='{{canvasHidden}}'></canvas>
<view class='more' bindtap='saveImageToPhotosAlbum'>保存图片</view>
const app = getApp();
let wx_request_zr = require('../../utils/wx_request_zr.1.0.1.js');
var that;
Page({/*** 页面的初始数据*/data: {canvasHidden: true, //设置画板的显示与隐藏，画板不隐藏会影响页面正常显示avatarUrl: '', //用户头像nickName: '', //用户昵称wxappName: "端端的", //小程序名称shareImgPath: '',screenWidth: '', //设备屏幕宽度description: "撒的撒打算的撒打算大的", //奖品描述FilePath: '', //头像路径PICTURE:'../../img/timg.jpg',erweima:'../../img/aaa.jpg',ttim:"../../img/ttim.png",textn:"电话萨达哈时间快点哈时间看到黄金卡速度哈时间打哈时间看到哈萨克的哈萨克记得哈时间快点哈时间快点哈时间肯定会爱仕达多进口红酒斯卡迪哈时间快点哈时间看到哈萨克带回家啊"},onLoad: function (options) {var that = thisvar userInfo, nickName, avatarUrlconst context = wx.createCanvasContext('myCanvas')//获取用户信息，头像，昵称之类的数据wx.getUserInfo({success: function (res) {console.log(res);userInfo = res.userInfonickName = userInfo.nickNameavatarUrl = userInfo.avatarUrlthat.setData({avatarUrl: res.userInfo.avatarUrl,nickName: res.userInfo.nickName,})wx.downloadFile({url: res.userInfo.avatarUrl})}})//获取用户设备信息，屏幕宽度wx.getSystemInfo({success: res => {that.setData({screenWidth: res.screenWidth})console.log(that.data.screenWidth)}})},//定义的保存图片方法saveImageToPhotosAlbum:function () {wx.showLoading({title: '保存中...',})var that = this;//设置画板显示，才能开始绘图that.setData({canvasHidden: false})var unit = that.data.screenWidth / 375var path1 = that.data.ttim //白底var avatarUrl = that.data.avatarUrlconsole.log(avatarUrl + "头像")//var path2 = that.data.PICTUREvar path3 = that.data.erweima //二维码//var path4 = that.data.PICTUREvar path5 = that.data.PICTURE //顶图var textn = that.data.textn //描述//var unlight = "../../img/china_img.png"var nickName = that.data.nickNameconsole.log(nickName + "昵称")var context = wx.createCanvasContext('share')var description = that.data.description//var wxappName = "来「 " + that.data.wxappName + " 」试试运气"context.drawImage(path1, 0, 0, unit * 480, unit * 800)// context.drawImage(path4, unit * 164, unit * 40, unit * 50, unit * 50)//context.drawImage(path2, unit * 48, unit * 120, unit * 280, unit * 280)context.drawImage(path5, unit * 0, unit * 0, unit * 480, unit * 160)// context.drawImage(unlight, unit * 82, unit * 145, unit * 22, unit * 32)// context.drawImage(unlight, unit * 178, unit * 145, unit * 22, unit * 32)// context.drawImage(unlight, unit * 274, unit * 145, unit * 22, unit * 32)// context.drawImage(unlight, unit * 82, unit * 240, unit * 22, unit * 32)// context.drawImage(unlight, unit * 178, unit * 240, unit * 22, unit * 32)// context.drawImage(unlight, unit * 274, unit * 240, unit * 22, unit * 32)context.drawImage(path3, unit * 20, unit * 385, unit * 80, unit * 55)// context.drawImage(path4, 48, 200, 280, 128)context.setFontSize(14)context.setFillStyle("#999")// context.fillText(textn, unit * 10, unit * 180)context.fillText("长按识别图中二维码", unit * 120, unit * 418)//context.fillText(wxappName, unit * 90, unit * 428)//tou 删除var text = that.data.textn;//这是要绘制的文本var chr = text.split("");//这个方法是将一个字符串分割成字符串数组var temp = "";var row = [];context.setFontSize(16)context.setFillStyle("#000")for (var a = 0; a < chr.length; a++) {if (context.measureText(temp).width < 800) {temp += chr[a];}else {a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比row.push(temp);temp = "";}}row.push(temp);//如果数组长度大于2 则截取前两个if (row.length > 3) {var rowCut = row.slice(0, 3);var rowPart = rowCut[i];var test = "";var empty = [];for (var a = 0; a < rowPart.length; a++) {if (context.measureText(test).width < 380) {test += rowPart[a];}else {break;}}empty.push(test);var group = empty[i] + "..."//这里只显示两行，超出的用...表示rowCut.splice(3, 4, group);row = rowCut;}for (var b = 0; b < row.length; b++) {context.fillText(row[b], 10, 30 + b * 130, 200);}
//di//把画板内容绘制成图片，并回调 画板图片路径context.draw(false, function () {wx.canvasToTempFilePath({x: 0,y: 0,width: unit * 375,height: unit * 462.5,destWidth: unit * 480,destHeight: unit * 800,canvasId: 'share',success: function (res) {that.setData({shareImgPath: res.tempFilePath})if (!res.tempFilePath) {wx.showModal({title: '提示',content: '图片绘制中，请稍后重试',showCancel: false})}console.log(that.data.shareImgPath)//画板路径保存成功后，调用方法吧图片保存到用户相册wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,//保存成功失败之后，都要隐藏画板，否则影响界面显示。success: (res) => {console.log(res)wx.hideLoading()that.setData({canvasHidden: true})},fail: (err) => {console.log(err)wx.hideLoading()that.setData({canvasHidden: true})}})}})});},})
