微信小程序显示圆形图片

最新推荐文章于 2024-02-04 16:03:05 发布
最新推荐文章于 2024-02-04 16:03:05 发布
阅读量2.9w 收藏 23
点赞数 8
分类专栏： 微信小程序 html 文章标签： 微信小程序 圆形图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/helang296479893/article/details/82255471
版权

微信中头像形状都是矩形的。我们的页面大部分要求头像要显示圆形，例如

做法

在.wxss文件中，添加border-radius这个属性即可

.avatar{
    height: 50px;
    width: 50px;
    border-radius: 25px;
}

在.wxml中的image中元素，引用这个样式即可

<image src='{{ic_avatar}}' class='avatar'></image>

 

何浪
关注
  • 8
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序 三 圆形图片
国苏
05-23 1万+
圆形图片和圆形其它控件一样 home.wxss.profile{ width: 50rpx; height: 50rpx; border: 0 solid #ff0000; border-radius: 100rpx; background-color: #f10b2e; }home.wxml <image src="/res/icon_tab_fightin
小程序显示图片并且预览
最新发布
程序媛的博客
07-18 119
【代码】小程序显示图片并且预览。
微信小程序画自定义圆弧背景
lllcuigu的博客
02-04 335
【代码】微信小程序画自定义圆弧背景。
微信小程序中绘制圆形头像
qq_42661906的博客
06-19 1087
//保存上下文 ctx.save(); ctx.beginPath(); //x,y,大小(从x，y轴交点半径大小) ctx.arc((265 * rpx) + (85 * rpx), (210 * rpx) + (85 * rpx), 85 * rpx, 0, 2 * Math.PI); ctx.clip(); ctx.drawImage(res.path, 265 * rpx, 210 * rpx, 175 * rpx, 175 * rpx); ctx.restore(); ...
微信小程序--用户头像做成圆形
weixin_44531304的博客
04-03 1581
–wxml– <view class="logo"> <open-data type="userAvatarUrl" class="userinfo" id="userinfo"></open-data> </view> –wxss– #userinfo{ width: 185rpx; height:185rpx; border...
微信小程序——圆形图片image控件、两个字和三个字对齐
wy313622821的博客
04-21 7948
image控件中显示圆形图片 首先来个效果图： 然后我们来看看源码： wxml中： <image class="image_radius" src="../images/timg.png"/> wxss中： .image_radius { height: 50px; width: 50px; border-radius: 30px; } ...
微信小程序canvas实现画圆圈头像
sinat_33384251的博客
11-16 1256
/* ctx: 画布对象 src: 头像缓存路径 x: 头像起始位置 横坐标 y: 头像起始位置 纵坐标 w: 头像宽度 h: 头像高度，不传为w */ #// 保存绘图上下文。 ctx.save(); #// 开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边 ctx.beginPath() #// 设创建一个圆可以指定 起始弧度为 0，终止弧度为 2 * Math.PI。 #// 用 stroke 或者 fill 方法来在 ca.
微信小程序裁剪图片成圆形
findhappy117的博客
03-10 2375
代码地址如下：http://www.demodashi.com/demo/14453.html 前言 最近在开发小程序，产品经理提了一个需求，要求微信小程序换头像，用户剪裁图片必须是圆形，也在github上看了一些例子，一般剪裁图片用的都是方形，所以自己打算写一个小组件，可以把图片剪裁成圆形，主要思路就是使用canvas绘图，把剪裁的图片绘制成圆形，另外剪裁图片的窗口还可以移动放大缩小，这个功...
微信小程序之裁剪图片成圆形的实现代码
10-17
总结来说，微信小程序实现圆形图片裁剪涉及到`movable-view`和`canvas`组件的使用，通过移动和缩放操作结合画布绘图，可以创建一个自定义的圆形裁剪工具。通过监听用户的操作，动态更新`canvas`上的图像，最终得到...
微信小程序canvas实现椭圆（圆形）缩放
01-09
在微信小程序中，Canvas是用于绘制...通过理解以上知识点，开发者可以在微信小程序中实现一个能够动态缩放的Canvas椭圆（圆形）功能。这不仅展示了Canvas的强大绘图能力，也体现了微信小程序对交互和动画的良好支持。
微信小程序：图片拼图小程序源码
05-28
总的来说，"图片拼图小程序源码"涵盖了微信小程序开发中的图像处理、用户交互、模板设计等多个方面，对于想要涉足微信小程序开发，尤其是对图像编辑功能感兴趣的开发者来说，这是一个很好的学习资源。通过深入研究这...
微信小程序canvas实现椭圆（圆形）元素自由移动
01-09
本文将深入探讨如何使用Canvas在微信小程序中实现椭圆（圆形）元素的自由移动。 首先，我们需要了解Canvas的基本用法。在微信小程序中，Canvas组件通过`<canvas>`标签引入，并通过`wx.createSelectorQuery()`获取...
微信小程序 图片设置为圆形
weixin_30840573的博客
02-20 1万+
要图片圆形显示，需要设置border-radius:50%，还要设置overflow:hidden,具体如下： Tip：user-avatar是图片控件的class .user-avatar { width: 140rpx; height: 140rpx; border-radius: 50%; overflow:hidden; } 转载于:https:...
微信小程序加载圆形图片
小牧在一直在学习,在前进的道路上大家一起学习，进步。
11-24 1001
刚才想了半天才想到，js 设置圆形图片是使用border-radius 小程序也是使用的这个属性 假如写一个加载头像的图片 在wxml 中 <image src="{{uer_icon}}" class="user_icon"></image> 在js中加载一个本地图片 data: { uer_icon:"../images/head.jpg" ...
微信小程序实现canvas画圆形微信头像
qq_45771320的博客
10-17 2355
canvas画圆形微信头像
微信小程序15---将组件设置为圆形
热门推荐
Yo.o
11-16 1万+
1.上图 2.index.wxss宽高和弧度的设置.circle{ width: 100px; height: 100px; border: 0 solid #ffffff; border-radius: 500px; box-shadow: 4px 1px 1px #cccccc;}
微信小程序图片设置为圆
weixin_47341384的博客
07-20 1831
在对应的css样式中添加 border-radius:50%; overflow:hidden;即可
微信小程序canvas绘制圆形头像
王光
08-20 6026
context.save(); //绘制头像 context.beginPath(); //开始绘制 //先画个圆，前两个参数确定了圆心 （x,y） 坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false，即顺时针 context.arc(42 / 2 + 121, 42 / 2 + 210, 42 / 2, 0, Math.PI * 2, false); context.clip...
微信小程序canvas 图片裁剪成圆形
07-28
你可以使用微信小程序的 Canvas 组件和相关 API 来实现图片裁剪成圆形的效果。以下是一个简单的示例代码： 1. 在你的小程序页面的 JSON 文件中添加 Canvas 组件： ```json { "usingComponents": { "canvas": "/path/to/canvas" } } ``` 2. 在你的小程序页面的 WXML 文件中添加 Canvas 组件的标签： ```html <canvas canvas-id="myCanvas" style="width: 200px; height: 200px;"></canvas> ``` 3. 在你的小程序页面的 JS 文件中编写相关代码： ```javascript Page({ onReady: function () { const ctx = wx.createCanvasContext('myCanvas') wx.getImageInfo({ src: '/path/to/image.jpg', success: function (res) { const imgWidth = res.width const imgHeight = res.height const radius = imgWidth > imgHeight ? imgHeight / 2 : imgWidth / 2 ctx.save() ctx.beginPath() ctx.arc(radius, radius, radius, 0, 2 * Math.PI) ctx.clip() ctx.drawImage(res.path, 0, 0, imgWidth, imgHeight, 0, 0, radius * 2, radius * 2) ctx.restore() ctx.draw() } }) } }) ``` 上述代码中，通过 `wx.getImageInfo` 方法获取图片信息，然后根据图片大小确定裁剪半径。接下来，在 Canvas 上绘制一个圆形路径并使用 `ctx.clip()` 方法进行裁剪。最后，使用 `ctx.drawImage` 方法将图片绘制在裁剪后的区域内。最后调用 `ctx.draw()` 方法进行渲染。 请注意替换示例代码中的图片路径和 Canvas 组件的样式为你实际使用的路径和样式。 希望对你有所帮助！如有任何问题，请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值