uniapp使用canvas绘制海报有些头像是长方形,海报上要求正方形或圆形,直接定死宽高图片会压缩变形,废话不多说直接贴代码

使用(logo图片途径,需要用uni.getImageInfo转换成本地,x轴,y轴,w宽,h高,r圆角如果圆形就设置宽高的一半)

cropPicture(await this.getImgW_H(logo), x, y, w, h, r)

定义获取图片宽高函数以及图片路径,返回一个对象转成字符串

async getImgW_H(imgSrc) {
                return new Promise((resolve, reject) => {
                    uni.getImageInfo({
                        src: imgSrc,
                        success: res => {
                            let imgContentList = {
                                imageWidth: res.width, //获取图片的宽度
                                imageHeight: res.height, //获取图片的高度
                                imgSrc: imgSrc //图片路径
                            }
                            let obj = JSON.stringify(imgContentList)
                            resolve(obj);
                        },
                        fail: err => {
                            reject(err);
                        }
                    });
                });
            },

定义获取到图片的信息并且开始绘制

//处理图片变形函数
                function cropPicture(imgDatas, x, y, boxWidth, boxHeight, boxRadius) {
                    let imgData = JSON.parse(imgDatas) //字符串转成对象获取图片的宽高路径
                    let imageWidth = imgData.imageWidth //图片的宽度
                    let imageHeight = imgData.imageHeight //图片的高度
                    let imgSrc = imgData.imgSrc //图片路径
                    let painWidth = 0 //绘画图片的宽度
                    let painHeight = 0 //绘画图片的高度
                    if (imageWidth > imageHeight) { //如果图片是宽大于高的长方形
                        painWidth = (boxHeight / imageHeight) * imageWidth //等比例获取宽度
                        painHeight = boxHeight //等比例获取高度
                    }
                    if (imageWidth == imageHeight) { //如果图片是宽等于高的正方形
                        painWidth = boxWidth
                        painHeight = boxHeight
                    }
                    if (imageWidth < imageHeight) { //如果图片是宽小于高的长方形
                        painWidth = boxWidth //等比例获取宽度
                        painHeight = (boxWidth / imageWidth) * imageHeight //等比例获取高度
                    }
                    ctx.save()
                    ctx.beginPath()
                    viewBox(x, y, boxWidth, boxHeight, boxRadius, 'white', 0)
                    ctx.restore()
                    ctx.clip()
                    ctx.drawImage(imgSrc, x, y, painWidth, painHeight)
                    ctx.restore()
                }

viewBox是我自己定义的圆角块

x轴y轴w宽h高r圆角(如果圆形就设置宽高的一半)c背景色o透明度

function viewBox(x, y, w, h, r, c, o) { //圆角块
                    if (w < 2 * r) {
                        r = w / 2;
                    }
                    if (h < 2 * r) {
                        r = h / 2;
                    }
                    ctx.save()
                    ctx.beginPath();
                    ctx.setGlobalAlpha(o)
                    ctx.setFillStyle(c);
                    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
                    ctx.moveTo(x + r, y);
                    ctx.lineTo(x + w - r, y);
                    ctx.lineTo(x + w, y + r);
                    ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
                    ctx.lineTo(x + w, y + h - r);
                    ctx.lineTo(x + w - r, y + h);
                    ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
                    ctx.lineTo(x + r, y + h);
                    ctx.lineTo(x, y + h - r);
                    ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
                    ctx.lineTo(x, y + r);
                    ctx.lineTo(x + r, y);
                    ctx.fill();
                    ctx.closePath();
                }

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