小程序
小游戏
企业微信
微信支付
扫描小程序码分享
将老方式的生成海报修改为canvas 2d,在模拟器以及公司的真机都生成没问题,发布上线后,出现好多用户反馈,无法生成海报的情况,能联系的机型包括:iphone 11,华为鸿蒙系统2.0(微信8.0.19),iphone 12max, iphone 13, 华为p40,华为mate40pro,iphone 12, 华为mate 3pro等
是canvas 2d这种方式还存在缺陷吗?
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
代码有么。。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
function sharePic(spuInfo, mpoId, success, fail) {
const query = wx.createSelectorQuery();
query.select('#canvasDetail')
.fields({
node: true,
size: false
}).exec((res) => {
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
canvas.width = 750;
canvas.height = 1331;
let userInfo = wx.getStorageSync("userInfo");
new Promise(function (resolve) { //商品主图
const img = canvas.createImage();
img.src = spuInfo.pdItem.picUrlAll + '?x-oss-process=image/resize,w_750';
img.onload = () => {
ctx.drawImage(img, 48, 176, 654, 654);
resolve();
}
}).then(function () { //门店头像
return new Promise(function (resolve) {
img.src = spuInfo.spShop.picUrlAll;
if (spuInfo.spShop.picUrlAll == undefined) {
img.src = '../../../images/spu/home_shop_default.png';
ctx.drawImage(img, 48, 64, 88, 88);
})
}).then(function () { //海报背景图
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
代码有么。。
function sharePic(spuInfo, mpoId, success, fail) {
const query = wx.createSelectorQuery();
query.select('#canvasDetail')
.fields({
node: true,
size: false
}).exec((res) => {
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
canvas.width = 750;
canvas.height = 1331;
let userInfo = wx.getStorageSync("userInfo");
new Promise(function (resolve) { //商品主图
const img = canvas.createImage();
img.src = spuInfo.pdItem.picUrlAll + '?x-oss-process=image/resize,w_750';
img.onload = () => {
ctx.drawImage(img, 48, 176, 654, 654);
resolve();
}
}).then(function () { //门店头像
return new Promise(function (resolve) {
const img = canvas.createImage();
img.src = spuInfo.spShop.picUrlAll;
if (spuInfo.spShop.picUrlAll == undefined) {
img.src = '../../../images/spu/home_shop_default.png';
}
img.onload = () => {
ctx.drawImage(img, 48, 64, 88, 88);
resolve();
}
})
}).then(function () { //海报背景图
const query = wx.createSelectorQuery();
query.select('#canvasDetail')
.fields({
node: true,
size: false
}).exec((res) => {
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
canvas.width = 750;
canvas.height = 1331;
let userInfo = wx.getStorageSync("userInfo");
new Promise(function (resolve) { //商品主图
const img = canvas.createImage();
img.src = spuInfo.pdItem.picUrlAll + '?x-oss-process=image/resize,w_750';
img.onload = () => {
ctx.drawImage(img, 48, 176, 654, 654);
resolve();
}
}).then(function () { //门店头像
return new Promise(function (resolve) {
const img = canvas.createImage();
img.src = spuInfo.spShop.picUrlAll;
if (spuInfo.spShop.picUrlAll == undefined) {
img.src = '../../../images/spu/home_shop_default.png';
}
img.onload = () => {
ctx.drawImage(img, 48, 64, 88, 88);
resolve();
}
})
}).then(function () { //海报背景图
return new Promise(function (resolve) {
const img = canvas.createImage();
img.src = '../../../images/spu/spu_share_back.png';
img.onload = () => {
ctx.drawImage(img, 0, 0, 750, 1331);
ctx.restore()
resolve();
}
})
}).then(function () { //小程序码 和 头尾文案
return new Promise(function (resolve) {
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.font = 'bold 32px PingFang-SC';
ctx.fillStyle = '#1A1A1A';
ctx.fillText(spuInfo.spShop.name, 152, 68, 550);
ctx.font = '26px PingFang-SC';
ctx.fillStyle = '#868686';
ctx.fillText(spuInfo.spShop.greeting, 152, 114, 550);
let temStr = '';
if (spuInfo.pdItem.groupType == 23) {
temStr = "正品保证 · 售后无忧";
} else if (spuInfo.pdItem.type == 10) {
temStr = "官方授权 · 假一赔十 · 售后无忧"
} else {
temStr = "100%正品 · 假一赔十 · 售后无忧";
}
ctx.fillStyle = '#B2B2B2';
ctx.fillText(temStr, 257, 1242, 445);
const img = canvas.createImage();
let scene = "a_" + spuInfo.pdItem.pdItemId + "_" + userInfo.ucUserShopinfo.customerShopId + "_" + userInfo.ucUserId;
if (mpoId != null) {
scene = scene + "_" + mpoId;
}
img.src = 'https://app.kkid.vip/kshop-appc/weixincode.htm?scene=' + encodeURIComponent(scene) + '&width=250&isHyaline=true',
img.onload = () => {
ctx.drawImage(img, 490, 855, 212, 212);
resolve();
}
})
}).then(function () { //拼团用户头像
return new Promise(function (resolve) {
if (spuInfo.pdItem.itemType == "PINTUAN") {
const img = canvas.createImage();
img.src = '../../../images/order/comment-default_icon.png';
if (userInfo.headUrl != undefined && userInfo.headUrl.length > 10) {
img.src = userInfo.headUrl;
}
img.onload = () => {
ctx.drawImage(img, 80, 725, 68, 68);
ctx.restore()
const img1 = canvas.createImage();
img1.src = '../../../images/spu/spu_share_pin.png';
img1.onload = () => {
ctx.drawImage(img1, 72, 720, 223, 78);
let temStr = "访客"
if (userInfo.headUrl != undefined && userInfo.headUrl.length > 10) {
temStr = userInfo.name;
}
for (let j = 0; j < temStr.length; j++) {
if (ctx.measureText(temStr.substring(0, j)).width > 102) {
temStr = temStr.substring(0, j - 1) + '...';
break;
}
}
ctx.textAlign = 'left';
ctx.font = 'bold 30px PingFang-SC';
ctx.fillStyle = '#363636';
ctx.fillText(temStr, 164, 732, 110);
resolve();
}
}
} else {
resolve();
}
})
}).then(function () { //商品信息
return new Promise(function (resolve) {
//商品标题
let titleHigh = 868;
if (spuInfo.pdItem.itemType == "PINTUAN" || spuInfo.pdItem.itemType == "GIFTPACK") {
titleHigh = 1038;
}
ctx.font = 'bold 28px PingFang-SC';
ctx.fillStyle = '#363636';
let temStr = spuInfo.pdItem.title;
let temStr1 = '';
for (let j = 0; j < temStr.length; j++) {
if (ctx.measureText(temStr.substring(0, j)).width > 410) {
temStr1 = temStr.substring(0, j - 1);
temStr = temStr.substring(j - 1);
break;
}
if (j == temStr.length - 1) {
temStr1 = temStr;
temStr = '';
}
}
ctx.fillText(temStr1, 48, titleHigh, 410);
temStr1 = '';
for (let j = 0; j < temStr.length; j++) {
if (ctx.measureText(temStr.substring(0, j)).width > 410) {
temStr1 = temStr.substring(0, j - 1) + '...';
break;
}
if (j == temStr.length - 1) {
temStr1 = temStr;
}
}
ctx.fillText(temStr1, 48, titleHigh + 40, 410);
//商品价格
let priceHigh = 974;
if (spuInfo.pdItem.itemType == "PINTUAN" || spuInfo.pdItem.itemType == "GIFTPACK") {
priceHigh = 864;
}
let priceLeft = 48;
ctx.font = 'bold 40px PingFang-SC';
ctx.fillStyle = '#FF2F2F';
ctx.fillText('¥', priceLeft, priceHigh + 30, 100);
priceLeft += 40;
let itemSku = spuInfo.itemSku;
if (spuInfo.pdItem.itemType == "PINTUAN") {
itemSku = spuInfo.pintuanItemSku;
}
temStr = itemSku.retailPrice.toString();
ctx.font = 'bold 76px PingFang-SC';
ctx.fillText(temStr, priceLeft, priceHigh, 200);
priceLeft += (ctx.measureText(temStr).width + 4);
if (itemSku.retailPriceMax > itemSku.retailPrice) {
ctx.font = 'bold 32px PingFang-SC';
ctx.fillText('起', priceLeft, priceHigh + 32, 200);
priceLeft += (32 + 4);
}
if (itemSku.retailPriceLined != undefined) {
temStr = '¥' + itemSku.retailPriceLined;
ctx.font = '32px PingFang-SC';
ctx.fillStyle = '#9B9B9B';
ctx.fillText(temStr, priceLeft, priceHigh + 34, 200);
ctx.strokeStyle = '#9B9B9B';
ctx.beginPath()
ctx.lineWidth = 2;
ctx.moveTo(priceLeft, priceHigh + 34 + 15)
ctx.lineTo(priceLeft + ctx.measureText(temStr).width, priceHigh + 34 + 16)
ctx.stroke();
}
ctx.restore()
if (spuInfo.pdItem.itemType == "PINTUAN") {
const img = canvas.createImage();
img.src = '../../../images/spu/spu_share_pintuan.png';
img.onload = () => {
ctx.drawImage(img, 48, 944, 316, 56);
ctx.textAlign = 'center'
ctx.font = 'bold 28px PingFang-SC';
ctx.fillStyle = '#FF2F2F';
temStr = '立省' + (spuInfo.pintuanItemSku.economize) + '元';
ctx.fillText(temStr, 272, 944 + 14, 168);
resolve();
}
} else if (spuInfo.pdItem.itemType == "GIFTPACK") {
const img = canvas.createImage();
img.src = '../../../images/spu/spu_share_gift.png';
img.onload = () => {
ctx.drawImage(img, 48, 944, 292, 56);
resolve();
}
} else {
// 标签
ctx.textAlign = 'center'
let tagLeft = 48;
let tagHigh = 1056;
for (let j = 0; j < spuInfo.pdItem.shareTagObjs.length; j++) {
let temTag = spuInfo.pdItem.shareTagObjs[j];
ctx.font = '18px PingFang-SC';
let temWidth = ctx.measureText(temTag.name).width + 16;
if (temWidth + tagLeft > 410) {
break;
}
ctx.fillStyle = temTag.bgColor;
ctx.fillRect(tagLeft, tagHigh, temWidth, 32);
ctx.fillStyle = temTag.color;
ctx.fillText(temTag.name, tagLeft + temWidth / 2, tagHigh + 7, temWidth);
tagLeft += (temWidth + 10);
}
resolve();
}
})
}).then(function () {
wx.canvasToTempFilePath({
canvas: canvas,
success(res) {
typeof success === 'function' && success(res.tempFilePath)
},
fail() {
if (fail != null && fail) {
typeof fail === 'function' && fail()
}
wx.showToast({
title: '海报生成失败,请稍后再试!',
icon: "none"
})
}
})
})
})
}
https://github.com/Kujiale-Mobile/Painter