- 作者：全科
- 博客：http://woquanke.com
我们先看一波wx.canvasToTempFilePath的官方文档：
wx.canvasToTempFilePath(OBJECT, this)
把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。
OBJECT参数说明：
| 参数 | 类型 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|
| x | Number | 否 | 画布x轴起点（默认0） | 1.2.0 |
| y | Number | 否 | 画布y轴起点（默认0） | 1.2.0 |
| width | Number | 否 | 画布宽度（默认为canvas宽度-x） | 1.2.0 |
| height | Number | 否 | 画布高度（默认为canvas高度-y） | 1.2.0 |
| destWidth | Number | 否 | 输出图片宽度（默认为width） | 1.2.0 |
| destHeight | Number | 否 | 输出图片高度（默认为height） | 1.2.0 |
| canvasId | String | 是 | 画布标识，传入 canvas/ 的 canvas-id | |
| fileType | String | 否 | 目标文件的类型，只支持 'jpg' 或 'png'。默认为 'png' | 1.7.0 |
| quality | Number | 否 | 图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理 | 1.7.0 |
| success | Function | 否 | 接口调用成功的回调函数 | |
| fail | Function | 否 | 接口调用失败的回调函数 | |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
Bug & Tip
tip: 在 draw 回调里调用该方法才能保证图片导出成功。
示例代码
wx.canvasToTempFilePath({ x: 100, y: 200, width: 50, height: 50, destWidth: 100, destHeight: 100, canvasId: 'myCanvas', success: function(res) { console.log(res.tempFilePath) } })看着还行，能用。但是一个巨坑正在袭来
我们的 wxml 是这么写的
view class="canvas-box" hidden="{{maskHidden}}" canvas style="width: 262px;height: 467px;" canvas-id="mycanvas"/ /view view class="save" hidden="{{maskHidden}}"点击保存图片/view使用Canvas绘制图形
createNewImg:function(QD){ var that = this; var context = wx.createCanvasContext('myCanvas'); var path = "https://xcx.upload.utan.com/article/coverimage/2018/01/25/eyJwaWMiOiIxNTE2ODU0MTg2OTY1NSIsImRvbWFpbiI6InV0YW50b3V0aWFvIn0=";//console.log(QD) //var QD = 'https://xcx.upload.utan.com/article/coverimage/2018/01/25/eyJwaWMiOiIxNTE2ODU2Nzc0Njk3OCIsImRvbWFpbiI6InV0YW50b3V0aWFvIn0='; //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片 //不知道是什么原因，手机环境能正常显示 context.drawImage(path, 0, 0,262,467); context.drawImage(QD, 10, 390,65,65); //context.draw(true); //context.draw(); context.setFillStyle('#832d3b'); context.setFontSize(10); context.fillText(this.data.remainTxt1, 60, 130, 100); context.fillText(this.data.remainTxt3, 80, 155, 100); context.fillText(this.data.remainTxt5, 160, 155, 100); context.fillText(this.data.remainTxt6, 75, 180, 100); context.fillText(this.data.remainTxt8, 140, 180, 100); context.setFillStyle('#e24342'); context.setFontSize(10); context.fillText(this.data.remainTxt2, 65, 155, 100); context.fillText(this.data.remainTxt4, 150, 155, 100); context.fillText(this.data.remainTxt7, 115, 180, 100); //绘制图片 context.draw(); //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时 wx.showToast({ title: '分享图片生成中...', icon: 'loading', duration:1000 }); setTimeout(function(){ wx.canvasToTempFilePath({ canvasId: 'mycanvas', success: function (res) { var tempFilePath = res.tempFilePath; console.log(tempFilePath); that.setData({ imagePath: tempFilePath, maskHidden: false // canvasHidden:true }); wx.hideToast() }, fail: function (res) { console.log(res); } }); },500); },这个是看这个开源项目写的：
- https://github.com/demi520/wxapp-zb
当然这个项目是可以用的，但是生成不了图片，打开tempFilePath直接报错,发现了什么原因了吗？
此处有两个问题：
- 第一：
wxml问价有问题； - 第二：
createNewImg方法的context.draw();有问题；
解决第一个问题：
遇到这个问题怎么办？我是在看不出什么问题了，后来一想，是不是放在hidden属性的view里了，view没有渲染完成，就调用了context.draw()方法
这时候我把wxml修改了一下
view class="canvas-box" hidden="{{maskHidden}}" /view canvas style="width: 262px;height: 467px;" canvas-id="mycanvas"/view class="save" hidden="{{maskHidden}}"点击保存图片/view运行了一波，居然生成图片了，但是绘制的图片还是没有只是一个默认的背景图（也许背景图都没有，直接透明页）
后来我在canvas上增加class='test',相同的问题又出现了
canvas style="width: 262px;height: 467px;" canvas-id="mycanvas" class='test'/现在还不明白什么原因。
反正如果你在canvas上增加属性，你要小心了。
解决第二个问题：
其实在文档里说明了:
tip: 在 draw 回调里调用该方法才能保证图片导出成功。
这个是被开源误导了。。
createNewImg:function(QD){ var that = this; var context = wx.createCanvasContext('myCanvas'); var path = "https://xcx.upload.utan.com/article/coverimage/2018/01/25/eyJwaWMiOiIxNTE2ODU0MTg2OTY1NSIsImRvbWFpbiI6InV0YW50b3V0aWFvIn0=";//console.log(QD) //var QD = 'https://xcx.upload.utan.com/article/coverimage/2018/01/25/eyJwaWMiOiIxNTE2ODU2Nzc0Njk3OCIsImRvbWFpbiI6InV0YW50b3V0aWFvIn0='; //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片 //不知道是什么原因，手机环境能正常显示 context.drawImage(path, 0, 0,262,467); context.drawImage(QD, 10, 390,65,65); //context.draw(true); //context.draw(); context.setFillStyle('#832d3b'); context.setFontSize(10); context.fillText(this.data.remainTxt1, 60, 130, 100); context.fillText(this.data.remainTxt3, 80, 155, 100); context.fillText(this.data.remainTxt5, 160, 155, 100); context.fillText(this.data.remainTxt6, 75, 180, 100); context.fillText(this.data.remainTxt8, 140, 180, 100); context.setFillStyle('#e24342'); context.setFontSize(10); context.fillText(this.data.remainTxt2, 65, 155, 100); context.fillText(this.data.remainTxt4, 150, 155, 100); context.fillText(this.data.remainTxt7, 115, 180, 100); //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时 wx.showToast({ title: '分享图片生成中...', icon: 'loading', duration: 1000 }); //绘制图片 context.draw(false, wx.canvasToTempFilePath({ canvasId: 'mycanvas', success: function (res) { var tempFilePath = res.tempFilePath; console.log(tempFilePath); that.setData({ imagePath: tempFilePath, maskHidden: false // canvasHidden:true }); wx.hideToast() }, fail: function (res) { console.log(res); } })); },其实微信小程序不算新事物，出了也有一年多了，但是对于我们团队来说还比较新，这周才准备上项目。。。所以把这个问题记录在此，希望使用此方法的伙伴们留意。。
有任何问题可以在我的公众号留言：
