uniapp或小程序利用canvas生成圆图

废话不说，直接上代码，

首先是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();
  })
}

 

最终效果