微信小程序 点击生成朋友圈分享图
上个月boss交给我个微信小程序的活，告诉我只需要负责前端页面这块，问我多久做完，于是我不知天高地厚的说 一礼拜就能完工，哈哈哈，果然，现实总是那么无情的来打脸了。。。磨磨蹭蹭一共用了将近3个礼拜才算完事。
今天就来总结下遇到的各种坑好了~~~
由于做的是仿照包你说的小程序，这里就借用包你说的截图好啦
（这个做出来是模拟器跟真机上都会显示生成的图片的，鬼知道是为啥。。）
唔，不废话了，直接上代码好啦
A:wxml(一定要加上image标签，如果你没有加的话，那么即使图片生成了，在页面上也是不会显示的，问过大神之后我才知道我之前一直没弄出来是因为我没加image标签)
1 <view hidden="{{maskHidden}}" class="mask"></view> 2 <view class='canvas-box'> 3 <canvas style="width:750rpx; height:940rpx;" canvas-id="myCanvas"/> 4 <image src='{{imagePath}}'></image> 5 </view>
B:wxss（canvas-box的样式运行出来不会受影响，就是千万别写top：0；一定要往下点，要不然会遮盖住原页面本身的东西，导致原页面button按钮全没效果）
1 .mask{position: fixed;top: 0;left: 0; width: 100%;height: 100%;background: rgba(0, 0, 0,1);opacity: 0; display: flex;justify-content: center; align-items: center;} 2 .canvas-box{position: fixed;top: 999999rpx;left: 0}
C:js重点来了（实话实说，我也是照着网上的demo改的，不懂的千万不要来找我问，跪求，本人渣渣一枚。。。）
1 //share.js 2 Page({ 3 data: { 4 imagePath: "/images/shareimg_bg.jpg", 5 imageTx: "http://img0.imgtn.bdimg.com/it/u=1079555585,1801783759&fm=27&gp=0.jpg", 6 imageEwm: "/images/ewm.jpg", 7 maskHidden: true, 8 }, 9 onLoad: function (options) { 10 // 页面初始化 options为页面跳转所带来的参数 11 var size = this.setCanvasSize();//动态设置画布大小 12 // this.createNewImg(); 13 //创建初始化图片 14 }, 15 //适配不同屏幕大小的canvas 生成的分享图宽高分别是 750 和940，老实讲不知道这块到底需不需要，然而。。还是放了，因为不写这块的话，模拟器上的图片大小是不对的。。。 16 setCanvasSize: function () { 17 var size = {}; 18 try { 19 var res = wx.getSystemInfoSync(); 20 var scale = 750;//画布宽度 21 var scaleH = 940 / 750;//生成图片的宽高比例 22 var width = res.windowWidth;//画布宽度 23 var height = res.windowWidth * scaleH;//画布的高度 24 size.w = width; 25 size.h = height; 26 } catch (e) { 27 // Do something when catch error 28 console.log("获取设备信息失败" + e); 29 } 30 return size; 31 }, 32 //将1绘制到canvas的固定 33 settextFir: function (context) { 34 let that=this; 35 var size = that.setCanvasSize(); 36 var textFir = "发了一个红包"; 37 console.log(textFir); 38 context.setFontSize(24); 39 context.setTextAlign("center"); 40 context.setFillStyle("#fee6b5"); 41 context.fillText(textFir, size.w / 2, size.h * 0.25); 42 context.stroke(); 43 }, 44 //将2绘制到canvas的固定 45 settextSec: function (context) { 46 let that = this; 47 var size = that.setCanvasSize(); 48 var textSec = "长按识别小程序，领奖金"; 49 context.setFontSize(14); 50 context.setTextAlign("center"); 51 context.setFillStyle("#fee6b5"); 52 context.fillText(textSec, size.w / 2, size.h * 0.88); 53 context.stroke(); 54 }, 55 //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src 56 createNewImg: function () { 57 var that = this; 58 var size = that.setCanvasSize(); 59 var context = wx.createCanvasContext('myCanvas'); 60 var path = "/images/shareimg_bg.jpg"; 61 var imageTx = that.data.imageTx; 62 var imageEwm = that.data.imageEwm; 63 var imageZw = "/images/xcxewm.png"; 64 context.drawImage(path, 0, 0, size.w, size.h); 65 context.drawImage(imageTx, size.w / 2 - 25, size.h * 0.02, size.w * 0.14, size.w * 0.14); 66 context.drawImage(imageEwm, size.w / 2 - 60, size.h * 0.32, size.w * 0.33, size.w * 0.33); 67 context.drawImage(imageZw, size.w / 2 - 25, size.h * 0.7, size.w * 0.14, size.w * 0.14); 68 this.settextFir(context); 69 this.settextSec(context); 70 console.log(size.w, size.h) 71 //绘制图片 72 context.draw(); 73 //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时 74 wx.showToast({ 75 title: '生成中...', 76 icon: 'loading', 77 duration: 2000 78 }); 79 setTimeout(function () { 80 wx.canvasToTempFilePath({ 81 canvasId: 'myCanvas', 82 success: function (res) { 83 var tempFilePath = res.tempFilePath; 84 console.log(tempFilePath); 85 that.setData({ 86 imagePath: tempFilePath, 87 canvasHidden: false, 88 maskHidden: true, 89 });
//将生成的图片放入到《image》标签里
90 var img = that.data.imagePath; 91 wx.previewImage({ 92 current: img, // 当前显示图片的http链接 93 urls: [img] // 需要预览的图片http链接列表 94 }) 95 }, 96 fail: function (res) { 97 console.log(res); 98 } 99 }); 100 }, 2000); 101 }, 102 103 })
以上，出来的效果是酱紫的 （渣渣实在不知道要怎么把头像和二维码画成圆角矩形的和圆形的了，还好产品大大不挑剔，感谢）
当然 ，如果有小可爱能解决这个问题的话，还望不吝指教~~~
再讲一遍，以上代码，尤其是js代码，是我找网上的demo改的，不是我原创，谢谢
下班。。。
