uniapp使用canvas绘制图片保证等比例缩小裁剪不变形
uniapp使用canvas绘制海报有些头像是长方形,海报上要求正方形或圆形,直接定死宽高图片会压缩变形,废话不多说直接贴代码使用(logo图片途径,需要用uni.getImageInfo转换成本地,x轴,y轴,w宽,h高,r圆角如果圆形就设置宽高的一半)cropPicture(await this.getImgW_H(logo), x, y, w, h, r)定义获取图片宽高函数以及图片路径,返
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();
}
更多推荐
所有评论(0)