上代码
第一步 页面引入 canvas 添加 ID
css
核心部分 js
canvasView: function (object) {
// console.log(object)
let _seif = this;
wx.getSystemInfo({
success: function (res) {
var v = 750 / res.windowWidth;//设计稿尺寸除以 当前手机屏幕宽度
function shiftSize(w) {
return w / v;
};
// 画图适配
const ctx = wx.createCanvasContext('Canvas', _seif);
//内容部分
ctx.save();
ctx.drawImage('../../images/bj.png', 0, 0, 500,3000); //绘制图片
/****
*
*
* 头像
*
*/
ctx.save();
ctx.beginPath() //开始创建一个路径
ctx.arc(shiftSize(250), 50, 30, 0, 2 * Math.PI); //画一个圆形裁剪区域
ctx.setStrokeStyle('#ef5756');
ctx.stroke('#ef5756');
ctx.clip();//裁剪
ctx.drawImage(object.avatarUrl, shiftSize(190), 20, 60, 60); //绘制图片
ctx.restore(); //恢复之前保存的绘图上下文
//姓名
ctx.save();
ctx.setFillStyle("#ffffff");
ctx.setFontSize(12);
ctx.setTextAlign('center');
ctx.fillText(object.nickName, shiftSize(250), 100);
ctx.save();
ctx.setFillStyle("#ffffff");
ctx.setFontSize(10)
ctx.fillText('分享想买清单', shiftSize(250), 116);
//内容部分
ctx.save();
ctx.setFillStyle('#fff');
ctx.fillRect(shiftSize(10), 130, shiftSize(480), object.goodsVos.length * 28.5 + object.goodsVos.length);
//主播
ctx.save();
ctx.setFillStyle("#333");
ctx.setFontSize(10)
ctx.setTextAlign('left');
ctx.fillText(object.title, 10, 146);
ctx.save();
ctx.setFillStyle("#a4a4a4");
ctx.setFontSize(10);
console.log(object)
ctx.fillText(object.types=='00' ? '主播口述' :object.types=='01' ? '官方正式' : '', 10, 164);
ctx.setFillStyle("#a4a4a4");
ctx.setFontSize(10);
ctx.fillText('更新时间' + object.syncTime + '' + object.times, shiftSize(250), 164);
//商品列表
let index = 28;
ctx.save();
for (let i = 0; i < object.goodsVos.length; i++) {
ctx.save();
ctx.setFillStyle("#333");
ctx.setFontSize(10)
ctx.fillText(i+1+'、', shiftSize(16) , 186 + (i * index));
ctx.save();
ctx.setFillStyle("#333");
ctx.setFontSize(10);
if(object.goodsVos[i].name.length>17){
ctx.fillText(object.goodsVos[i].name.substring(0,17)+'...', shiftSize(50), 186 + (i * index));
}else{
ctx.fillText(object.goodsVos[i].name.substring(0,17), shiftSize(50), 186 + (i * index));
}
ctx.stroke();
//线
ctx.save();
ctx.moveTo(shiftSize(10), 194 + (i * index));
ctx.lineTo(shiftSize(488), 194 + (i * index));
ctx.setLineWidth(1);
ctx.setStrokeStyle('#f4f4f4');
ctx.stroke();
//想买 按钮
if (object.goodsVos[i].isFollow == "E") {
ctx.save();
ctx.drawImage('../../images/icon/love.png', shiftSize(410), 176 + (i * index), 14, 14); //绘制图片
ctx.setFillStyle("#fa475e");
ctx.setFontSize(10);
ctx.fillText('想买', shiftSize(444), 186 + (i * index));
}
}
// 二维码
ctx.save();
// ctx.beginPath() //开始创建一个路径
// ctx.arc(shiftSize(264), (_seif.data.view.goodsVos.length * 31.52) + _seif.data.view.goodsVos.length, 50, 0, 2 * Math.PI) //画一个圆形裁剪区域
// ctx.setStrokeStyle('#000')
// ctx.stroke();
// ctx.clip();//裁剪
ctx.drawImage('../../images/code.png', shiftSize(160), (object.goodsVos.length * 30) +140, 100, 100); //绘制图片
ctx.restore(); //恢复之前保存的绘图上下文'
ctx.save();
ctx.setFillStyle("#ffffff")
ctx.fillText('长按图片识别小程序码', shiftSize(160), (object.goodsVos.length * 30) + 260)
ctx.draw(true, function () {
setTimeout(() => {
wx.canvasToTempFilePath({ //写在 draw的回调里面才能生成图片
canvasId: 'Canvas',
success: function (res) {
_seif.setData({
imgs: res.tempFilePath
});
}
})
}, 1000)
})
// 画图适配完
}
});
},
注意 object的数据 格式 可根据需求更改
最后一步 保存到相册
先把微信头像 转化为临时路径
点击保存到相册