getPoster: function (event){
var _this=this;
//绘图开始
var ctx_height = _this.data.goods_canvas_height;
var ctx_width = _this.data.goods_poster_width;
var ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('#fff')
ctx.fillRect(0, 0, ctx_width, ctx_height)
//店铺头像填充绘制的圆
ctx.setFillStyle('#000')
ctx.save()
ctx.beginPath()
ctx.arc(ctx_width * 0.14 / 2 + 10, ctx_width * 0.14 / 2 + 10, ctx_width * 0.14 / 2, 0, 2 * Math.PI)
ctx.clip()
ctx.drawImage(_this.data.astore_logo_path, 10, 10, ctx_width * 0.14, ctx_width * 0.14)
ctx.restore()
//店铺名称
ctx.setFontSize(14)
ctx.setTextAlign('left')
ctx.setTextBaseline('middle')
ctx.fillText(_this.data.agent4_info.astore_name ? _this.data.agent4_info.astore_name : _this.data.agent4_info.agent4_name, ctx_width * 0.14 + 20, ctx_width * 0.14 / 2 + 10)
var text_start = 10;
//自营图标
if (typeof (_this.data.ziying_width) == 'undefined') {
var ziying_width = 25;
} else {
var ziying_width = _this.data.ziying_width / _this.data.ziying_height * 12;
}
ctx.drawImage(_this.data.ziying_path, text_start, ctx_width * 0.14 + 20, ziying_width, 12)
text_start = text_start + ziying_width + 5;
//跨境图标
if (_this.data.goods_info.cross_border) {
if (typeof (_this.data.kuajing_width) == 'undefined') {
var kuajing_width = 25;
} else {
var kuajing_width = _this.data.kuajing_width / _this.data.kuajing_height * 12;
}
ctx.drawImage(_this.data.kuajing_path, text_start, ctx_width * 0.14 + 20, kuajing_width, 12)
text_start = text_start + kuajing_width + 5;
}
//商品名换行
ctx.setFontSize(12)
ctx.setTextBaseline('top')
var temp_text_start = text_start;
var chr = _this.data.goods_info.goods_name.split("");//这个方法是将一个字符串分割成字符串数组
var temp = "";
var row = [];
for (var a = 0; a < chr.length; a++) {
if (ctx.measureText(temp).width < ctx_width - temp_text_start - 10-10) {
temp += chr[a];
}
else {
temp_text_start = 10;
a--; //这里添加了a-- 是为了防止字符丢失,效果图中有对比
row.push(temp);
temp = "";
}
}
row.push(temp);
//如果数组长度大于2 则截取前两个
if (row.length > 2) {
var rowCut = row.slice(0, 2);
var rowPart = rowCut[1];
var test = "";
var empty = [];
for (var a = 0; a < rowPart.length; a++) {
if (ctx.measureText(test).width < ctx_width - temp_text_start - 10 - 30) {
test += rowPart[a];
}
else {
break;
}
}
empty.push(test);
var group = empty[0] + "..."//这里只显示两行,超出的用...表示
rowCut.splice(1, 1, group);
row = rowCut;
}
for (var b = 0; b < row.length; b++) {
ctx.fillText(row[b], text_start, ctx_width * 0.14 + 20 + b * 15, 300);
ctx.fillText(row[b], text_start + 1, ctx_width * 0.14 + 20 + b * 15, 300);
text_start = 10;
}
//广告
ctx.setFillStyle('#9B9B9B')
var adv_txt = _this.data.goods_info.goods_advword ? _this.data.goods_info.goods_advword : (_this.data.goods_info.gc_name + _this.data.goods_info.goods_name)
var chr = adv_txt.split("");//这个方法是将一个字符串分割成字符串数组
var temp = "";
var row = [];
if (ctx.measureText(adv_txt).width < ctx_width - 20) {
ctx.fillText(adv_txt, 10, ctx_width * 0.14 + 20 + b * 15)
} else {
for (var a = 0; a < chr.length; a++) {
if (ctx.measureText(temp).width < ctx_width - 20 - 30) {
temp += chr[a];
}
else {
temp = temp + "...";
break;
}
}
ctx.fillText(temp, 10, ctx_width * 0.14 + 20 + b * 15)
}
//商品图片
ctx.drawImage(_this.data.goods_image_path, 0, ctx_width * 0.14 + 20 + (b + 1) * 15+10, ctx_width, ctx_width)
//画线
var left_width = parseInt(ctx_width * 0.5328)
var bottom_height = parseInt(ctx_height * 0.15)
ctx.setFillStyle('#E7E7E7')
ctx.fillRect(left_width, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10, 1, bottom_height)
//小程序
ctx.drawImage(_this.data.minipro_code_path, left_width + 10, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width +5, bottom_height, bottom_height)
ctx.setFontSize(10)
ctx.setFillStyle('#9B9B9B')
ctx.fillText('(长按查看商品)', left_width + 5, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 5 + bottom_height)
//国旗
if (_this.data.goods_info.country_id){
if (typeof (_this.data.country_pic_height) == 'undefined') {
var country_pic_width = 14
} else {
var country_pic_width = _this.data.country_pic_width / _this.data.country_pic_height * 14
}
}else{
var country_pic_width=0;
}
//品牌
ctx.setFontSize(12)
ctx.setFillStyle('#000')
ctx.setTextAlign('right')
var brand_text='';
brand_text += _this.data.goods_info.country_name;
if (_this.data.goods_info.country_name && _this.data.goods_info.brand_name){
brand_text += ' | ';
}
brand_text += _this.data.goods_info.brand_name;
var chr = brand_text.split("");//这个方法是将一个字符串分割成字符串数组
var temp = "";
var row = [];
if (ctx.measureText(brand_text).width < left_width - 20 - country_pic_width) {
} else {
for (var a = 0; a < chr.length; a++) {
if (ctx.measureText(temp).width < left_width - 20 - 24 - country_pic_width) {
temp += chr[a];
}
else {
brand_text = temp + "...";
break;
}
}
}
ctx.setTextBaseline('top')
ctx.fillText(brand_text, left_width - 10, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10)
if (_this.data.goods_info.country_id){
console.log(left_width - 10 - ctx.measureText(brand_text).width - country_pic_width);
console.log(ctx_width * 0.14 + 20 + (b + 1) * 15 + ctx_width);
console.log(_this.data.astore_logo_path);
ctx.drawImage(_this.data.country_pic_path, left_width - 10 - ctx.measureText(brand_text).width - country_pic_width - 5, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10, country_pic_width, 14)
}
//销量
ctx.setFontSize(10)
ctx.setFillStyle('#5A5A5A')
ctx.setTextAlign('right')
ctx.fillText('销量:' + _this.data.goods_info.goods_salenum + '件', left_width - 10, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10+20)
//价格
ctx.setFontSize(16)
ctx.setFillStyle('#DB2819')
ctx.setTextAlign('right')
ctx.fillText(_this.data.goods_info.goods_agent2price, left_width - 10, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10 + 20 + 25)
ctx.fillText(_this.data.goods_info.goods_agent2price, left_width - 10-1, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10 + 20 + 25)
var text_width = ctx.measureText(String(_this.data.goods_info.goods_agent2price)).width;
ctx.setFontSize(10)
ctx.setTextAlign('left')
ctx.fillText('¥', left_width - 10-12 - text_width, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10 + 20 + 25+3)
//市场价
ctx.setFontSize(10)
ctx.setTextAlign('right')
ctx.setFillStyle('#9B9B9B')
ctx.fillText('市场价:' + _this.data.goods_info.goods_marketprice, left_width - 10 , ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10 + 20 + 25 + 3+15)
//划线
ctx.fillRect(left_width - 10 - ctx.measureText('市场价:' + _this.data.goods_info.goods_marketprice).width, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10 + 20 + 25 + 3 + 15 + 5, ctx.measureText('市场价:' + _this.data.goods_info.goods_marketprice).width, 1)
ctx.draw()
//绘图结束
_this.setData({pop: { poster: 'active' } });
}
楼主看看这个
https://github.com/AfanSama/esay-canvas
你好,这是需要你配置好的域名信息
好的,谢谢您。线上版会检查这个吗
是的
好的,感谢
不用客气
哇。。官方小哥好快。。看了下。。确实是这个问题,另外还有个下头像的地址。。
http://yudian-pubilc-read.oss-cn-shanghai.aliyuncs.com/
这么长一串代码。。完全没耐心看完啊。。要不你做个代码片段吧
抱歉,我不会用这个代码片段,
我看了一下那个报错提示,说是indexof没定义,可是,这段代码里,没有写indexof,所以我就不太清楚哪里错了
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
光是看,也看不出个所以然来。。还是要跑起来
好的,谢谢您,我去弄一下
wechatide://minicode/tnzgNxmk701y
请您看一下
下班啦。。明天来帮你看哈