html5头像裁剪,H5头像裁剪的实现与坑位
最近有个需求,需要在H5上实现用户头像裁剪。需求如下:
1.穿透效果的透明蒙层
使用canvas的ctx.globalCompositeOperation='destination-out'实现。
(该特性还可以实现类似刮刮乐的效果)
坑位1:在一些高分辨率的安卓机子上,绘制canvas图形会出现模糊的现象。因为canvas元素依赖于设备像素比,所以适配高清屏,canvas内容的宽高需要设置为实际的宽高的dpr倍。但是如果这么设置会导致画面空白一片,无法显示。
2.可平移缩放的图片显示器
坑位2:在做安卓平板兼容时,有时候多点触摸操作后,再进行单点触摸,touch事件返回的touchList不是只有一个触摸点的信息,也会有多个触摸点的信息。导致依赖触摸点去判断平移还是缩放操作的准则失效。
解决方法:发现如果多点触摸后再单点触摸,如果touchList的长度不为1时,touch[0]之后的触摸点的位置都是维持不变的,只有touch[0]的位置坐标会发生变化,因此利用此点来追加判断单点触摸还是多点触摸。
3.图片裁剪编辑器
坑位3:利用屏幕显示的图片尺寸,去进行裁剪,怎么裁剪都不对。
解决方法:裁剪操作的图片大小并不是在屏幕上显示的图片大小,而是源图片的大小。需要使用element.naturalWidth和element.naturalHeight属性来正确计算裁剪和缩放区域等内容,而不是element.width和element.height。
坑位4:采用naturalWidth、naturalHeight与width和height的比例来纠正裁剪源图的坐标,在首次加载图片裁剪的效果是正确的,但是二次加载图片裁剪后的效果又是不正确的。
解决方法:不使用element.width和element.heightl来进行源图片与屏幕显示图片的比例换算。是因为当图片有缓存时,首次加载完成的width和height分别与naturalWidth和naturalHeight相等(后面又会恢复正常),width和height获取不到正确的图片屏幕显示尺寸,导致裁剪算法异常。这里使用element.clientWidth和element.clientHeight进行与源图片的比例换算。
坑位5:IOS手机编辑时,显示的图片方向是正确的,但是经过裁剪后,获取的图片不正确。IOS在显示的时候,会根据图片EXIF属性中的orientation值,进行自动旋转纠正图片的显示方向。
解决方法:引入一个exif.js的库,获取图片的orientation值,来对图片进行方向旋转的处理。在此只需要处理:1.顺时针旋转90°,2.逆时针旋转90°,3.顺时针旋转180°,三种情况。
(引入exif.js的代码网上有很多,但是没有具体的旋转分析图,当时这个想了挺久的TOT~)
坑位6:裁剪经过旋转显示的宽度大于屏幕宽度的图片,往往会出现裁剪部分缺失或裁剪出空白的图片,但是裁剪的坐标和宽度经过推算是没有错。
解决方法:屏幕上加载显示的图片,并非缓存中的原图片经过旋转缩放获取,如果image图片的style限定了宽度和高度,那么缓存中的原图片加载的宽度和高度会受此限制。因此需要另外加载一个没有宽高样式限制的图片作为裁剪的源图片。
坑位7:高度小于裁剪高度时,会导致裁剪框的参数计算异常。
解决方法:维持裁剪的sX坐标不变,将sY坐标设置为0,裁剪高度和宽度为图片的源高度。
4.展望
更多可能性的操作,例如图片可旋转的操作,那么裁剪坐标该如何计算。
如何简化计算?可以利用线性代数进行运算(两个不同矩阵相乘记得齐次方程处理)。
为了便于进行旋转、平移、缩放等混合操作运算,矩阵需要作齐次方程处理。
可以进一步将矩阵的计算抽取为公共工具函数类:
其灵感来自于学习WebGL的矩阵转换运算,笔者也是刚入门学习中,欢迎交流~~
html5头像裁剪,H5头像裁剪的实现与坑位相关推荐
- ios 裁剪圆形头像_IOS_iOS如何裁剪圆形头像,本文实例为大家介绍了iOS裁剪 - phpStudy...
iOS如何裁剪圆形头像 本文实例为大家介绍了iOS裁剪圆形头像的详细代码,供大家参考,具体内容如下 - (void)viewDidLoad { [super viewDidLoad]; //加载图片 ...
- Android项目中使用的图片选择器、头像裁剪和图片裁剪 Android 11可用
在我们开发项目的时候,经常会涉及到头像上传和裁剪,针对这一需求我综合开源项目知乎的Matisse和国外的框架ucrop,实现了图片选择拍照和图片裁剪. 先看一下效果图 实现的方法 1.图片选择器的配置 ...
- react-avatar-editor 裁剪,头像上传
react-avatar-editor插件 裁剪,头像上传 参考链接: https://blog.csdn.net/song279811799/article/details/79055651
- 相册获取、相机拍摄,裁剪圆形头像
相册获取.相机拍摄,裁剪圆形头像 应用场景 很多应用都有个人中心,个人中心就会有头像,现在一般都流行圆形头像,那么怎么设置呢 使用步骤 这里参考了网上各位大神的文章,因为中途遇到几个坑,折磨了一天,快 ...
- H5头像完整制作,可拖拽缩放,可添加装饰图标(装饰图标支持缩放、旋转、拖拽)
H5头像制作类的程序本以为到处都可以搜索到,可是真写这个项目的时候才发现太困难了,因为根本没有现成的功能模块可以拼凑,着实费了不少力气,好在最终圆满交工. 还是先看效果 源码获取渠道 小程序内联系客服 ...
- html上传图片裁剪,基于HTML5+JS实现本地图片裁剪并上传功能
基于HTML5+JS实现本地图片裁剪并上传功能 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了基于HTML5+JS实现本地图片裁剪并上传功 ...
- ie js html 压缩,H5图片裁剪-压缩-上传-神奇的Croppie.js
Croppie.js之图片裁剪压缩上传 h5图片裁剪, 压缩, 上传, 预览是常见功能, 幸运的是我们有cropp.js这款利器. 1. style .actions button, .actions ...
- html 图片剪裁控件,h5图像裁剪(基于canvas)插件Image-Clip
插件描述:支持旋转,预览,裁剪框选择,压缩比例设置等 Image-Clip 图像的裁剪压缩 功能包括:canvas绘制图片 裁剪框选择裁剪大小 旋转功能 放大镜(方便旋转) 裁剪功能 缩放.压缩功能( ...
- ios 图片居中裁剪_IOS图片裁剪和小图看大图动画
IOS的UIImagePickerController可以让用户通过相机或者相册获取想要的图片,并且通过设置allowsEditing属性允许用户在选择了图片以后对图片进行裁剪.不过在某些时候会出现正 ...
- php 微信头像 圆形,微信头像生成圆形邀请卡
微信接口获取用户信息,返回的用户头像是132x132的jpeg图片. 用cURL下载微信头像,然后var_dump(getimagesize($avatar)); 结果 array(7) { [0]= ...
最新文章
- OpenCV运动检测跟踪(blob track)框架组成模块详解
- NVIDIA cuda7在centos6.5中的安装
- NO--14 微信小程序,左右联动二
- 服务器选购seo优化规则,网站seo优化注意事项1—域名和服务器选择
- Java中的ArrayList类和LinkedList
- dell 7447加装SSD
- 【元胞自动机】基于matlab元胞自动机单边教室疏散【含Matlab源码 1207期】
- Python雷电小游戏、战机小游戏源代码源程序
- ubuntu 22.04 搜狗输入法 的问题
- navicat导入excel表中数据出错问题
- 下载多张图片并压缩成压缩包
- PhalAPI学习笔记 ——— 第二章接口服务请求
- Macbook Pro 鼠标卡顿问题
- java中ofd文件转pdf_OFD版式文档Java开发组件(iOFD)
- 白嫖党必备非常好用的苹果cms模板网站
- 基于压缩感知的单像素相机
- 17-跨语言调用 Google ProtoBuf
- Windows 便捷工具箱 Microsoft PowerToys
- 使用SpringCloud构建简单的服务者和消费者
- 《关键信息基础设施安全保护条例》简介
热门文章
- 去追寻,趁我们还年轻。
- 太飒了!这届乘风破浪的 IT 女神写得了代码、撕得掉年龄、跨得过行业!
- 九鼎无双一面面经【凉】
- 区块链技术掀起积分系统的又一次“革命”
- 刷爆全网:一个中科大差生的8年程序员工作总结~
- 理论篇3:深度学习之----Momentum优化器(2)
- ue4 改变枢轴位置_在UE4引擎中做卡通描边的一点心得
- APK瘦身实践之旅——启动篇
- 【VC7升级VC8】将vCenter Server 7.X 升级为 vCenter Server 8 (上)—— VC 8系统要求与升级前的说明
- ①变量、常量、数据类型解释 ②标识符命原则 ③sizeof使用原则 ④float型科学计数法 ⑤字符转换到ASCII表 ⑥\t 的使用意义【黑马程序员视频】