51dev.com IT技术开发者社区

51dev.com 技术开发者社区

微信小程序wx.canvasToTempFilePath方法运用时遇到的问题及解决办法

IT技术学习阅读(531)2018-06-14 收藏0次评论

我们先看一波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 是这么写的


    

使用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修改了一下


 

运行了一波,居然生成图片了,但是绘制的图片还是没有只是一个默认的背景图(也许背景图都没有,直接透明页)

后来我在canvas上增加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);
          }
        }));
    },

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

以上就是微信小程序wx.canvasToTempFilePath方法运用时遇到的问题及解决办法的全部内容。