uni保存canvas图片_uniapp或小程序利用canvas生成圆图

废话不说，直接上代码，

首先是html部分

注意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)