[已解决]微信小程序定制cavas里面draw方法调用画布就空

时间：2019-05-04 来源：小程序工厂

如题，画布保存图片的方法里面说要在draw方法回调里面写才能保证保存成功，但是调了这个方法页面都成空白了，要怎么保存图片呢

微信小程序开发问题解答

微信小程序开发者回答：

var query = wx.createSelectorQuery();
query.select('.getwidth').boundingClientRect(function (rect) {
var context = wx.createContext('customCanvas');
var scale = that.data.scale;
var lefttext = 35 * scale;
var radius = 240 * scale;
//下载医生图片到本地
wx.downloadFile({
// url: doctor.headImg,
url: img_path + 'doctor.jpg',
success: function (res) {
//下载二维码到本地
wx.downloadFile({
url: img_path + 'cardewm.jpg',
success: function (erweima) {

//白色背景
context.rect(0, 0, 750 * scale, 480 * scale)
context.setFillStyle('#fff')
context.setStrokeStyle("#fff");
context.fill()

//绘制颜色块
context.beginPath();
context.setFillStyle("#fff");
context.setStrokeStyle("#97ccff");
context.rect(0, 316 * scale, Math.round(rect.width) + 5, 24)
context.fill()
context.stroke()

//绘制颜色块
context.beginPath();
context.setFillStyle("#97ccff");
context.setStrokeStyle("#97ccff");
context.rect(0, 270 * scale, Math.round(rect.width) + 5, 24)
context.fill()
context.stroke()

//绘制医院名
context.setFontSize(26);
context.setFillStyle('#333');
context.font = 'normal 20rpx sans-serif';
context.fillText(doctor.hospitalName, 0, 130 * scale);
context.stroke();

//绘制医生名
context.setFontSize(28);
context.setFillStyle('#96ccff');
context.fillText(doctor.name, 0, 212 * scale);
context.stroke();

//绘制科室
context.setFontSize(16);
context.setFillStyle('#fff');
// context.fillText(doctor.section, 15 * scale, 371 * scale);
context.fillText('耳鼻喉科', 15 * scale, 308 * scale);
context.stroke();
//绘制职称
context.setFontSize(16);
context.setFillStyle('#97ccff');
// context.fillText(doctor.jobTitle, 15 * scale, 371 * scale);
context.fillText('主任医师', 15 * scale, 354 * scale);
context.stroke();

//绘制二维码小图标
context.drawImage(erweima.tempFilePath, 0, 390 * scale, 144 * scale, 49 * scale);
//绘制医生图片
context.setStrokeStyle('rgba(0,0,0,0)')
context.save()
context.beginPath()
context.arc(550 * scale, 240 * scale, radius, 0, Math.PI * 2, false);
context.clip()
context.drawImage(res.tempFilePath, 310 * scale, 0, radius * 2, radius * 2);
context.restore()

//绘制英文 SAMRT MEDICAL CARE.
context.setFillStyle('#ccc');
context.setFontSize(22);
context.fillText('SAMRT MEDICAL CARE.', 0, 53 * scale);
context.stroke();
context.save();
context.draw(true)

// 配置分享名片
wx.drawCanvas({
canvasId: 'customCanvas',
actions: context.getActions(),
});

wx.canvasToTempFilePath({

微信小程序开发者回答：

你写错了吧。。代码看看呢。。看不到代码。不知道你错哪里

微信小程序开发者回答：

确实不太会用cavas，是没有闭合路径什么造成的吗，还是别的问题啊，在看文档，找不到问题在哪儿

微信小程序开发者回答：

能做成代码片段吗？
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
首先你存图的代码要写到
ctx.draw(true,()=>{
//写到这里
})

微信小程序开发者回答：

问题是draw调用之前cavas是好好的，调用之后cavas就空白了，回调放进去也是白的啊

微信小程序开发者回答：

不是空白了，但是图片没保存成功。。

微信小程序开发者回答：

能提供代码片段吗？
那是不是图片就没下载成功呢？加了downloadFile白名单的吗？

微信小程序开发者回答：

看本地文件夹图片已经加载到本地了

微信小程序开发者回答：

wx.drawCanvas({
canvasId: 'customCanvas',
actions: context.getActions(),
reserve: true
});
context.draw(true,()=> {

wx.canvasToTempFilePath({
canvasId: 'customCanvas',
success: function (image) {
// 保存cavas绘制名片并获得图片临时路径
console.log(image.tempFilePath)
}
})
})
上面都没有变化，就最后这里变了一点

微信小程序开发者回答：

去掉drawCanvas方法就空白了，这个方法官方说不推荐使用

微信小程序开发者回答：

本文网址：http://www.91bianli.com/weixinxiaochengxu/50704.html

上一篇：[已解决]微信小程序微信公众平台的主体信息变迁

下一篇：微信小程序定制开发插件中使用 wx.downloadFile 报错