小程序
小游戏
企业微信
微信支付
扫描小程序码分享
如题,画布保存图片的方法里面说要在draw方法回调里面写才能保证保存成功,但是调了这个方法页面都成空白了,要怎么保存图片呢
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
之前的API已经不能用了哦,这是最新的
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
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) {
//下载二维码到本地
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.stroke()
context.setFillStyle("#97ccff");
context.rect(0, 270 * scale, Math.round(rect.width) + 5, 24)
//绘制医院名
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.setFontSize(16);
context.setFillStyle('#fff');
// context.fillText(doctor.section, 15 * scale, 371 * scale);
context.fillText('耳鼻喉科', 15 * scale, 308 * scale);
//绘制职称
context.setFillStyle('#97ccff');
// context.fillText(doctor.jobTitle, 15 * scale, 371 * scale);
context.fillText('主任医师', 15 * scale, 354 * scale);
//绘制二维码小图标
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.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白名单的吗?
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
之前的API已经不能用了哦,这是最新的
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白名单的吗?