logo

  • 欢迎各位友链
  • 本站支持自适应
  • 技术合作请留言

  • 首页
  • 文章 
    • vue
    • app
    • node
    • 生活
    • 小程序
    • javascript
    • uniapp
  • 案例 
    • app
    • 小程序
    • pc
  • 相册
  • 友链
  • 留言
  • 微语
  • 关于

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

 2020-06-01
 椰子皮
 0
 3045
“ 在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();
  })
}


最终效果


支付宝 微信
 5

小程序uniapp
 uniapp点击输入框时键盘不上推页面
 vue+typescript使用tinymce富文本编辑器
暂无内容,快抢沙发吧~



表情
 不支持canvas
椰子皮
椰子皮
觉得不错就点个赞吧
 181
 关注 公众号
1288 运行天数
213 今日pv
52 文章数量
 最近更新
 2021-04-08 22:25 更新了 文章
 js查找出现次数最多的字符并统计次数

 最新微语
  • 把清新风格改为毛玻璃效果,虽然有点卡,但 2020-05-31
  • 本站春季主题已完成,大家觉得怎样。 2020-03-15
  • 很久没更新了,不知道说啥,提前祝大家新年 2018-06-05
 最新评论
  • 歌尽花颜
    歌尽花颜 Win10 2021-02-24
    文章 @touchmove.stop.prevent怎么加在根元素上呀?.prevent不是只支持H5的吗?
  • kiinlam
    kiinlam Win10 2021-02-04
    文章 https://ask.dcloud.net.cn/article/36549
  • 小何
    小何 Win10 2021-01-04
    文章 这样取消弹窗了就不是app的正常运行过程了;APP权限拒绝之后怎么让它可以正常进入应用,而不是拒绝了权限就退出应用了
 最多点赞
 最多评论
  • 全新椰子皮博客版本介绍及说明。
    全新椰子皮博客版本介绍及说明。...
    2017-11-23 赞:20
  • vuex action 与mutations 的区别
    vuex action 与mutations 的区别...
    2018-06-24 赞:17
  • vue+typescript使用tinymce富文本编辑器
    vue+typescript使用tinymce富文本编辑...
    2020-06-09 赞:11
  • 让height:auto有过度效果
    让height:auto有过度效果...
    2017-12-22 赞:
  • css3使用transform: scale 元素出现偏移
    css3使用transform: scale 元素出现偏...
    2018-03-10 赞:
  • 结合lazyload实现文章页里面的图片预加载
    结合lazyload实现文章页里面的图片预加载...
    2017-10-05 赞:
 标签
uniapp javascript typescript 小程序 app vue nuxt node
 友情链接
申请
mashihuan Khari & Yaru 美好记忆 帅气的木木 大蒜博客 Aquan 快乐编程 fivewoods Paul 贺德强 太傅博客 梁巨才博客 jielin littlewin IT技术宅
首页 申请友链 关于本站 广告合作
CopyRight © 2016-2020 - 椰子皮 - 浙ICP备16003960号