uniapp或小程序利用canvas生成圆图
“
在uniapp的.vue文件使用cover-view太难受了，cover-image无法设置成圆角，不得不找个投机取巧的方法，临时写了一下，将就着用吧
”
废话不说，直接上代码，
首先是html部分
<canvas canvas-id="test" id="test" style="width: 100rpx;height: 100rpx; position: fixed;opacity: 0;"></canvas> <image :src="testCircleImage" style="width: 100rpx;height: 100rpx" mode="aspectFill"></image> <image src="/static/img/icon.png" style="width: 100rpx;height: 100rpx" mode="aspectFill"></image>
注意canvas-id和id都需要写成一样的
js部分
import makeCircleImg from '@/utils/makeCircleImg.js'
data() {
return {
testCircleImage: ''
}
},
async onReady() {
const imgUrl = 'http://localhost/static/img/icon.png'
this.testCircleImage = await makeCircleImg('test', imgUrl, this)
}
函数部分
/**
* @name 绘制圆角图片
* @author zzc 2020-4-15
* @description 由于cover-image无法设置圆角，这里用canvas处理成圆角
* @param { String } canvasId canvas的id
* @param { String } src 图片的地址
* @param { Object } _this Vue实例
*/
export default function(canvasId, src, _this) {
return new Promise(function (resolve) {
const ctx = uni.createCanvasContext(canvasId)
const view = uni.createSelectorQuery().in(_this).select(`#${canvasId}`);
view.fields({ size: true}, function(data) {
const avatarWidth = data.width
const avatarLeft = avatarWidth / 2
const avatarTop = data.height
ctx.save()
ctx.beginPath()
ctx.arc(avatarWidth / 2, avatarWidth / 2, avatarWidth / 2, 0, Math.PI * 2, false);
ctx.clip()
ctx.drawImage(src, 0, 0, avatarWidth, avatarWidth)
ctx.closePath()
ctx.restore()
ctx.draw(false, function() {
// 返回canvas图片信息
uni.canvasToTempFilePath({
canvasId,
success: function(res) {
resolve(res.tempFilePath)
},
fail: function(err){
console.log(err)
}
})
})
}).exec();
})
}
最终效果
