一分钟解决微信小程序截图（截屏问题）

近期 忙着新产品的开发，已经很久没更新了。这次又来跟大家送福利的，这次是关于小程序截图的问题。相信有的小伙伴又遇到产品经理要求做一个截图功能的，结果大家搜了半天还是一无所获。这就带你们了解微信小程序的前因后果，话不多说上干货。
第一，首先微信是没有提供小程序直接截图的api的，只提供了监听截图事件。
要想实现截图，与其说截图，不如说是将你要截的东西重新画到一张新的画布上（canvas），话不多说上干货。

···········let context = wx.createCanvasContext('canvasOne')  //这里的“share”是“canvas-id”
          	var img = “图片路径"
              context.setFillStyle('#fff')    //这里是绘制白底，让图片有白色的背景
              context.fillRect(0, 0, 0, 0)
              
              context.drawImage(img, 0, 0, 130, 130 ) //绘制商品图片后面的数字分别代表图片左顶角的x，y坐标，右顶点的x，y坐标。
          
              context.setFontSize(10)//字体大小
              context.setFillStyle("#393939")//颜色
              context.fillText('zhanghao', 0, 130)  //绘制描述字体
              console.log("====================================");
              //把画板内容绘制成图片，并回调画板图片路径
              context.draw(false, function () {
                 wx.canvasToTempFilePath({//把当前画布指定区域的内容导出生成指定大小的图片具体可看
                  x: 0,
                  y: 0,
                  width: 50,
				  height: 50,
				  destWidth: 100,
				  destHeight: 100,
                  canvasId: 'canvasOne',//canvasOne是自己在wxml中定义的
                  success: function (res) {                         
                        console.log(res.tempFilePath)；
                      wx.saveImageToPhotosAlbum({//保存图片到系统相册----缺点没有返回该图片的路径
                      	filePath:res.tempFilePath
						  success(res) {
						  }
						})
                      
                 	 },
                  fail(res) {
                    wx.hideLoading()
                    console.log("fail res:")
                    console.log(res)
                  }
                })
              })   

一定要在wxml文件中定义：

//将这句话添加到自己的wxml中

<canvas canvas-id="canvasOne" class="canvas-one" style="width:{{width}}px;height:{{height}}px"></canvas>

这里的宽高是我根据系统的大小定义的变量。可以根据自己的实际情况进行改变。

到这里就结束了，希望帮助你顺利脱坑，以上代码均是我举例说明，请结合自己实际代码进行调试。
希望能够帮到大家哦！IT需要爱与和平😊，最后请大家关注我，以及我的一分钟系列（Android篇和小程序篇）让你一分钟实现相应的功能，成功引起产品经理的注意袄。