浏览代码

[canvas][修改]:[生成海报分享到朋友圈]

tags/江西版6.1.0
meo 6 年前
父节点
当前提交
de0cbb3d62
共有 2 个文件被更改,包括 109 次插入95 次删除
  1. +97
    -86
      pages/canvas/index.js
  2. +12
    -9
      pages/canvas/index.wxss

+ 97
- 86
pages/canvas/index.js 查看文件

@@ -12,7 +12,7 @@ Page({
windowWidth: wx.getSystemInfoSync().windowWidth,
windowHeight: wx.getSystemInfoSync().screenHeight,
totalHeight: 0,
mallname:'',//商场名字
mallname: '', //商场名字
qrCodeL: "", //小程序码
couponList: [], //活动劵列表
canvasScale: 1.0 // 画布放大的倍数,因为如果保存的是一倍的分享图片的话,分享图会有点虚。所以保存的时候,canvasScale设置为2.0,wxss 里面的left: 500%;打开注释。就可保存两倍的分享图
@@ -64,9 +64,9 @@ Page({
id: id
};
Http.get({
url: config.api.merchantList,
data: data
})
url: config.api.merchantList,
data: data
})
.then(res => {
that.setData({
data: res.data.list[0]
@@ -88,13 +88,14 @@ Page({
wx.showLoading({
title: "生成中..."
});

var that = this;
// 适配屏幕
let scale = this.data.windowWidth / 375.0;
let scale = this.data.windowWidth / 375.0
console.log(scale)
this.setData({
totalHeight: 767 * scale
});
totalHeight: 667 * scale
})

// 获取Canvas
let ctx = wx.createCanvasContext("myCanvas");
// 获取宽高
@@ -123,27 +124,26 @@ Page({
let src2 = "";
//劵详情海报
if (options && options.couponChannelId) {
src1 =that.data.data.coverImg +`?imageView/2/w/${topImageWidth}/h/${topImageHeight}`;
src1 = that.data.data.coverImg + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}`;
src2 = util.getProxyImgUrl(src1);
} else if (options && options.merchantId) {
//商户详情海报
src1 =that.data.data.merchantImgUrl +`?imageView/2/w/${topImageWidth}/h/${topImageHeight}`;
src1 = that.data.data.merchantImgUrl + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}`;
src2 = util.getProxyImgUrl(src1);
}
wx.getImageInfo({
src: src2,
success: function(res) {
// 绘制白色背景
ctx.setFillStyle("#fbfbfb");
ctx.fillRect(0, 0, that.data.windowWidth, that.data.windowHeight);
ctx.drawImage(res.path, 0, 50, topImageWidth, topImageHeight);
that.roundRect(ctx,12, 270, 320, 150,10)
that.drawOtherImage(ctx, scale);
that.drawOtherContent(ctx, scale,options);
that.drawAvatarimg(ctx, scale);
that.drawqrCode(ctx, scale);
ctx.fillRect(0, 0, that.data.windowWidth, that.data.windowHeight);
ctx.drawImage(res.path, 0, 50, topImageWidth, topImageHeight);
that.roundRect(ctx, 15 * scale, 270 * scale, 325 * scale, 125 * scale, 10);
that.drawOtherImage(ctx, scale);
that.drawOtherContent(ctx, scale, options);
that.drawAvatarimg(ctx, scale);
that.drawqrCode(ctx, scale);
wx.hideLoading();
}
});
@@ -151,52 +151,59 @@ Page({
//绘制微信头像
drawAvatarimg(ctx, scale) {
var that = this;
//商户详情海报
let src1 =that.data.avatarUrl +`?imageView/2/w/${100}/h/${100}`;
let src2 = util.getProxyImgUrl(src1);
//商户详情海报
let src1 = that.data.avatarUrl + `?imageView/2/w/${100}/h/${100}`;
let src2 = util.getProxyImgUrl(src1);
wx.getImageInfo({
src: src2,
success: function(res) {
that.darwAvatarArc(ctx, res.path, 10, 8, 35, 35);
that.darwAvatarArc(ctx, res.path, 10, 8, 35, 35);
}
});
},
// 商户海报绘制
drawOtherContent(ctx, scale,options) {
//昵称
this.drawNormalText(ctx,this.data.nickName,60 * scale,25 * scale,16 * scale,"#000","left","middle",scale);
this.drawNormalText(ctx," 向您推荐",120 * scale,25 * scale,16 * scale,"#848484","left","middle",scale);
this.drawNormalText(ctx,"---"+this.data.mallname+"---",175 * scale,530 * scale,16 * scale,"#000","left","middle",scale);
if (options && options.merchantId) {
//店铺名
this.drawNormalText(ctx,"商户名称:"+this.data.data.merchantName,40 * scale,310 * scale,22 * scale,"#000","left","middle",scale);
this.drawNormalText(ctx,"商户位置:"+this.data.data.shopVoList[0].buildingName+this.data.data.shopVoList[0].floorName+"--"+this.data.data.shopVoList[0].shopNumber,40 * scale,350 * scale,18 * scale,"#F4AA91","left","middle",scale);
this.drawNormalText(ctx,"商户电话:"+this.data.data.merchantLinkPhone,40 * scale,390 * scale,16 * scale,"#000","left","middle",scale);
this.drawNormalText(ctx,"长按识别,进店去看看",155 * scale,510 * scale,16 * scale,"#000","left","middle",scale);
if (this.data.couponList.length > 0) {
for (let i = 0; i < this.data.couponList.length; i++) {
// 第一个商品信息
this.drawNormalText(ctx,this.substrTile(this.data.couponList[1].title),30 * scale,396 * scale,14 * scale,"#000","left","middle",scale);
this.drawNormalText(ctx,"价格:" + this.data.couponList[1].salePrice,30 * scale,416 * scale,14 * scale,"#FF3232","left","middle",scale);
//第二个商品信息
this.drawNormalText(ctx,this.substrTile(this.data.couponList[2].title),145 * scale,396 * scale,14 * scale,"#000","left","middle",scale);
this.drawNormalText(ctx,"价格:" + this.data.couponList[2].salePrice,145 * scale,416 * scale,14 * scale,"#FF3232","left","middle",scale);
//第三个商品信息
this.drawNormalText(ctx,this.substrTile(this.data.couponList[3].title),260 * scale,396 * scale,14 * scale,"#000","left","middle",scale);
this.drawNormalText(ctx,"价格:" + this.data.couponList[3].salePrice,260 * scale,416 * scale,14 * scale,"#FF3232","left","middle",scale);
drawOtherContent(ctx, scale, options) {
let that = this;
//昵称
this.drawNormalText(ctx, this.data.nickName, 43 * scale, 24 * scale, 16 * scale, "#000", "left", "middle", scale);
this.drawNormalText(ctx, " 向您推荐", 120 * scale, 25 * scale, 16 * scale, "#848484", "left", "middle", scale);
this.drawNormalText(ctx, "---" + this.data.mallname + "---", 175 * scale, 500 * scale, 16 * scale, "#000", "left", "middle", scale);
if (options && options.merchantId) {
//店铺名
this.drawNormalText(ctx, "商户名称:" + this.data.data.merchantName, 40 * scale, 310 * scale, 22 * scale, "#000", "left", "middle", scale);
this.drawNormalText(ctx, "商户位置:" + this.data.data.shopVoList[0].buildingName + this.data.data.shopVoList[0].floorName + "--" + this.data.data.shopVoList[0].shopNumber, 40 * scale, 350 * scale, 18 * scale, "#F4AA91", "left", "middle", scale);
this.drawNormalText(ctx, "商户电话:" + this.data.data.merchantLinkPhone, 40 * scale, 390 * scale, 16 * scale, "#000", "left", "middle", scale);
this.drawNormalText(ctx, "长按识别,进店去看看", 155 * scale, 470 * scale, 16 * scale, "#000", "left", "middle", scale);
if (this.data.couponList.length > 0) {
for (let i = 0; i < this.data.couponList.length; i++) {
// 第一个商品信息
this.drawNormalText(ctx, this.substrTile(this.data.couponList[1].title), 30 * scale, 396 * scale, 14 * scale, "#000", "left", "middle", scale);
this.drawNormalText(ctx, "价格:" + this.data.couponList[1].salePrice, 30 * scale, 416 * scale, 14 * scale, "#FF3232", "left", "middle", scale);
//第二个商品信息
this.drawNormalText(ctx, this.substrTile(this.data.couponList[2].title), 145 * scale, 396 * scale, 14 * scale, "#000", "left", "middle", scale);
this.drawNormalText(ctx, "价格:" + this.data.couponList[2].salePrice, 145 * scale, 416 * scale, 14 * scale, "#FF3232", "left", "middle", scale);
//第三个商品信息
this.drawNormalText(ctx, this.substrTile(this.data.couponList[3].title), 260 * scale, 396 * scale, 14 * scale, "#000", "left", "middle", scale);
this.drawNormalText(ctx, "价格:" + this.data.couponList[3].salePrice, 260 * scale, 416 * scale, 14 * scale, "#FF3232", "left", "middle", scale);
}
}
} else if (options && options.couponChannelId) {
this.drawNormalText(ctx, "长按识别,进店去看看", 155 * scale, 470 * scale, 16 * scale, "#000", "left", "middle", scale);
this.drawNormalText(ctx, this.data.data.title, 30 * scale, 295 * scale, 20 * scale, "#000", "left", "middle", scale);
this.drawNormalText(ctx, "售价:" + this.data.data.salePriceStr + "元", 30 * scale, 320 * scale, 15 * scale, "#F4AA91", "left", "middle", scale);
// this.drawNormalText(ctx, "原价:" + this.data.data.salePriceStr, 120 * scale, 340 * scale, 16 * scale, "#DFDCDB", "left", "middle", scale);
this.drawNormalText(ctx, "适用门店:", 30 * scale, 348 * scale, 16 * scale, "#000", "left", "middle", scale);

//适用门店字体的排列
this.data.data.merchantVoList.map(function (file, index) {
let word = file.merchantName;
let metrics = ctx.measureText(word).width;
metrics += metrics;
that.drawNormalText(ctx, that.data.data.merchantVoList[index].merchantName,metrics, 375 * scale, 14 * scale, "#000", "left", "middle", scale);
})
ctx.draw(true);
}
} else if (options && options.couponChannelId) {
this.drawNormalText(ctx,"长按识别,享优惠",155 * scale,500 * scale,16 * scale,"#000","left","middle",scale);
this.drawNormalText(ctx,this.data.data.title,40 * scale,310 * scale,23 * scale,"#000","left","middle",scale);
this.drawNormalText(ctx,"售价:" + this.data.data.salePriceStr,40 * scale,340 * scale,20* scale,"#F4AA91","left","middle",scale);
this.drawNormalText(ctx,"原价:" + this.data.data.salePriceStr,120 * scale,340 * scale,16 * scale,"#DFDCDB","left","middle",scale);
this.drawNormalText(ctx,"适用门店:",40 * scale,370 * scale,16 * scale,"#000","left","middle",scale);
for(var i=0;i<this.data.data.merchantVoList.length;i++){
this.drawNormalText(ctx,this.data.data.merchantVoList[i].merchantName+"、",40 * scale+40*i,400 * scale,16 * scale,"#000","left","middle",scale);
}
ctx.draw(true);
}

ctx.draw(true);
},
//绘制小程序码
@@ -218,7 +225,7 @@ Page({
wx.getImageInfo({
src: src2,
success: function(res) {
ctx.drawImage(res.path,25 * scale,455 * scale,coImageWidth,coImageHeight);
ctx.drawImage(res.path, 25 * scale, 420 * scale, coImageWidth, coImageHeight);
ctx.draw(true);
}
});
@@ -232,12 +239,12 @@ Page({
let cotentImageHeight = parseInt(80 * scale);
for (let i = 0; i < that.data.couponList.length; i++) {
let imageItem = that.data.couponList[i].coverImg;
let src1 =imageItem +`?imageView/2/w/${cotentImageWidth}/h/${cotentImageHeight}`;
let src1 = imageItem + `?imageView/2/w/${cotentImageWidth}/h/${cotentImageHeight}`;
let src2 = util.getProxyImgUrl(src1);
wx.getImageInfo({
src: src2,
success: function(res) {
ctx.drawImage(res.path,35 * scale + i * 110 * scale,300 * scale,cotentImageWidth,cotentImageHeight);
ctx.drawImage(res.path, 35 * scale + i * 110 * scale, 300 * scale, cotentImageWidth, cotentImageHeight);
}
});
}
@@ -324,23 +331,27 @@ Page({
ctx.draw(true);
},
//绘制圆角矩形
roundRect:function(ctx, x, y, w, h, r) {
roundRect: function(ctx, x, y, w, h, r) {
ctx.save();
if (w < 2 * r) {r = w / 2;}
if (h < 2 * r){ r = h / 2;}
if (w < 2 * r) {
r = w / 2;
}
if (h < 2 * r) {
r = h / 2;
}
ctx.beginPath();
// ctx.setStrokeStyle('white');
ctx.setFillStyle('white')
ctx.setFillStyle('#fff')
ctx.setLineWidth(4);
ctx.moveTo(x+r, y);
ctx.arcTo(x+w, y, x+w, y+h, r);
ctx.arcTo(x+w, y+h, x, y+h, r);
ctx.arcTo(x, y+h, x, y, r);
ctx.arcTo(x, y, x+w, y, r);
ctx.moveTo(x + r, y);
ctx.arcTo(x + w, y, x + w, y + h, r);
ctx.arcTo(x + w, y + h, x, y + h, r);
ctx.arcTo(x, y + h, x, y, r);
ctx.arcTo(x, y, x + w, y, r);
ctx.fill();
ctx.closePath();
ctx.draw(true);
},
},
//获取商户优惠劵信息
getCouponList: function(id) {
let that = this;
@@ -352,9 +363,9 @@ Page({
pageSize: 15
};
Http.get({
url: config.api.listByMerchant,
data: data
})
url: config.api.listByMerchant,
data: data
})
.then(res => {
that.setData({
couponList: res.data.page.list,
@@ -384,20 +395,20 @@ Page({
});
});
},
//商场信息
getMallInfo: function() {
let that = this;
// 获取用户信息
Http.get({
url: config.api.getMallInfo,
data: {}
}).then(res => {
console.log(res);
that.setData({
mallname:res.data.name
});
//商场信息
getMallInfo: function() {
let that = this;
// 获取用户信息
Http.get({
url: config.api.getMallInfo,
data: {}
}).then(res => {
console.log(res);
that.setData({
mallname: res.data.name
});
},
});
},
/**
* 保存图片
*/
@@ -472,4 +483,4 @@ Page({
}
});
}
});
});

+ 12
- 9
pages/canvas/index.wxss 查看文件

@@ -1,32 +1,35 @@
/* pages/canvas/index.wxss */

.content {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #f3f3f3;
position: relative;
}
.poster{
width: 100%;
.poster {
height: 100%;
padding: 20rpx;
position: absolute;
top: 0;
left: 0;
padding: 20rpx;
position: absolute;
top: 0;
left: 0;
}

.bottomsave {
width: 100%;
height: 140rpx;
line-height: 140rpx;
margin: auto 0;
bottom:0;
bottom: 0;
left: 0;
right: 0;
border-top: 1px solid #ccc;
box-shadow: 0 0rpx 150rpx #ccc;
background: #fff;
}

.saveposter {
color: #fff;
width: 380rpx;


正在加载...
取消
保存