小程序
小游戏
企业微信
微信支付
扫描小程序码分享
生成海报的时候报错，这个图在详情页是可以显示的。上边的banner图
图片地址https://files.hzahp.com/imgs/2023/12/09/170212607274523.jpg
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
你好，麻烦提供出现问题的具体机型、微信版本号、系统版本号，以及能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
苹果13mini iOs 17.7
/**
* 绘制canvas
* 使用wx.createSelectorQuery()获取选择器查询对象，获取指定范围内的宽度和高度，并设置到data中，
* 然后在延迟1.5秒后调用startDraw()开始绘制canvas
*/
drawMyCanvas() {
const that = this;
const query = wx.createSelectorQuery().in(this);
query.select('#share__canvas2').fields({
size: true,
scrollOffset: true
}, data => {
console.log("获取宽度", data);
let width = data.width;
let height = data.height;
that.setData({width,height});
setTimeout(() => {
that.startDraw();
}, 1500);
}).exec();
},
* 开始绘制canvas
* 创建Wxml2Canvas对象，设置canvas的id、宽度、高度、背景色等参数，
* 调用draw()方法开始绘制canvas内容，并在绘制完成后隐藏加载框，更新海报图片路径到data中
startDraw() {
let that = this;
// 创建wxml2canvas对象
let drawMyImage = new Wxml2Canvas({
element: 'canvas2', // canvas的id
width: that.data.width * 2, // canvas宽度（实际像素倍增）
height: that.data.height * 2, // canvas高度（实际像素倍增）
obj: that,
background: '#fff',// 背景色
progress(percent) {
console.log(percent);// 绘制进度回调（未使用）
},finish(url) {
console.log("完成", url); // 绘制完成回调，输出绘制完成的图片路径
that.setData({
imgUrl: url // 将绘制完成的图片路径更新到data中
});
// that.handelSaveShareImg(url);
},error(res) {
console.log(res); // 绘制出错回调（未使用）
}
let data = {
list: [{
type: 'wxml',
class: '.share__canvas2 .draw_canvas',
limit: '.share__canvas2',
x: 0,
y: 0
}]
};
drawMyImage.draw(data, this); // 调用Wxml2Canvas的draw方法开始绘制
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
你好，麻烦提供出现问题的具体机型、微信版本号、系统版本号，以及能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）
苹果13mini iOs 17.7
/**
* 绘制canvas
* 使用wx.createSelectorQuery()获取选择器查询对象，获取指定范围内的宽度和高度，并设置到data中，
* 然后在延迟1.5秒后调用startDraw()开始绘制canvas
*/
drawMyCanvas() {
const that = this;
const query = wx.createSelectorQuery().in(this);
query.select('#share__canvas2').fields({
size: true,
scrollOffset: true
}, data => {
console.log("获取宽度", data);
let width = data.width;
let height = data.height;
that.setData({width,height});
setTimeout(() => {
that.startDraw();
}, 1500);
}).exec();
},
/**
* 开始绘制canvas
* 创建Wxml2Canvas对象，设置canvas的id、宽度、高度、背景色等参数，
* 调用draw()方法开始绘制canvas内容，并在绘制完成后隐藏加载框，更新海报图片路径到data中
*/
startDraw() {
let that = this;
// 创建wxml2canvas对象
let drawMyImage = new Wxml2Canvas({
element: 'canvas2', // canvas的id
width: that.data.width * 2, // canvas宽度（实际像素倍增）
height: that.data.height * 2, // canvas高度（实际像素倍增）
obj: that,
background: '#fff',// 背景色
progress(percent) {
console.log(percent);// 绘制进度回调（未使用）
},finish(url) {
console.log("完成", url); // 绘制完成回调，输出绘制完成的图片路径
that.setData({
imgUrl: url // 将绘制完成的图片路径更新到data中
});
// that.handelSaveShareImg(url);
},error(res) {
console.log(res); // 绘制出错回调（未使用）
}
});
let data = {
list: [{
type: 'wxml',
class: '.share__canvas2 .draw_canvas',
limit: '.share__canvas2',
x: 0,
y: 0
}]
};
drawMyImage.draw(data, this); // 调用Wxml2Canvas的draw方法开始绘制
},