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

Posted 2023-02-25

【中文标题】使用 ngFlow 以数据 uri 格式发送图像

【英文标题】：Send an image in the data uri format using ngFlow

【发布时间】：2016-09-13 13:46:31

【问题描述】：

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

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

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

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

【参考方案1】：

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

This *** 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);
;