读ImageCropper源码

时间：2014-12-22 12:40:33 阅读：225 评论：0 收藏：0 [点我收藏+]

标签：

原库首页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，如下图所示：

技术分享