CommunityApp/pages/poster/poster.vue

<template>
    <view class="poster_page">
		<swiper class="poster_swiper" previous-margin="110rpx" circular :current="swiperIndex" next-margin="110rpx" @change="onSwiperChange">
		    <swiper-item v-for="(item, index) of list" :key="index">
		        <view class="goods_info_box" :class="{ active: swiperIndex == index }">
		            <image class="goods_image" :src="item.headImgs" mode="scaleToFill"></image>
		            <view class="goods_info">
		                <view class="goods_name">{{item.goodsName}}</view>
		                <view class="price_box">
		                    <view class="price">￥{{item.goodsPrice}}</view>
							<view class="store_price">￥{{item.disCountPrice}}</view>
		                </view>
		                <view class="poster_info">
		                    <view class="info">
		                        <view>扫描二维码访问</view>
		                        <text>{{platformName}}</text>
		                    </view>
		                    <image class="poster_code_image" :src="recommendCodeGoods" mode="aspectFit"></image>
		                </view>
		            </view>
		        </view>
		    </swiper-item>
		</swiper>
        <canvas canvas-id="poster" class="poster_canvas"></canvas>
       
        <view class="share_save_box">
			<view class="push_button" @click="onSaveImg">
				<text style="font-size: 28rpx;">保存图片</text>
			</view>
        </view>
    </view>
