读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. 操作

未完待续。