Uniapp中使用canvas绘制海报可以按照以下步骤进行:

1. 引入需要绘制的图片资源

这些图片可以是本地的,也可以是远程的。可以将图片资源放在项目的`static`目录下,例如:`static/poster-bg.png`,`static/avatar.png`等。同时需要在`uni.json`中声明这些资源。

2. 创建canvas

在页面中创建一个`canvas`元素,设置宽高和`canvas-id`:


<canvas canvas-id="poster-canvas" style="width: 750rpx;height: 1334rpx;"></canvas>

3. 使用canvas绘制海报

在页面的`script`标签中,通过`uni.createCanvasContext`方法获取canvas绘制上下文,然后使用canvas绘制API进行绘制。例如:


import avatarUrl from '../../static/avatar.png';
import bgUrl from '../../static/poster-bg.png';

export default {
    data() {
        return {
            avatar: null, // 头像图片对象
            bg: null, // 背景图片对象
            context: null, // canvas绘制上下文
        }
    },
    onLoad() {
        this.context = uni.createCanvasContext('poster-canvas', this); // 创建canvas绘制上下文
        this.loadImage(avatarUrl, (avatar) => {
            this.avatar = avatar; // 加载头像图片
            this.loadImage(bgUrl, (bg) => {
                this.bg = bg; // 加载背景图片
                this.drawPoster(); // 绘制海报
            });
        });
    },
    methods: {
        // 加载图片
        loadImage(url, callback) {
            const img = new Image();
            img.src = url;
            img.onload = () => {
                callback(img);
            }
        },
        // 绘制海报
        drawPoster() {
            this.context.drawImage(this.bg, 0, 0, 750, 1334); // 绘制背景图片
            this.context.save(); // 保存绘制状态
            this.context.beginPath();
            this.context.arc(375, 160, 100, 0, 2 * Math.PI); // 绘制圆形
            this.context.clip(); // 裁剪
            this.context.drawImage(this.avatar, 275, 60, 200, 200); // 绘制头像
            this.context.restore(); // 恢复绘制状态
            this.context.setFillStyle('white'); // 设置填充色
            this.context.setFontSize(36); // 设置字体大小
            this.context.fillText('Hello world', 30, 370); // 绘制文本
            //... 继续绘制其他内容
            this.context.draw();
        },
    },
}

需要注意的是,绘制图片需要先加载图片对象,可以使用`Image`对象加载图片,然后在`onload`回调中获取图片对象进行绘制。同时,绘制海报的步骤可以分为多个函数,便于进行模块化开发。

4. 保存海报图片

可以通过`canvas`的`toTempFilePath`方法将绘制的海报转为图片数据流,再调用`uni.saveImageToPhotosAlbum`方法保存到相册中。注意,在安卓端需要获取保存图片权限。

uni.canvasToTempFilePath({
    canvasId: 'poster-canvas',
    success: res => {
        uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
                uni.showToast({
                    title: '保存成功'
                })
            },
            fail: () => {
                uni.showToast({
                    title: '保存失败'
                })
            }
        });
    },
});

更多推荐