html部分
<template>
<view>
<view v-if="poster.opster_state == 1 " class="unpaid_state" @click="generatePoster">
<view class="unpaid_delete">生成海报</view>
</view>
<view class="my-canvas-box" @touchmove.stop.prevent :class="posterInfo.status ? 'show' : 'hide'" @click="posterInfo.status = false">
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
<canvas :style="{'height':height + 'px'}" class="my-canvas" canvas-id="myCanvas" @longpress.stop="saveSharePic"></canvas>
<view class="canvas-tip">长按可保存海报</view>
</scroll-view>
</view>
</view>
</template>
js部分
data() {
return {
width: 0,
height:0
}
},
methods: {
//生成海报
generatePoster() {
let that=this
//计算图片尺寸
uni.getImageInfo({
src: req.data.poster.image.url,
success: function (image) {
let height = 200;
let allwh = image.width + image.height;
let imgwidth = (image.width / allwh).toFixed(2);
let imgheight = (image.height / allwh).toFixed(2);
that.width = imgwidth*1000;
that.height = (imgheight*1000) + height;
// 这里是创建 canvas 绘图上下文
let context = uni.createCanvasContext('myCanvas');
// 这里可以根据自己的需求显示加载动画
uni.showToast({
title: '正在生成海报,请稍后...',
icon: 'none',
duration: 3000
});
// 给整个canvas填充白色背景(这个如果不加上的话,在APP端生成的海报没有白色背景)
context.setFillStyle('#ffffff');
context.fillRect(0, 0,500, that.height);
context.draw();
// 绘制用户昵称
context.setFontSize(14);
context.setFillStyle('#000000');
// 这里根据自己的项目填写用户昵称的字段
//let user = uni.getStorageSync('user')
context.fillText('昵称', 100, 48);
context.setFontSize(12);
context.setFillStyle('#82848a');
context.fillText('早上好!!这是您专属', 100, 68);
// 绘制价格
// context.setFontSize(18);
// context.setFillStyle('red');
// context.fillText(`¥199`, 20, 366);
// // 绘制商品名称,按字符串长度进行分割换行。
that.drawText('描述....', 20, that.height+120-height, context);
that.drawText('长按识别二维码', 20, that.height+160-height, context);
// 绘制头像
uni.downloadFile({
url: '', //用户的头像地址(一定要是网络路径)
success: function(res) {
context.save();
// 这个就是绘制圆形头像
context.beginPath();
context.arc(50, 50, 30, 0, 2 * Math.PI)
context.clip();
context.drawImage(res.tempFilePath, 20, 20, 60, 60);
context.restore();
context.draw(true);
}
});
// 绘制图片详情
uni.downloadFile({
url: '', //分享图片网络地址
success: function(res) {
context.drawImage(res.tempFilePath, 2, 92, that.width, that.height-height);
context.draw(true);
}
});
// 绘制小程序码
uni.downloadFile({
url: '',//二维码图片网络地址
success: function(res) {
context.drawImage(res.tempFilePath, 165, that.height+100-height, 100, 100);
context.draw(true);
}
});
// 绘制完成,让canvas显示【这里看自己项目,是否有loading动画】
that.posterInfo.status = true;
}
});
},
// 海报描述文字换行
drawText(context, x, y, canvas) {
let strArr = [];
let n = 11;
for (let i = 0, l = context.length; i < l / n; i++) {
let a = context.slice(n * i, n * (i + 1));
strArr.push(a);
}
strArr.forEach((item, index) => {
// 限制只能显示4行文字
if (index > 3) {
return;
}
y += 20;
canvas.setFontSize(12);
canvas.setFillStyle('#333333');
canvas.fillText(item, x, y);
});
},
// 长按保存生成的海报
saveSharePic() {
uni.showModal({
title: '提示',
content: '保存海报分享给好友 o(∩_∩)o',
success: function(res) {
if (res.confirm) {
// canvas生成图片
uni.canvasToTempFilePath({
// 这里修改保存的图片格式
fileType: 'jpg',
canvasId: 'myCanvas',
quality: 1,
success: function(res) {
// 保存带哦本地
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function() {
uni.showToast({
title: '保存海报成功',
icon: 'none',
duration: 3000
});
},
fail: function() {
uni.showToast({
title: '保存海报失败',
icon: 'none',
duration: 3000
});
}
});
}
});
}
}
});
}
}
css部分
<style lang="scss">
//海报css
.my-canvas-box {
width: 750rpx;
height: 100%;
position: fixed;
top: 0rpx;
background-color: rgba(0, 0, 0, 0.6);
z-index: 99;
&.hide {
display: none;
}
&.show {
display: block;
}
.canvas-tip {
color: #ffffff;
font-size: 24rpx;
text-align: center;
}
/* #ifdef MP-WEIXIN */
.my-canvas {
width: 100%;
//height: 1700px;
background-color: #ffffff;
margin: 80rpx auto;
}
/* #endif */
/* #ifdef APP-PLUS || H5 */
.my-canvas {
width: 100%;
//height: 1700px;
background-color: #ffffff;
margin-top: 120rpx auto;
}
/* #endif */
}
.scroll-Y {
height: 1000rpx;
}
</style>