javascript - 如何使用 url 中的图像初始化 Angular 图像裁剪器？

Question

我正在使用这个angular image cropper带有 Angular 1.6 的 lib。

该示例展示了如何通过 input type='file' 从本地计算机选择文件后裁剪文件。

我想裁剪一个已经上传到服务器的文件。我的问题是如何使用具有 url 的图像初始化裁剪器？

Answer 1

向 cropper.sourceImage 提供 base64 字符串:

function toDataURL(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}

toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0',
                    function(dataUrl) {
  $timeout(function() {
        $scope.cropper.sourceImage = dataUrl;
        console.log(dataUrl);
    }, 0);

<小时/>

我们用 $timeout 包装 $scope.cropper.sourceImage = dataUrl; 来激发摘要周期

Demo