微信小程序canvas上传PHP,微信小程序 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 是这么写的

点击保存图片

使用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);

},

这个是看这个开源项目写的:

当然这个项目是可以用的,但是生成不了图片,打开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);

}

}));

},

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值