九镑十七便士 2021-10-26 11:03 采纳率: 30.6%
浏览 70

请问uniapp上怎么用canvas画圆形图片,主要用于生成海报

百度的代码大多都试过了,可是画出来图片还是放行的


```javascript
// 生成海报
            createPoster() {
                const that = this
                return new Promise((resolve, reject) => {
                    uni.showLoading({
                        title: '海报生成中'
                    });
                    const ctx = uni.createCanvasContext('mycanvas');
                    ctx.fillRect(0, 0, 751, 1301);
                    ctx.setFillStyle("#fff");
                    ctx.fillRect(0, 0, 751, 1301);
                    // 背景
                    ctx.drawImage(this.imgurl, 0, 0);
                    // 二维码
                    ctx.drawImage(this.qrCodePath, 170, 800, 120, 120);
                    // 文字样式
                    ctx.setFontSize(21);
                    ctx.setFillStyle('#888');
                    let drawtextList = this.$toolFun.drawtext(this.dataList.userName.toString(), 341);
                    let textTop = 0;
                    drawtextList.forEach((item,index) => {
                        if(index < 2){
                            textTop = 250 + (index + 1) * 28;
                            ctx.fillText(item.content, 280, textTop);
                        }
                    });
                    ctx.setFontSize(28);
                    ctx.setFillStyle('#222');
                    let drawtextList1 = this.$toolFun.drawtext(this.dataList.nickName, 341);
                    let textTop1 = 0;
                    drawtextList1.forEach((item,index) => {
                        if(index < 2){
                            textTop1 = 210 + (index + 1) * 28;
                            ctx.fillText(item.content, 280, textTop1);
                        }
                    });
                    // 绘制圆形图片
                    function circleImage(img, width, height, x, y){
                        console.log('绘制圆形图片')
                        let radius,diameter
                        //以最短的边为半径绘制圆
                        if(width > height){
                            radius = height / 2;
                        } else {
                            radius = width / 2;
                        }
                        diameter = radius * 2; 
                        ctx.save()
                        ctx.beginPath();
                        ctx.arc(x + radius, y + radius, radius, 0, Math.PI * 2, false);
                        ctx.clip();
                        ctx.strokeStyle="blue";
                        ctx.drawImage(img.path, x, y, diameter, diameter);
                        ctx.stroke();
                    }
                    // 头像
                    uni.downloadFile({
                        url: this.imgHost + this.dataList.avatar,
                        success: res => {
                            if (res.statusCode === 200) {
                                console.log(res, '图片')
                                console.log('ctx', ctx)
                                //绘制圆形头像
                                uni.getImageInfo({
                                    src: res.tempFilePath,
                                })
                                .then((img) => {
                                    console.log(img)
                                    // if (img[1].errMsg == "getImageInfo:ok") {
                                    //     let { width, height } = img[1];
                                    //     // circleImage(img[1],322,322,215,56)
                                    // }
                                    circleImage(img[1], 80, 80, 170, 200)
                                    ctx.draw(true, () => {
                                        uni.canvasToTempFilePath({
                                            canvasId: 'mycanvas',
                                            width: 751,
                                            height: 1301,
                                            success: res => {
                                                uni.hideLoading();
                                                resolve(res.tempFilePath);
                                            },
                                            fail: err => {
                                                uni.hideLoading();
                                                reject(err);
                                            }
                                        })
                                    })
                                })
                                // ctx.drawImage(res.tempFilePath, 170, 200, 80, 80)
                            
                            }
                        }
                    })
                })
            },


![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/533033712536120.png "=600 #left")
  • 写回答

1条回答 默认 最新

  • Lazy33 2021-10-28 16:41
    关注

    我的大哥啊!你这么嵌套一层一层的,能不能分开写,你这都没办法确定是哪儿的问题,其中最有可能就是this指向问题了

    评论

报告相同问题?

问题事件

  • 创建了问题 10月26日

悬赏问题

  • ¥15 如何处理复杂数据表格的除法运算
  • ¥15 如何用stc8h1k08的片子做485数据透传的功能?(关键词-串口)
  • ¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗?
  • ¥200 uniapp长期运行卡死问题解决
  • ¥15 请教:如何用postman调用本地虚拟机区块链接上的合约?
  • ¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题:[h264 @ 000000004faf7500]no frame?
  • ¥15 乘性高斯噪声在深度学习网络中的应用
  • ¥15 关于docker部署flink集成hadoop的yarn,请教个问题 flink启动yarn-session.sh连不上hadoop,这个整了好几天一直不行,求帮忙看一下怎么解决
  • ¥15 深度学习根据CNN网络模型,搭建BP模型并训练MNIST数据集
  • ¥15 C++ 头文件/宏冲突问题解决