• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序制作海报

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

近期使用微信小程序制作海报,为了减少各位同学们少走弯路,记录一下吧。

首先我们需要了解一个知识点canvas,另一个知识点,在使用网络图片绘制海报的时候,canvas是不能显示的,这个时候我们就需要使用小程序的API了,

两种方式,第一:wx.getImageInfo获取图片信息,根据临时的path进行绘制,第二种就是通过wx.downloadFile先下载再进行绘制,这里我选第一种方式。

我们在绘制的时候会遇到兼容性问题,这个时候我们就要使用微信小程序的另一个方法wx.getSystemInfo获取手机的基本信息,根据不同分辨率的手机

计算出不同的尺寸比例,然后再绘制图片文字所有海报的信息,最后我们使用wx.canvasToTempFilePath和wx.saveImageToPhotosAlbum将canvas

转化成图片保存在本地。

废话不多说,直接上代码

const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
bgImage: \'https://******/*.img\',
cardImage: \'\',
userImage: \'\',
codeImage: \'\',
name: \'示例员工\',
job: \'员工\',
company: \'公司名称\',
remark: \'TT·全球版\',
sub: \'长按识别二维码\',
type: \'user\',
title: \'\',
card_id: \'\'
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(\'oooo\', options);
wx.showLoading({
title: \'海报生成中\',
mask: true,
});

if (options.type == \'case\' || options.type == \'product\') {
this.setData({
remark: options.name.length > 6 ? options.name.substring(0, 6)+\'...\' : options.name
})
}
let cardInfo = app.data.card_info;
console.log(cardInfo);
this.data.name = cardInfo.card_name;
this.data.job = cardInfo.job;
this.data.company = cardInfo.company;
this.data.userImage = cardInfo.circular_avatar;
this.data.type = options.type;
this.data.card_id = cardInfo.id;
this.data.title = options.title;
if (options.type) {
this.data.cardImage = options.img;
} else {
this.data.cardImage = cardInfo.card_image;
}
this.bgImg();
},


async bgImg() {
await this.getImage(this.data.bgImage).then(rs => {
this.data.bgImage = rs.path;
});
await this.getImage(this.data.cardImage).then(rs => {
this.data.cardImage = rs.path;
});
await this.getImage(this.data.userImage).then(rs => {
this.data.userImage = rs.path;
});

await this.getCodeImage().then(rs => {
if (rs.code === 200) {
this.getImage(rs.data).then(rs => {
this.data.codeImage = rs.path;
this.drawImag();
});
} else {
app.my_showToast(rs.msg);
console.log(5)
}
});
},

 

getImage(url) { //获取图片
return new Promise((resolve) => {
wx.getImageInfo({
src: url,
success: function (res) {
resolve(res);
}
})
})
},

 

getCodeImage() { //获取二维码
return new Promise((resolve) => {
app.ajax({
url: \'/***/***/getCode\',
data: {
cardId: this.data.card_id,
page: \'pages/business_card/business_card\'
},
method: \'POST\'
}).then(rs => {
resolve(rs);
})
})
},

drawImag() {
const ctx = wx.createCanvasContext(\'canvas\');
wx.getSystemInfo({
success: (result) => {
let rateW = result.windowWidth / 375;
ctx.drawImage(this.data.bgImage, 0, 0, result.screenWidth, result.screenHeight * 0.9);
ctx.drawImage(this.data.userImage, 145 * rateW, 10 * rateW, 90 * rateW, 90 * rateW);
ctx.textAlign = \'center\'
ctx.textBaseline = \'middle\'
if (!this.data.type) {
ctx.setFillStyle(\'#687dc7\');
ctx.setFontSize(14);
ctx.fillText(\'这是我的名片,请您收下,谢谢!\', 200 * rateW, 180 * rateW);
ctx.drawImage(this.data.cardImage, 45 * rateW, 200 * rateW, 290 * rateW, 180 * rateW);
ctx.drawImage(this.data.codeImage, 220 * rateW, 390 * rateW, 100 * rateW, 100 * rateW);
} else if (this.data.type == "company") {
ctx.fillStyle = "#f4f4f4";
ctx.fillRect(85 * rateW, 170 * rateW, 200 * rateW, 200 * rateW);
ctx.setFillStyle(\'#5b5b5b\');
let title = this.data.title;
title = title > 10 ? `${title.substring(0,9)}...` : title;
ctx.setFontSize(16);
ctx.fillText(title, 190 * rateW, 355 * rateW);
ctx.drawImage(this.data.cardImage, 95 * rateW, 180 * rateW, 180 * rateW, 160 * rateW);
ctx.drawImage(this.data.codeImage, 140 * rateW, 380 * rateW, 100 * rateW, 100 * rateW);
ctx.setFontSize(16);
ctx.fillText(\'长按识别二维码\', 190 * rateW, 500 * rateW);
} else {
ctx.drawImage(this.data.cardImage, 45 * rateW, 180 * rateW, 290 * rateW, 180 * rateW);
ctx.drawImage(this.data.codeImage, 220 * rateW, 390 * rateW, 100 * rateW, 100 * rateW);
}
ctx.setFontSize(16);
ctx.setFillStyle(\'#4462bd\');
ctx.fillText(this.data.name, 180 * rateW, 120 * rateW)
ctx.setFontSize(12);
ctx.setFillStyle(\'#666\');
ctx.fillText(this.data.job, 240 * rateW, 120 * rateW)
ctx.setFillStyle(\'#666\');
ctx.fillText(this.data.company, 200 * rateW, 140 * rateW);
if (this.data.type == "product" || this.data.type == "case") {
ctx.setFillStyle(\'#333\');
ctx.setFontSize(16)
ctx.fillText(this.data.remark, 100 * rateW, 420 * rateW)
ctx.setFontSize(14)
ctx.setFillStyle(\'#b1b1b1\');
ctx.fillText(this.data.sub, 110 * rateW, 450 * rateW)
} else if (this.data.type == "company") {

} else {
ctx.setFillStyle(\'#333\');
ctx.setFontSize(16)
this.data.remark = "长按或";
this.data.sub = "扫一扫了解TA"
ctx.fillText(this.data.remark, 85 * rateW, 420 * rateW)
ctx.fillText(this.data.sub, 110 * rateW, 450 * rateW)
}
ctx.stroke();
ctx.draw();
wx.hideLoading();
},
});
},


saveImage() {
wx.canvasToTempFilePath({
canvasId: \'canvas\',
success: function (res) {
if (res.errMsg === "canvasToTempFilePath:ok") {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success() {
wx.hideLoading();
wx.showToast({
title: \'保存成功\',
icon: \'success\'
})
wx.previewImage({
current: \'\',
urls: [res.tempFilePath]
})
},
fail(err) {
wx.hideLoading();
wx.showToast({
title: \'保存失败\',
icon: \'none\'
})
}
})
} else {
wx.showToast({
title: \'保存失败\',
icon: \'none\'
})
}
},
fail: function (res) {
wx.showToast({
title: \'保存失败\',
icon: \'none\'
})
}
});
},
//检查授权
saveImageToPhotosAlbum() {
const that = this;
wx.getSetting({
success(res) {
//第一次点击保存,是进入下载逻辑,会自动弹框确认
if (res.authSetting[\'scope.writePhotosAlbum\'] || typeof res.authSetting[\'scope.writePhotosAlbum\'] === \'undefined\') {
//执行下载
that.saveImage()
} else {
//如果点击过取消,之后就进入设置页面
//打开检查权限
wx.openSetting()
}
},
})
}
})

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap