前端 - uniapp app端实现海报功能?

Question

uniapp项目app端实现下载海报
现在的代码如下：
html

<uni-popup ref="popup" type="dialog" @close="handleClose" @confirm="handleConfirm">
        <view class="content">
            <view class="close" @tap="handleClose">
                <image style="width: 40rpx;height: 40rpx;" src="../../static/img/chaIcon.png" mode=""></image>
            </view>
            <view
                style="line-height: 80rpx;height: 80rpx;text-align: center;color: #fff;font-size: 36rpx;padding-top: 100rpx;">
                {{ school_name }}
            </view>
            <view style="height: 80rpx;text-align: center;color: #fff;font-size: 36rpx;">
                {{ classes_name }}
            </view>
            <image :src="codeImg" mode="aspectFill"></image>

            <view>
                <u-button class="custom-style" @click="handleCode(codeImg)">下载海报</u-button>
            </view>
            <view class="code_ing">
                <image src="@/static/img/codeImg.jpg" mode="aspectFill"></image>
            </view>
        </view>
    </uni-popup>

js

逻辑
    handleCode(codeImg) {
            if (uni.getSystemInfoSync().platform === 'android' || uni.getSystemInfoSync().platform === 'ios') {
                uni.saveImageToPhotosAlbum({
                    filePath: codeImg,
                    success: function() {
                        uni.showToast({
                            title: '保存成功',
                            icon: 'success'
                        });
                    },
                    fail: function(err) {
                        uni.showToast({
                            title: '保存失败',
                            icon: 'none'
                        });
                    }
                });
            } else {
                uni.showToast({
                    title: '请在App中下载二维码',
                    icon: 'none'
                });
            }
        }

原先是下载二维码，现在换成下载海报，海报里显示@/static/img/codeImg.jpg，school_name、classes_name跟一个背景色background: #f3af1e，还有二维码codeImg，下载的海报图样式跟下面的图片一样，关闭跟下载按钮不要，其他都要

大佬们，修改上面的代码如何实现下载海报功能

现在js逻辑改成这样的了
// 点击下载海报按钮

generateAndDownloadPoster(){
            let classId = {  
                class_id: this.classData.class_id,  
                school_id: this.classData.school_id,  
                type: 1  
            };
            getClassQRcodeApi(classId).then(res => {  
                if (res.status == 200) {
                    this.generatePoster(res.data.qr_url, res.data.school_name, res.data.classes_name);
                    console.log(this.generatePoster);
                }  
            }).catch(error => {  
                    console.error('Error fetching QR code:', error);  
            });  
        },
        generatePoster(qrUrl, schoolName, className) {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            // 设置画布大小  
            const width = 800; 
            const height = 1200; 
            canvas.width = width;  
            canvas.height = height; 
            // 填充背景色  
            ctx.fillStyle = '#f3af1e';
            ctx.fillRect(0, 0, width, height);
            
            // 绘制文本（学校名称和班级名称）  
            ctx.font = '36px Arial';  
            ctx.fillStyle = '#fff';  
            ctx.fillText(schoolName, 100, 200);  
            ctx.fillText(className, 100, 300);
            
            // 绘制二维码  
            const qrImage = new Image();
            qrImage.onload = () => {  
                // 计算二维码的合适大小并居中  
                const qrWidth = 200;  
                const qrHeight = qrWidth * qrImage.height / qrImage.width;  
                const qrX = (width - qrWidth) / 2;  
                const qrY = (height - qrHeight) / 2 + 200; 

                ctx.drawImage(qrImage, qrX, qrY, qrWidth, qrHeight);  

                // 转换Canvas为图片并下载  
                canvas.toBlob(blob => {  
                        const url = URL.createObjectURL(blob);  
                        const a = document.createElement('a');  
                        a.href = url;  
                        a.download = 'poster.png';  
                        document.body.appendChild(a);  
                        a.click();  
                        document.body.removeChild(a);  
                        URL.revokeObjectURL(url);  
                    });  
                qrImage.src = qrUrl;  
            }  
        }

Answer 1

这个要用canvas创建一个画布把内容画出啦，相对来说还是比较简单的,具体实现需自行实现，下面代码仅供参考

主要涉及

1、图片绘制

function circleImg(ctx, img, x, y, r, borderWidth, borderColor) {
    ctx.save();
    ctx.beginPath();
    var d =2 * r;
    var cx = x + r;
    var cy = y + r;
    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
    ctx.setFillStyle('transparent')
    ctx.fill()//保证图片无bug填充
    ctx.clip();
    ctx.drawImage(img, x, y, d, d);
    ctx.restore();
}

2、文案绘制

function drawText(ctx, str, x, y, fontSize, color, maxWidth, align="left") {
    try{
        ctx.save();
        ctx.setFontSize(fontSize); //设置标题字体大小
        ctx.setFillStyle(color); //设置标题文本颜色
        let _strLastIndex = 0; //每次开始截取的字符串的索引
        let _strlineW = 0;
        ctx.setTextAlign(align);
        for (let i = 0; i < str.length; i++) {
            _strlineW += ctx.measureText(str[i]).width;
            if (_strlineW > maxWidth) {
                ctx.fillText(str.substring(_strLastIndex, i), x, y);
                _strlineW = 0;
                _strLastIndex = i;
            }else if (i == str.length - 1) {
                ctx.fillText(str.substring(_strLastIndex, i + 1), x, y);
                _strlineW = 0;
            }
        }
        ctx.restore();
    }catch(e){
        console.log('出现异常',e);
    }
}

3、矩形绘制

function roundRectColor(ctx, x, y, w, h, r, color) {  //绘制圆角矩形（纯色填充）
  ctx.save();
  ctx.beginPath(0);
  ctx.setFillStyle(color);
  ctx.setLineJoin('round');  //交点设置成圆角
  ctx.setLineWidth(0);
  //从右下角顺时针绘制，弧度从0到1/2PI  
  ctx.arc(x+w - r, y + h - r, r, 0, Math.PI / 2);
  //矩形下边线  
  ctx.lineTo(x+r,  y + h);
  //左下角圆弧，弧度从1/2PI到PI  
  ctx.arc(x+r, y + h - r, r, Math.PI / 2, Math.PI);
  //矩形左边线  
  ctx.lineTo(x, y + r);
  //左上角圆弧，弧度从PI到3/2PI  
  ctx.arc(x+r, y + r, r, Math.PI, Math.PI * 3 / 2);
  //上边线  
  ctx.lineTo(x+w - r, y);
  //右上角圆弧  
  ctx.arc(x+w - r, y + r, r, Math.PI * 3 / 2, Math.PI * 2);
  //右边线  
  ctx.lineTo(x+w, y + h - r);
  ctx.closePath();
  ctx.fill();
  
  ctx.restore();
}

Answer 2

使用 Canvas 把图绘出来，再按你的逻辑做保存或者下载。

把你的背景，二维码 等多个图，用Canvas做成一张图。

给你一个Canvas代码例子(自己按需改一改)：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas 多张图合成一张图</title>
</head>

<body>
  <canvas id="myCanvas" width="800" height="600"></canvas>

  <script>
    // 加载图片
    function loadImage(url) {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = url;
      });
    }

    // 绘制图片到 canvas
    async function drawImages() {
      const canvas = document.getElementById('myCanvas');
      const ctx = canvas.getContext('2d');

      const image1 = await loadImage('image1.jpg');
      const image2 = await loadImage('image2.jpg');

      ctx.drawImage(image1, 0, 0);
      ctx.drawImage(image2, 200, 200);
    }

    drawImages();
  </script>
</body>

</html>