移动端实现类似微信上传头像功能，含头像缩放、截取功能---笔记记录

最新推荐文章于 2022-01-09 22:46:28 发布
最新推荐文章于 2022-01-09 22:46:28 发布
阅读量1k 收藏 6
点赞数
文章标签： 头像上传 插件 vue photoClip 头像剪裁
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dirty_rabbit/article/details/103529856
版权

最近遇到一个微信公众号的项目，要求实现类似微信头像上传功能，含有头像缩放，截取功能，上传后的头像不变形。

在网上找了很多资料，发现一款插件很实用，记录一下，以备下次实用。

PhotoClip.js 

一款手势驱动的裁图插件，移动端照片裁剪的简洁化解决方案！

  • 在移动设备上双指捏合为缩放，双指转动为旋转
  • 在PC设备上鼠标滚轮为缩放，每次双击则顺时针旋转90度

 

资料连接地址：https://github.com/baijunjie/PhotoClip.js

dirty_rabbit
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
仿微信上传头像并裁剪
06-07
仿微信上传头像并裁剪,内含apk可安装预览
仿微信上传头像
09-16
android开发仿微信相册，相机上传头像
自定义PopWindow模仿微信拍照上传头像
生活不只眼前的苟且，还有诗和远方的田野。
08-16 3429
我们先来看看微信的效果图： 然后我们来自己实现： 一、自定义布局 res/layout/popwindow_takephoto.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_w
HTML5 canvas实现移动端上传头像拖拽裁剪效果
09-28
主要为大家详细介绍了HTML5 canvas实现移动端上传头像拖拽裁剪效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html5头像上传拖动图片头像截图效果,HTML5手机移动端上传头像裁剪图片代码
weixin_29745227的博客
06-03 174
部分JS代码window.jQuery || document.write('')var obUrl = ''//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);$("#clipArea").photoClip({width: 199,height: 166,file: "#fi...
小程序仿微信头像上传功能
baidu_34197758的博客
07-17 576
仿微信头像上传功能，具有图片裁剪，旋转，还原，缩放等功能 示例为 github地址： https://github.com/392736970/cropper
js仿QQ实现图片缩放功能
08-20
仿QQ双击小图片弹出图片缩放层，并显示图片原始宽高，用鼠标滚轮控制图片放大缩小。代码清晰，易于理解。界面已设计好，虽然比不上腾讯的的好看，实在是P图太麻烦，但是我相信还是能入得了你的法眼的。
css3实现微信群头像布局代码.zip
07-11
在CSS3中，实现微信群头像布局是一项常见的前端任务，主要目的是将多个用户头像排列成类似微信聊天群那样的网格视图。这个压缩包文件"css3实现微信群头像布局代码.zip"包含了实现这一功能所需的代码示例。下面我们将...
weapp-avatar-cropper:微信小程序中头像裁剪功能的实现
05-08
参照 这篇文章中的思路实现了头像裁剪。 在 pages/constant.js 中可以修改裁剪框尺寸，支持矩形。 在微信开发者工具中预览效果。 实现时需要注意的问题 movable-view 的 damping 需要设得很大，比如 1000 ，否则...
微信qq头像打包-5050张
09-12
在IT行业中，头像是一种非常常见的视觉元素，特别是在社交媒体、即时通讯软件如微信和QQ中。这些平台允许用户自定义头像以展示个人形象或表达情绪。"微信qq头像打包-5050张" 提供的是一个包含了大量微信和QQ可用头像...
三种不同方式实现头像裁剪
07-22
三种不同方式实现头像裁剪，有方形的又圆形的。
纯JS实现的头像裁剪,支持设置预期尺寸,支持拖动放大缩小,无冗余功能
09-26
纯JS实现的头像裁剪(图片裁剪); 支持设置预期的尺寸,自动压缩图片质量; 返回base64格式的图片; 支持IE10及以上; 支持VUE等调用; 附带样式源码,需要手机端的可以修改样式即可!
vue+cropper+vux 移动端图片裁剪
01-21
vue+cropper+vux 移动端图片裁剪 刚好项目需要用到图片裁剪功能
Android仿微信上传头像（缩放、拖动、裁剪）
11-23
Android仿微信上传头像（缩放、拖动、裁剪）
纯html手机端类似微信上传头像功能
11-25
本示例所涉及的主题是“纯html手机端类似微信上传头像功能”，这是一个用于实现类似微信头像上传、预览和剪切功能的HTML示例。这种功能常见于许多社交应用和个人资料设置中，为用户提供方便快捷的图像编辑体验。 ...
微信小程序源码-外卖：实现类似锚点功能.zip
最新发布
03-24
微信小程序源码-外卖：实现类似锚点功能.zip微信小程序源码-外卖：实现类似锚点功能.zip微信小程序源码-外卖：实现类似锚点功能.zip微信小程序源码-外卖：实现类似锚点功能.zip微信小程序源码-外卖：实现类似锚点...
vue -- 移动端(vant)更换头像剪切功能
King Saj
01-09 930
效果: 思路: 利用 file input 特性,获取到选中的图片. 借助 vue-cropper 实现头像剪裁功能,然后把剪裁的头像上传至服务器,完成更换头像操作 代码: myDetails.vue <template> <div class="page page-profile"> <van-nav-bar title="个人资料" left-text="返回" left-arrow @click-left=
html修改头像功能,移动端页面能做修改头像功能的吗？
weixin_32715971的博客
06-03 180
当然能啊 没看过网页版贴吧微博么 随手写个Demo通过FileReader读取文件的Base64值并使用img标签显示预览HTML上传CSS/*隐藏默认的上传控件*/input[type=file]{dispaly:none;}/*自定义上传按钮样式*/.upload{...}Javascriptdocument.querySelector('.uploadinp...
html5仿app头像上传裁图
IT人爱IT
05-21 1860
此作品实现了html5仿app头像上传裁图，支持 单手指 滑动，双手指 放大，保存为 base64位，暂时还没有处理跨域图片的 裁图问题，只能裁剪本地照片，html5+原生javascript实现，自适应屏幕宽度=高度，作品里面的每个功能的注释写得非常详细，大家自己下载下来看吧。。。 　　核心代码如下： function touch (event){ var event = event |
UniApp中实现类似微信聊天@功能
05-20
在UniApp中实现类似微信聊天@功能，可以通过以下步骤实现： 1. 获取聊天室成员列表：在聊天室中，获取当前聊天室的成员列表，可以通过接口或者数据库查询实现。 2. 输入框中输入@符号：当用户在输入框中输入@符号...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值