javascript - 使用 ngFlow 以数据 uri 格式发送图像

Question

我正在使用输入来加载图像，然后将其转换为数据 uri 格式以将其传递给ngImgCrop指令以裁剪该图像。

到目前为止，我已经完成了所有这些工作，但我正在努力尝试使用ngFlow上传数据 uri 格式的裁剪图像。

我已经尝试了几种方法都没有成功，有没有人能够做到这一点？

恐怕我遗漏了一些东西，我尝试使用该.addFile()方法并以数据 uri 格式传入图像，但它不能以这种方式工作。

Answer 1

我终于找到了一个解决方案，创建了一个 Blob 并将其推送到Flow's 文件数组中！

这个 StackOverflow 答案也有帮助，因为我必须将数据 uri 格式的图像转换为二进制来创建 Blob（该函数dataURItoBlob()为我做了）。

这是执行此操作的代码：

function uploadImage($flow) {
  if ($flow) {
    // 'vm.img.cropped' is the image in data uri format to upload
    var blob = dataURItoBlob(vm.img.cropped);
    blob.name = 'file.png';

    var file = new Flow.FlowFile($flow, blob);
    $flow.files.push(file)

    $flow.upload();
  }
}

function dataURItoBlob(dataURI) {
  var binary = atob(dataURI.split(',')[1]);
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  var array = [];
  for(var i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i));
  }
  return new Blob([new Uint8Array(array)], {type: mimeString});
};