showImg() {
wx.showLoading({
title: "正在生成图片...",
mask: true,
});
var that = this;
let bgwidth = that.bgObj.width;
let bgheight = that.bgObj.height;
const screenWidth = wx.getSystemInfoSync().screenWidth; // 获取设备宽度
const screenHeight = wx.getSystemInfoSync().screenHeight; // 获取设备高度
//计算图片宽度
let imgWidth = 320;
let imgHeight = 467;
let imgLeft = (screenWidth - imgWidth) / 2;
const ctx = wx.createCanvasContext("myCanvas");
// ctx.setFillStyle('#f6f6f6')
console.log(that.bgObj, that.iconObj, that.codeObj);
ctx.setFillStyle("#0c0c0c");
ctx.fillRect(0, 0, screenWidth, screenHeight);
ctx.draw();
ctx.drawImage(that.bgObj.path, imgLeft, 20, imgWidth, imgHeight);
ctx.draw(true);
ctx.drawImage(that.codeObj.path, imgLeft + 90, 120, 136, 136);
ctx.draw(true);
ctx.setFontSize(12);
ctx.setFillStyle("#333333");
ctx.fillText(
that.myRecommendData.salesman_id,
screenWidth / 2,
imgHeight / 2 + 48
);
ctx.draw(true);
ctx.setFontSize(10);
ctx.setFillStyle("#ffffff");
ctx.fillText("文字", imgLeft + 30, 420);
ctx.draw(true);
ctx.setFontSize(18);
ctx.setFillStyle("#ffffff");
console.log(that.myRecommendData);
ctx.fillText(that.myRecommendData.salesman_name, imgLeft + 30, 445);
ctx.draw(true);
ctx.drawImage(that.iconObj.path, imgLeft + 145, 435, 13, 13);
// ctx.draw(true);
ctx.setFontSize(16);
ctx.setFillStyle("#ffffff");
ctx.fillText(that.myRecommendData.salesman_phone, imgLeft + 165, 447);
ctx.draw(true);
setTimeout((item) => {
wx.canvasToTempFilePath({
x: imgLeft,
y: 20,
width: imgWidth,
height: imgHeight,
destWidth: imgWidth * 3,
destHeight: (imgHeight + 40) * 3,
canvasId: "myCanvas",
success: function (res) {
wx.hideLoading();
// that.previewImage(res.tempFilePath)
wx.showShareImageMenu({
path: res.tempFilePath,
});
},
fail: function (res) {
console.log(res);
wx.hideLoading();
},
});
}, 1000);
},
小程序canvas分享海报图片
最新推荐文章于 2024-08-19 14:37:24 发布