您现在的位置是:网站首页>前端技术>uniappuniapp
uniapp 实现海报生成,编译到小程序和公众号
神夜2020-05-05 11:03:28【uniapp】4511人已围观文章来源:神夜个人博客
简介uniapp 实现海报生成,编译到小程序和公众号,注意:小程序在模拟器上可以识别base64位二维码图片,真机上不显示,所以真机上二维码须让后台返回一个路径 ,再通过uni.downloadFile下载获取图片信息。公众号里面远程图片涉及到跨问题,可用base64位图片或者本地项目图片。
uniapp 实现海报生成,编译到小程序和公众号,
注意:
小程序在模拟器上可以识别base64位二维码图片,真机上不显示,所以真机上二维码须让后台返回一个路径 ,再通过uni.downloadFile下载获取图片信息。当然本地图片也是可以的。
公众号里面远程图片涉及到跨域问题,可用base64位图片或者本地项目图片。
二维码图片是后台返回的,返回一个base64位用于公众号,一个路径用于小程序
效果图:
api.js const go = (url)=>{ uni.navigateTo({ url:url}) } //跳转 const pf = ()=>{ // #ifdef MP-WEIXIN return 'xcx'; // #endif // #ifdef H5 return 'gzh'; // #endif } const toast = (str)=>{ return uni.showToast({title:str,icon:'none'})} //提示 //导出模块 export default { go, pf, toast }
<style lang="scss" scoped> .whitebg { height: 100vh; background-repeat: no-repeat; background-size: cover; } .canvas { width: 650rpx; height: 800rpx; border-radius: 30rpx; overflow: hidden; position: fixed; left: 0; right: 0; margin: auto; top: 50%; transform: translateY(-50%); } .canvas image { border-radius: 30rpx; } .canvas canvas { width: 100%; height: 100%; border-radius: 30rpx; display: block; } </style> <template> <view class="whitebg"> <view class="canvas"> <image :src="imgurl" mode="aspectFill" v-show="!canvasShow" @longpress="saveImage"></image> <canvas style="width:650rpx; height:800rpx;" v-show="canvasShow" canvas-id="firstCanvas"></canvas> </view> </view> </template>
< script >
export default {
components:
{
TitleNavigator
},
data() {
return {
orderNo: '',
info: {},
canvasShow: true,
//显示canvas
imgurl: '',
//生成后图片
cover: this.api.img('order_share_cimg.jpg'),
//海报背景图
}
},
onLoad(e) {
this.orderNo = e.orderNo;
this.getewm();
},
methods: {
//获取二维码
async getewm() {
var that = this;
const json = await this.api.apiArray.getOrderQrCode({
method: 'POST',
query: {
orderNo: this.orderNo
}
});
if (json.data.returnCode == 0) {
this.info = json.data.result;
//小程序
if (this.api.pf() == "xcx") {
uni.showLoading({
title: '海报生成中...',
mask: true
}) let that = this;
uni.downloadFile({
url: that.cover,
success(res) {
that.create(res.tempFilePath);
}
})
}
//公众号
if (this.api.pf() == "gzh") {
uni.showLoading({
title: '海报生成中...',
mask: true
}) that.create('/static/images/order_share_cimg.jpg');
}
}
},
create(bg) {
var that = this;
let ctx = uni.createCanvasContext('firstCanvas');
ctx.draw();
ctx.drawImage(bg, 0, 0, uni.upx2px(652), uni.upx2px(800));
if (this.api.pf() == "xcx") {
let ewm = that.info.qrCodeUrl + '?x-oss-process=style/h3';
uni.downloadFile({
url: ewm,
success(res) {
that.create2(res.tempFilePath, ctx);
}
})
}
if (this.api.pf() == "gzh") {
that.create2(that.info.image, ctx);
}
},
create2(ewm, ctx) {
var that = this;
ctx.drawImage(ewm, uni.upx2px(30), uni.upx2px(640), uni.upx2px(130), uni.upx2px(130));
ctx.fillStyle = '#3695FF';
ctx.font = '13rpx MicrosoftYahei'ctx.fillText('¥', uni.upx2px(430), uni.upx2px(595), uni.upx2px(60), uni.upx2px(50)) ctx.font = '25rpx MicrosoftYahei'ctx.fillText(that.info.money, uni.upx2px(455), uni.upx2px(600), uni.upx2px(450), uni.upx2px(50)) ctx.fillStyle = '#888';
ctx.font = '10rpx MicrosoftYahei'that.drawText(ctx, that.info.infoTitle, uni.upx2px(40), uni.upx2px(570), uni.upx2px(50), uni.upx2px(300));
ctx.fillText('订单编号:' + that.info.orderNo, uni.upx2px(165), uni.upx2px(680), uni.upx2px(900), uni.upx2px(60));
ctx.fillText('订单价格:' + that.info.money + '元', uni.upx2px(165), uni.upx2px(720), uni.upx2px(600), uni.upx2px(60));
ctx.lineWidth = 1;
ctx.translate(0.5, 0.5);
ctx.strokeStyle = "#eee";
ctx.moveTo(uni.upx2px(400), uni.upx2px(620));
ctx.lineTo(uni.upx2px(400), uni.upx2px(540));
ctx.stroke();
ctx.draw(false,
function() {
setTimeout(() = >{
uni.canvasToTempFilePath({
canvasId: 'firstCanvas',
success(res) {
uni.hideLoading();
that.imgurl = res.tempFilePath that.canvasShow = false;
},
fail(res) {
uni.showToast({
title: '生成海报失败',
icon: 'none'
});
}
});
},
200);
})
},
//文字换行
drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
var lineWidth = 0;
var lastSubStrIndex = 0; //每次开始截取的字符串的索引
for (let i = 0; i < str.length; i++) {
lineWidth += ctx.measureText(str[i]).width;
if (lineWidth > canvasWidth) {
ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分
initHeight += 16; //16为字体的高度
lineWidth = 0;
lastSubStrIndex = i;
titleHeight += 30;
}
if (i == str.length - 1) { //绘制剩余部分
ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
}
}
// 标题border-bottom 线距顶部距离
titleHeight = titleHeight + 10;
return titleHeight
},
//长按保存图片
saveImage() {
if (this.api.pf() == 'xcx') {
var that = this;
uni.showActionSheet({
itemList: ['保存图片'],
success: (res) = >{
if (res.tapIndex == 0) {
uni.saveImageToPhotosAlbum({
filePath: that.imgurl,
success() {
uni.showToast({
title: '保存成功',
icon: 'none'
})
},
fail(rej) {
uni.showToast({
title: '保存失败',
icon: 'none'
})
}
})
}
},
fail: function(res) {}
});
}
}
}
} < /script>
<style>
</style >
下一篇:uniapp 实现验证码输入
本栏推荐
猜你喜欢
站点信息
- 建站时间:2017-10-24
- 网站程序:Hsycms 3.0
- 文章统计:511条
- 微信公众号:扫描二维码,关注我们