uniapp 使用 wxml2canvas插件画圆角图片

1. 安装wxml2canvas插件

在uniapp项目中的HBuilderX编辑器中，打开插件市场，搜索wxml2canvas插件并安装。

2. 引入wxml2canvas插件

在需要使用wxml2canvas插件的页面中，引入wxml2canvas插件：

import wxml2canvas from '@/wxml2canvas/wxml2canvas.js';

3. 绘制圆角图片

在页面中，使用wxml2canvas插件的draw函数绘制圆角图片：

draw() {
    let that = this;
    let query = uni.createSelectorQuery().in(this);
    query.select('#myCanvas').fields({ node: true, size: true }).exec((res) => {
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');
        const dpr = uni.getSystemInfoSync().pixelRatio;
        canvas.width = res[0].width * dpr;
        canvas.height = res[0].height * dpr;
        ctx.scale(dpr, dpr);
        const image = canvas.createImage();
        image.src = that.data.imageUrl;
        image.onload = () => {
            // 绘制圆角图片
            that.drawRoundImage(ctx, image, 0, 0, res[0].width, res[0].height, 10);
        };
    });
},
drawRoundImage(ctx, img, x, y, w, h, r) {
    ctx.save();
    ctx.beginPath();
    // 绘制圆角矩形
    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
    ctx.lineTo(x + w - r, y);
    ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
    ctx.lineTo(x + w, y + h - r);
    ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
    ctx.lineTo(x + r, y + h);
    ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
    ctx.closePath();
    ctx.clip();
    // 绘制图片
    ctx.drawImage(img, x, y, w, h);
    ctx.restore();
}

4. 在页面中使用canvas标签

在页面中添加canvas标签，并赋予一个id值：

<canvas id="myCanvas" style="width: 100%; height: 300rpx;"></canvas>

5. 调用draw函数

在页面的onLoad函数中，调用draw函数绘制圆角图片：

onLoad() {
    this.draw();
},

以上就是使用wxml2canvas插件在uniapp中绘制圆角图片的完整流程。