</template>
<script>
// 文字换行
function drawtext(text, maxWidth) {
    let textArr = text.split("");
    let len = textArr.length;
    // 上个节点
    let previousNode = 0;
    // 记录节点宽度
    let nodeWidth = 0;
    // 文本换行数组
    let rowText = [];
    // 如果是字母，侧保存长度
    let letterWidth = 0;
    // 汉字宽度
    let chineseWidth = 21;
    // otherFont宽度
    let otherWidth = 10.5;
    for (let i = 0; i < len; i++) {
        if (/[\u4e00-\u9fa5]|[\uFE30-\uFFA0]/g.test(textArr[i])) {
            if(letterWidth > 0){
                if(nodeWidth + chineseWidth + letterWidth * otherWidth > maxWidth){
                    rowText.push({
                        type: "text",
                        content: text.substring(previousNode, i)
                    });
                    previousNode = i;
                    nodeWidth = chineseWidth;
                    letterWidth = 0;
                } else {
                    nodeWidth += chineseWidth + letterWidth * otherWidth;
                    letterWidth = 0;
                }
            } else {
                if(nodeWidth + chineseWidth > maxWidth){
                    rowText.push({
                        type: "text",
                        content: text.substring(previousNode, i)
                    });
                    previousNode = i;
                    nodeWidth = chineseWidth;
                }else{
                    nodeWidth += chineseWidth;
                }
            }
        } else {
            if(/\n/g.test(textArr[i])){
                rowText.push({
                    type: "break",
                    content: text.substring(previousNode, i)
                });
                previousNode = i + 1;
                nodeWidth = 0;
                letterWidth = 0;
            }else if(textArr[i] == "\\" && textArr[i + 1] == "n"){
                rowText.push({
                    type: "break",
                    content: text.substring(previousNode, i)
                });
                previousNode = i + 2;
                nodeWidth = 0;
                letterWidth = 0;
            }else if(/[a-zA-Z0-9]/g.test(textArr[i])){
                letterWidth += 1;
                if(nodeWidth + letterWidth * otherWidth > maxWidth){
                    rowText.push({
                        type: "text",
                        content: text.substring(previousNode, i + 1 - letterWidth)
                    });
                    previousNode = i + 1 - letterWidth;
                    nodeWidth = letterWidth * otherWidth;
                    letterWidth = 0;
                }
            } else{
                if(nodeWidth + otherWidth > maxWidth){
                    rowText.push({
                        type: "text",
                        content: text.substring(previousNode, i)
                    });
                    previousNode = i;
                    nodeWidth = otherWidth;
                }else{
                    nodeWidth += otherWidth;
                }
            }
        }
    }
    if (previousNode < len) {
        rowText.push({
            type: "text",
            content: text.substring(previousNode, len)
        });
    }
    return rowText;
}
let settingWritePhotosAlbum = false;
export default {
    data() {
        return {
			list:[
				{
					goodsName:'麦趣尔纯牛奶 早餐奶 新疆全脂牛奶 营养盒装鲜奶',
					headImgs:'https://cms.gzhylwh.com/visit/hyl/445195a7-5b85-42c0-aa4c-f4bc0ca3d7a0detail.png',
					goodsPrice:'98',
					disCountPrice:'89'
				},
				{
					goodsName:'麦趣尔纯牛奶 早餐奶 新疆全脂牛奶 营养盒装鲜奶',
					headImgs:'https://cms.gzhylwh.com/visit/hyl/445195a7-5b85-42c0-aa4c-f4bc0ca3d7a0detail.png',
					goodsPrice:'98',
					disCountPrice:'89'
				},
				{
					goodsName:'麦趣尔纯牛奶 早餐奶 新疆全脂牛奶 营养盒装鲜奶',
					headImgs:'https://cms.gzhylwh.com/visit/hyl/445195a7-5b85-42c0-aa4c-f4bc0ca3d7a0detail.png',
					goodsPrice:'98',
					disCountPrice:'89'
				},
				{
					goodsName:'麦趣尔纯牛奶 早餐奶 新疆全脂牛奶 营养盒装鲜奶',
					headImgs:'https://cms.gzhylwh.com/visit/hyl/445195a7-5b85-42c0-aa4c-f4bc0ca3d7a0detail.png',
					goodsPrice:'98',
					disCountPrice:'89'
				}
			],
			//平台
			platformName: "新邻社区",
			recommendCodeGoods: "https://cms.gzhylwh.com/visit/hyl/7f858fb8-bb1c-4289-95f9-23572d96862cad0e591c-489b-4869-b6da-84483a2ac559qrcode.jpg",
			//二维码
            swiperIndex: 0,
            posterImgs: [],
            h5SaveImg: ""
        };
    },
    //第一次加载
    onLoad(options) {
		
    },
    computed: {
    },
    //方法
    methods: {
		
        // 轮播图变化
        onSwiperChange(e) {
            this.swiperIndex = e.detail.current;
        },
        // 创建海报
        createPoster() {
            return new Promise((resolve, reject) => {
                uni.showLoading({
                    title: '海报生成中'
                });
                const ctx = uni.createCanvasContext('poster');
                ctx.fillRect(0, 0, 375, 673);
                ctx.setFillStyle("#FFF");
                ctx.fillRect(0, 0, 375, 673);
                uni.downloadFile({
                    url: this.list[this.swiperIndex].headImgs,
                    success: (res) => {
                        if (res.statusCode === 200) {
                            ctx.drawImage(res.tempFilePath, 0, 0, 375, 375);
                            uni.downloadFile({
                                url: this.recommendCodeGoods,
                                success: (res2) => {
                                    if (res.statusCode === 200) {
                                        // 商品标题
                                        ctx.setFontSize(16);
                                        ctx.setFillStyle('#333');
                                        let drawtextList = drawtext(this.list[this.swiperIndex].goodsName, 420);
                                        let textTop = 0;
                                        drawtextList.forEach((item,index) => {
                                            if(index < 2){
                                                textTop = 380 + (index + 1) * 28;
												if(index==0){
													ctx.fillText(item.content, 22, textTop);
												}else{
													if(item.content.length>20){
														ctx.fillText(item.content+"...", 22, textTop);
													}else{
														ctx.fillText(item.content, 22, textTop);
													}
												}
                                            }
                                        });
										// 商品价格
										ctx.setFontSize(22);
										ctx.setFillStyle('#f00');
										ctx.fillText('￥'+(this.list[this.swiperIndex].goodsPrice), 17, textTop + 47);
										// 商品门市价
										ctx.setFontSize(18);
										ctx.setFillStyle('#999');
										let textLeft = 38 + (('￥'+this.list[this.swiperIndex].goodsPrice).length * 13)
										ctx.fillText('￥'+(this.list[this.swiperIndex].disCountPrice), textLeft, textTop + 45);
										// 商品门市价横线
										ctx.beginPath();
										ctx.setLineWidth(1);
										ctx.moveTo(textLeft - 1, textTop + 38);
										ctx.lineTo((textLeft + 18 + (('￥'+this.list[this.swiperIndex].disCountPrice).length * 9)), textTop + 38);
										ctx.setStrokeStyle('#999');
										ctx.stroke();
										// 商品分割线
										ctx.beginPath();
										ctx.setLineWidth(1);
										ctx.moveTo(17, textTop + 70);
										ctx.lineTo(358, textTop + 70);
										ctx.setStrokeStyle('#eee');
										ctx.stroke();
										
										
                                        // 商品价格
          //                               ctx.setFontSize(20);
          //                               ctx.setFillStyle('#f00');
          //                               ctx.fillText(this.list[this.swiperIndex].goodsPrice, 17, textTop + 47);
										// // 商品门市价
										// ctx.setFontSize(18);
										// ctx.setFillStyle('#999');
										// let textLeft = 38 + (this.list[this.swiperIndex].goodsPrice.length * 13)
										// ctx.fillText(this.list[this.swiperIndex].disCountPrice, textLeft, textTop + 45);
										// // 商品门市价横线
										// ctx.beginPath();
										// ctx.setLineWidth(1);
										// ctx.moveTo(textLeft - 1, textTop + 38);
										// ctx.lineTo((textLeft + 5 + this.list[this.swiperIndex].disCountPrice.length * 9), textTop + 38);
										// ctx.setStrokeStyle('#999');
										// ctx.stroke();
                                        // 商品分割线
                                        ctx.beginPath();
                                        ctx.setLineWidth(1);
                                        ctx.moveTo(17, textTop + 70);
                                        ctx.lineTo(358, textTop + 70);
                                        ctx.setStrokeStyle('#eee');
                                        ctx.stroke();
                                        // 长按识别二维码访问
                                        ctx.setFontSize(14);
                                        ctx.setFillStyle('#333');
                                        ctx.fillText("扫描二维码访问", 17, textTop + 136);
                                        // 平台名称
                                        ctx.setFontSize(12);
                                        ctx.setFillStyle('#999');
                                        ctx.fillText(this.platformName, 17, textTop + 170);
                                        // 二维码
                                        ctx.drawImage(res2.tempFilePath, 238, textTop + 88, 120, 120);
                                        ctx.draw(true, () => {
                                            // canvas画布转成图片并返回图片地址
                                            uni.canvasToTempFilePath({
                                                canvasId: 'poster',
                                                width: 375,
                                                height: 673,
                                                success: (res) => {
                                                    if(this.posterImgs[this.swiperIndex]){
                                                        this.posterImgs[this.swiperIndex].temporary = res.tempFilePath;
                                                    }else{
                                                        this.posterImgs[this.swiperIndex] = {
                                                            temporary: res.tempFilePath
                                                        };
                                                    }
                                                    console.log("海报制作成功！");
                                                    resolve(res.tempFilePath);
                                                },
                                                fail: () => {
                                                    uni.hideLoading();
                                                    reject();
                                                }
                                            })
                                        });
                                    } else {
                                        uni.hideLoading();
                                        uni.showToast({
                                            title: '海报制作失败，图片下载失败',
                                            icon: 'none'
                                        });
                                    }
                                },
                                fail: err => {
                                    uni.hideLoading();
                                    uni.showToast({
                                        title: '海报制作失败，图片下载失败',
                                        icon: 'none'
                                    });
                                }
                            });
                        } else {
                            uni.hideLoading();
                            uni.showToast({
                                title: '海报制作失败，图片下载失败',
                                icon: 'none'
                            });
                        }
                    },
                    fail: err => {
                        uni.hideLoading();
                        uni.showToast({
                            title: '海报制作失败，图片下载失败',
                            icon: 'none'
                        });
                    }
                });
            });
        },
        // 保存图片
        async onSaveImg() {
            let imgUrl = "";
            if(this.posterImgs[this.swiperIndex] && this.posterImgs[this.swiperIndex].temporary){
                imgUrl = await this.posterImgs[this.swiperIndex].temporary;
            }else{
                imgUrl = await this.createPoster();
            }
            // #ifdef H5
            this.h5SaveImg = imgUrl;
            uni.hideLoading();
            // #endif
            // #ifdef MP-WEIXIN
            uni.showLoading({
                title: '海报下载中'
            });
            if (settingWritePhotosAlbum) {
                uni.getSetting({
                    success: res => {
                        if (res.authSetting['scope.writePhotosAlbum']) {
                            uni.saveImageToPhotosAlbum({
                                filePath: imgUrl,
                                success: () => {
                                    uni.showToast({
                                        title: '保存成功'
                                    });
                                },
                                complete: () => {
                                    uni.hideLoading();
                                }
                            });
                        } else {
                            uni.showModal({
                                title: '提示',
                                content: '请先在设置页面打开“保存相册”使用权限',
                                confirmText: '去设置',
                                cancelText: '算了',
                                success: data => {
                                    if (data.confirm) {
                                        uni.openSetting();
                                    }
                                },
                                complete: () => {
                                    uni.hideLoading();
                                }
                            });
                        }
                    },
                    complete: () => {
                        uni.hideLoading();
                    }
                });
            } else {
                settingWritePhotosAlbum = true;
                uni.authorize({
                    scope: 'scope.writePhotosAlbum',
                    success: () => {
                        uni.saveImageToPhotosAlbum({
                            filePath: imgUrl,
                            success: () => {
                                uni.showToast({
                                    title: '保存成功'
                                });
                            },
                            complete: () => {
                                uni.hideLoading();
                            }
                        });
                    },
                    complete: () => {
                        uni.hideLoading();
                    }
                });
            }
            // #endif
            // #ifdef APP-PLUS
            uni.showLoading({
                title: '海报下载中'
            });
            uni.saveImageToPhotosAlbum({
                filePath: imgUrl,
                success: () => {
                    uni.hideLoading();
                    uni.showToast({
                        title: '保存成功'
                    });
                }
            });
            // #endif
        }
    }
};
</script>
<style lang="scss" scoped>
.poster_page {
    min-height: 100vh;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
}
.poster_canvas {
    width: 750rpx;
    height: 1324rpx;
    position: fixed;
    top: -10000rpx;
    left: 0rpx;
}
.poster_swiper {
    height: 950rpx;
    width: 100%;
    swiper-item {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .goods_info_box {
            width: 100%;
            height: 100%;
            transform: scale(0.88);
            transition: all 0.4s;
            position: relative;
            overflow: hidden;
            background-color: #FFFFFF;
            &.active {
                transform: scale(1);
            }
            .goods_image {
                width: 100%;
                height: calc(100vw - 220rpx);
            }
            .goods_info {
                padding: 24rpx;
                .goods_name {
                    color: #333;
                    font-size: 30rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
                }
                .price_box {
                    margin-top: 24rpx;
                    display: flex;
                    align-items: center;
                    .price {
                        font-size: 38rpx;
                        color: red;
                    }
                    .store_price {
                        margin-left: 30rpx;
                        font-size: 26rpx;
                        color: #999;
                        text-decoration: line-through;
                    }
                }
                .poster_info {
                    border-top: 2rpx solid #f1f1f1;
                    padding-top: 24rpx;
                    margin-top: 24rpx;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .info {
                        display: flex;
                        flex-direction: column;
                        view {
                            color: #333;
                            font-size: 28rpx;
                        }
                        text {
                            color: #999;
                            font-size: 24rpx;
                            margin-top: 20rpx;
                        }
                    }
                    .poster_code_image {
                        width: 170rpx;
                        height: 170rpx;
                        flex-shrink: 0;
                    }
                }
            }
        }
    }
}
.push_button{
	position:relative;
	color:#FFF;
	display:block;
	text-decoration:none;
	margin:0 auto;
	border-radius:40rpx;
	text-align:center;
	padding:12rpx 80rpx;
	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition: all 0.1s;
	
	background-color: rgba(232, 0, 0,.7);
	-webkit-box-shadow: 2px 4px 2px rgba(232, 0, 0,.5);
	-moz-box-shadow: 2px 4px 2px rgba(232, 0, 0,.5);
	box-shadow: 2px 4px 2px rgba(232, 0, 0,.5);
}
.push_button:active{
	-webkit-box-shadow: 0px 2px 0px rgba(232, 0, 0,.5);
	-moz-box-shadow: 0px 2px 0px rgba(232, 0, 0,.5);
	box-shadow: 0px 2px 0px rgba(232, 0, 0,.5);
	position:relative;
	top:7px;
}


.share_save_box {
    position: fixed;
    bottom: calc((100vh - 950rpx - 140rpx) / 4);
    left: 0;
    z-index: 6;
    width: 100%;
    display: flex;
}
</style>