Canvas 实现一张分享海报？

前言

Canvas 实现分享海报，这个需求现在已经非常多见了。因为它方便用户分享是一个很好的产品推广方式。

我也写过了好几次这个需求了，不同需求会遇到一些不同的问题。所以我写了一个 Demo 来总结一下我遇到的问题，希望别的小伙伴们可以避坑，同时如果小伙伴遇到我这里没提到的问题也欢迎小伙伴们给我说一下，互相学习😄~~~

开发工具：  uni-app 

 

Part.1  效果展示

 

Part.2  可能遇到的问题

1.  Canvas 内容过多，文字换行

2.  Canvas 内容不确认，从而 Canvas 高度不确定

3.  Canvas 绘入网络图片

4.  产出的 Canvas  图片模糊不清

5.  绘制一个圆形图像 （这个在另外一篇文章做了详述~）https://www.cnblogs.com/langxiyu/p/13226941.html

 

Part.3  解决思路

问题一： 计算每个文字的宽度与可绘入的宽度作比较，大于可绘入宽度则换行绘入

问题二： 先给 Canvas 一个足够高的高度，例如：5000px 。通过计算已经绘入画布元素高度的加总重新给 Canvas 赋值高度

问题三： 绘入网络图片时，需先下载图片进而拿到该图片的临时地址后再绘入  Canvas ，否则可能会导致 Canvas 绘入空白

问题四： Canvas  产出的图片很模糊，只需将输出值扩大原来的两倍即可 ，如：200px 输出就为 400px

 

Part.4  代码展示

HTML

<template>
    <view class="layout">
         <view class="layout-header">
             <canvas v-if="!status"
                     canvas-id='myCanvas' 
                     class="header-canvas"
                     :style="{top: '-' + canvasHeight + 'px', height: canvasHeight + 'px'}"></canvas>
            <uniTransition :duration="500" :mode-class="['slide-bottom']" :show="status">
                <image class="header-img"
                       :class="status? 'active':''"
                       :src="src"
                       :style="{top: '-' + canvasHeight + 'px', height: canvasHeight + 'px'}"
                       @load="placardLoad"  
                       mode=""></image>
            </uniTransition>         
         </view>
         
         <view class="main-occupancy"></view>
         
         <view class="footer-ope-box">
             <view class="ope-box">
                 <button class='btn-seller btn bg-green' hover-class="btn-hover2" @click="saveAlbum">保存到相册</button>
             </view>
         </view>
    </view>
</template>

 

JS

