读ImageCropper源码
原库首页http://andyshora.com/angular-image-cropper.html
根据项目的需求,要在Web上面裁剪图片,找到了这个可以用的AngularJs的库,涉及到了一些没有用到的知识。在这里做一下总结。
1. JSHint
原码里面有一些JSHint的warning, 要注意修一下。
2. 缩放
缩放时如果zoom变成1,会占满整个canvas,这对我项目中的使用是无益的,要把它删除掉。
3. 移动
原码中如果移动图片偏离了可视窗口就会被禁止掉,实际中,移动图片的时候人手难免会抖动,例如左移之前可能都会稍微向右移一下,这样操作起来会很不方便,合适的逻辑应该是在移动时如果超出边界,便设置成边界。
下面是相关的知识点。
对于Directive
1. restrict
The restrict
option is typically set to:
'A'
- only matches attribute name'E'
- only matches element name'C'
- only matches class name
2. 读取文件并显示在canvas内
这是比较关键的一部,比较关键的点有:
element.on('change', function(e){files = e.target.files;if(!files) {return;}fileReader.readAsDataURL(files[0]); });
这步是当有文件选择的时候,通过监听change事件来获得file input里面的文件,需要注意的是,文件在e.target.files里面。
关于FileReader, https://developer.mozilla.org/en-US/docs/Web/API/FileReader, 看起来兼容性还不错,主要用到的api都是readAsDataURL,然后再在onload里面进行监听。
readAsDataURL:
Starts reading the contents of the specified Blob
, once finished, the result
attribute contains a data:
URL representing the file's data.
这个API会将文件读取成一个base64 encoded的字符串,会有一个例如data:image/png;base64, 的前缀
fileReader.onload = function(e) {$img.src = this.result;scope.step = 2;scope.$apply();var byteString = atob(this.result.split(',')[1]);var binary = new BinaryFile(byteString, 0, byteString.length);exif = EXIF.readFromBinaryFile(binary);};
0) $img是一个Image对象,参照https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement.Image, 这是一个HTML5标准的对象,可以设定它的src然后监听onload事件。
1) 文件在this.result里面, 而且是base64编码后的。
2) 需要使用$apply来更新image的src.
3) atob, https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64.atob, 根据这篇文章,这个函数是非H5标准的,用来将base64 encoded string decode, 还有相反的一个函数btoa是将一个字符串base64 encode. 使用时要将url的前缀去掉。
4) BinaryFile, 这是在库中自定义的一个类,用于从二进制文件中读取byte, short, 或者long等值
5)exif, readFromBinaryFile, 这个函数只会处理jpeg,获取文件中exif的信息。
当文件加载时
$img.onload = function() {ctx.drawImage($img, 0, 0);imgWidth = $img.width;imgHeight = $img.height;if (exif && exif.Orientation) { /*此处略去500字*/ }/*此处再略去500字*/scope.$apply();};
1) 使用canvas将文件画出来,这个canvas是用户用来操作图片的地方。比目标图片高100, 宽100,如下图所示:
上面的部分就是所说的canvas, 下面的输入框是根据需求自己添加的,
2) 第一处省略的500字是对图片进行一些修正,主要是根据手机(?)上的一些横置竖置的一些问题。
3) 第二次省略500字是初始化一些参数 ,例如最大的缩放,拖拽等。
文件终于显示在canvas里面了,然后就有一些操作相关的功能。
3. 操作
未完待续。
转载于:https://www.cnblogs.com/rixin/p/4177849.html
读ImageCropper源码相关推荐
- 读Zepto源码之操作DOM
2019独角兽企业重金招聘Python工程师标准>>> 这篇依然是跟 dom 相关的方法,侧重点是操作 dom 的方法. 读Zepto源码系列文章已经放到了github上,欢迎sta ...
- 读Lodash源码——chunk.js
The time is out of joint: O cursed spite, That ever I was born to set it right. --莎士比亚 最艰难的第一步 最近学习遇 ...
- 试读angular源码第三章:初始化zone
直接看人话总结 前言 承接上一章 项目地址 文章地址 angular 版本:8.0.0-rc.4 欢迎看看我的类angular框架 文章列表 试读angular源码第一章:开场与platformBro ...
- 读spring源码(一)-ClassPathXmlApplicationContext-初始化
工作来几乎所有的项目都用到了spring,却一直没有系统的读下源码,从头开始系统的读下吧,分章也不那么明确,读到哪里记到哪里,仅仅作为个笔记吧. 先看ClassPathXmlApplicationCo ...
- 读tomcat源码,随笔类图
by yan 20170425 读tomcat源码,随笔类图:
- 【读fastclick源码有感】彻底解决tap“点透”,提升移动端点击响应速度
前言 近期使用tap事件为老夫带来了这样那样的问题,其中一个问题是解决了点透还需要将原来一个个click变为tap,这样的话我们就抛弃了ie用户 当然可以做兼容,但是没人想动老代码的,于是今天拿出了f ...
- 读 zepto 源码之工具函数
对角另一面 读 zepto 源码之工具函数 Zepto 提供了丰富的工具函数,下面来一一解读. 源码版本 本文阅读的源码为 zepto1.2.0 $.extend $.extend 方法可以用来扩展目 ...
- 读zepto源码之工具函数
2019独角兽企业重金招聘Python工程师标准>>> Zepto 提供了丰富的工具函数,下面来一一解读. 源码版本 本文阅读的源码为 zepto1.2.0 $.extend $.e ...
- java 事件分发机制_读Android源码之事件分发机制最全总结
原标题:读Android源码之事件分发机制最全总结 本文源码来自andorid sdk 22,不同版本会有细微差别,但核心机制是一致的 一.概述 事件分发有多种类型, 本文主要介绍Touch相关的事件 ...
最新文章
- Kostya Keygen#2分析
- 工作流引擎 Activiti 实战系列
- Linux 初始化之 Systemd机制
- Matplotlib 可视化之多图层叠加
- 飞畅科技-工业级以太网交换机常见问题解析!
- Kafka万亿级消息实战干货~持续更新中
- 苹果的倔强!今秋新iPhone外观设计将与2018年款非常相似
- oracle锁表与解表
- 互联网金融数据分析-笔记
- Python3解决modulenotfounderror: no module named‘_bz2‘
- 堆排序实现(C++)
- 为什么我的crontab不起作用呢
- 黑客是怎样买彩票的?中奖率提示2倍
- 大饼趋势逐渐明朗,黎明就在眼前!
- react 逆地理 高德地图_react高德地图默认卫星图设置
- 【Python】PyCharm热加载,调试时,修改运行时代码无需重新启动程序即可更新所做的修改
- 2014年全国专业技术人员计算机应用能力考试大纲,2014年全国专业技术人员计算机应用能力考试 Excel2003...
- IDEA整合SSM框架之配置日志logback(七)
- Silverlight开发历程—(绘制放射渐变图形)
- 个人的偏好与擅长的领域
热门文章
- LightOJ 1197 Help Hanzo 素数筛
- 免费电子书:Azure Web Apps开发者入门
- How to Install apk to Android Devices from Mac OS X
- 同一解决方案内的多个项目之间如何引用?
- 全国计算机二级c语言答案,全国计算机二级C语言试题及答案
- Java虚拟机专题对象内存定位
- Nginx之虚拟服务器配置
- (195)FPGA上电后IO的默认状态(ISE软件默认为1)
- python闯关游戏,Python挑战游戏( PythonChallenge)闯关之路Level 0
- 数据返回nan_数据处理教程