微信小程序 wx.canvasToTempFilePath 方法之巨坑

作者：全科
博客：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);
          }
        }));
    },

其实微信小程序不算新事物，出了也有一年多了，但是对于我们团队来说还比较新，这周才准备上项目。。。所以把这个问题记录在此，希望使用此方法的伙伴们留意。。

有任何问题可以在我的公众号留言：

全科龙婷