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

Question

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

到目前为止我已经完成了所有这些工作，但我正在努力尝试使用 ngFlow.

上传数据 uri 格式的裁剪图像

我试了好几种方法都没有成功，请问有人能做到吗？

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

Answer 1

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

This Whosebug answer 也有帮助，因为我必须将数据 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});
};

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

Send an image in the data uri format using ngFlow

javascript

angularjs

image-uploading

file-transfer

ng-flow