使用image cropper拿到base64码后怎么做

Posted 2023-03-21

参考技术A 根据项目的需求，要在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, 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);

;