<script>
    import uniTransition from '@/components/uni-transition/uni-transition.vue'
    export default {
        components: {
            uniTransition
        },
        data() {
            return {
                src: '',  // 生成图片地址
                status: false, // 展示状态
                
                canvasHeight: 5000, // canvas 默认高度
                
                // 绘入 Canvas 信息
                obj: {
                    avatar: 'https://pic.liesio.com/2020/06/23/9246b58199bbe.png',
                    nickname: '孙悟空',
                    oldName: '卡卡罗特',
                    race: '被遗弃的赛亚人',
                    magnumOpus : '《龙珠》、《龙珠Z》、《龙珠GT》、《龙珠改》、《龙珠超》等作品中的男主角',
                    summary: '来自贝吉塔行星的赛亚人，幼时以“下级战士”之身份被送往地球，并被武道家孙悟饭收养，因失控变为巨猿将孙悟饭踩死后独自生活在深山，后因结识布尔玛从而踏上寻找龙珠之旅。梦想是不断变强，为追求力量而刻苦修行。基于该角色之影响力，自2015年起日本纪念日协会正式认定每年5月9日为“悟空纪念日”'
                }
            }
        },
        onLoad() {
            uni.showLoading({
                title: '我正在努力...',
                mask: true
            });
            
            // 开始绘制海报
            this.createPlacard()
        },
        methods: {
            // 开始绘制海报
            createPlacard() {
                uni.getImageInfo({
                    src: this.obj.avatar, // 网络图片需先下载，得到临时本地路径，否则绘入 Canvas 可能会出现空白 
                    success: (img)=> {

                        const ctx = wx.createCanvasContext('myCanvas', this);
                        ctx.fillStyle = "#FFFFFF";
                        ctx.fillRect(0, 0, uni.upx2px(750), this.canvasHeight);
                        
                        // 背景图片
                        ctx.drawImage('/static/create-placard-bg.jpg', uni.upx2px(40), uni.upx2px(40), uni.upx2px(670), uni.upx2px(500));
                        
                        // 悟空艳照
                        ctx.drawImage(img.path, uni.upx2px(200), uni.upx2px(95), uni.upx2px(350), uni.upx2px(350));
                        
                        // 设置绘入文本基线
                        ctx.textBaseline = "top";
                        
                        // 姓名
                        ctx.font = `${uni.upx2px(40)}px bold`;
                        ctx.setFillStyle('#333333');
                        ctx.fillText('姓名：', uni.upx2px(40), uni.upx2px(570));
                        ctx.setFillStyle('#1468FF');
                        ctx.fillText(this.obj.nickname || '', uni.upx2px(150), uni.upx2px(570));
                        
                        // 原名
                        ctx.setFillStyle('#333333');
                        ctx.fillText('原名：', uni.upx2px(40), uni.upx2px(630));
                        ctx.setFillStyle('#1468FF');
                        ctx.fillText(this.obj.oldName || '', uni.upx2px(150), uni.upx2px(630));
                        
                        // 种族
                        ctx.setFillStyle('#333333');
                        ctx.fillText('种族：', uni.upx2px(40), uni.upx2px(690));
                        ctx.setFillStyle('#1468FF');
                        ctx.fillText(this.obj.race || '', uni.upx2px(150), uni.upx2px(690));
                        
                        // 作品
                        ctx.setFillStyle('#333333');
                        ctx.fillText('作品：', uni.upx2px(40), uni.upx2px(750));
                        ctx.setFillStyle('#1468FF');
                        if (this.obj.magnumOpus.length > 15) {
                            this.obj.magnumOpus = this.obj.magnumOpus.substring(0, 13) + '...'
                        };
                        ctx.fillText(this.obj.magnumOpus || '', uni.upx2px(150), uni.upx2px(750));
                        
                        // 简介
                        ctx.setFillStyle('#333333');
                        ctx.fillText('简介：', uni.upx2px(40), uni.upx2px(810));
                        // 绘入简介
                        ctx.setFillStyle('#1468FF');
                        this.setSummary(ctx, this.obj.summary, uni.upx2px(520));
                            
                        ctx.draw(true, ()=> {
                            uni.canvasToTempFilePath({
                              x: 0,
                              y: 0,
                              width: uni.upx2px(750),
                              height: this.canvasHeight,
                              destWidth: uni.upx2px(1500),
                              destHeight: this.canvasHeight * 2,
                              canvasId: 'myCanvas',
                              success: (res)=> {
                                 this.src = res.tempFilePath
                              },fail(err) {
                                console.log(err)
                              } 
                            },this)
                        },200); 
                    }
                })    
            },
            
            // 绘入简介
            setSummary(ctx, text, w) {
                /*
                * ctx: Canvas 实例
                * text: 简介
                *  w :  文字可输入的最大宽度
                * */

                let textArr = text.split(''); // 将简介内容每个字符进行切割
                let textArrLen = textArr.length; // 切割字符数组长度
                let str = ''; // 每一行的字符
                let row = []; // 得到全部行
                let lastRowY = null; // 最后一行 Y 坐标
                
                for (let i = 0; i < textArrLen; i++) {
                    // if 每一个字符的宽度 < 当前可绘入宽度  && 当前字符 + 已经累积字符的宽度 <= 当前可绘入宽度
                    // 将字符进行累加
                    // else 将字符 push 进每一行的数组中，并且 str 要从每一行宽度溢出的字符开始累计
                    if (ctx.measureText(textArr[i]).width < w && ctx.measureText(textArr[i] + str).width <= w) {
                        str += textArr[i]
                    } else {
                        row.push(str);
                        str = textArr[i];
                    }
                };
                
                // 最后一行
                row.push(str); 
                
                // 根据宽度会分好每一行需要 push 的字符
                // 循环绘入 Canvas 中
                // lastRowY ：每一行的 Y 坐标， 自定义为 60
                for (let j = 0, rowLen = row.length; j < rowLen; j++) {
                    lastRowY = uni.upx2px(810) + j * uni.upx2px(60);
                    ctx.fillText(row[j], uni.upx2px(150), lastRowY)
                };
                
                // 得到最后一行的 Y 坐标，由于设置了文本基线为 ‘top’ (ctx.textBaseline = "top")
                // 所以 Canvas 高度 = 最后一行的 Y 坐标 + 一行的行距 60 + 背景图片距离顶部距离 40 (为了头部距离和底部距离相等)
                this.canvasHeight = lastRowY + uni.upx2px(60) + uni.upx2px(40);
            },
            
            // 图片加载完成
            placardLoad() {
                this.status = true;
                uni.hideLoading();
            },
            
            // 保存到相册
            saveAlbum() {
                let that = this;
                
                uni.authorize({
                    scope: 'scope.writePhotosAlbum',
                    success() {
                       uni.saveImageToPhotosAlbum({
                          filePath: that.src,
                          success: ()=> {
                              uni.showModal({
                                 title: '保存成功',
                                 content: '已保存到相册,快去看看吧',
                                 showCancel: false
                              })
                          }
                       })
                    },fail() {
                        uni.showModal({
                          title: '提示',
                          content: '您点击了拒绝授权,将无法正常保存图片,点击确定可重新获取授权',
                          success:(res)=> {
                            if (res.confirm) {
                              uni.openSetting({
                                success: (res) => {
                                  if (res.authSetting["scope.writePhotosAlbum"]) {////如果用户重新同意了授权登录
                                    uni.saveImageToPhotosAlbum({
                                        filePath: that.src,
                                        success:()=> {
                                            uni.showModal({
                                                title: '保存成功',
                                                content: '已保存到相册,快去看看吧',
                                                showCancel: false
                                            })
                                        }
                                    })
                                  }
                                }
                              })
                            }
                          }
                        })                
                     }
                })    
            }
        }
    }
</script>

 

 

CSS

<style lang="scss" scoped>
    .layout {    
        .layout-header {
            width: 750upx;
            background:rgba(255,255,255,1);
            .header-canvas, .header-img {
                width: 750upx;
                position: fixed;
                box-shadow:0 5upx 16upx 0 rgba(20,104,255,0.07);
                &.active {
                    position: relative;
                    top: 0upx !important;
                }
            }
        }
        
        .main-occupancy {
            height: 170upx;
        }
        
        .footer-ope-box {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding-bottom: env(safe-area-inset-bottom);
            background-color: #FFFFFF;
            box-shadow:0 5upx 16upx 0 rgba(20,104,255,0.07);
            z-index: 999;
            .ope-box {
                padding: 10upx 20upx;
                .btn-seller {
                    width: 100%;
                    height: 90upx;
                    line-height: 90upx;
                    color: #FFFFFF; 
                    background-color: #1468FF;
                    border-radius:10upx;
                }
            }
        }
    
    }
</style>