看微信小程序 wx.canvasToTempFilePath 方法之巨坑的解决之道
看微信小程序 wx.canvasToTempFilePath 方法之巨坑的解决之道
我们先看一波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-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);
}
}));
},其实微信小程序不算新事物，出了也有一年多了，但是对于我们团队来说还比较新，这周才准备上项目。。。所以把这个问题记录在此，希望使用此方法的伙伴们留意。。