相关疑难解决方法(0)

问题：在上传大型图像文件我认识到，虽然在我的上载AWS server有1gb memory使用它的全部能力，它会高达932 mb使用导致崩溃的过程。我以 DataURI 的形式保存该图像，然后我在某处阅读以 的形式保存它blob可以解决我的问题。所以我想将该 blob 附加到 formData 并发送到服务器，这就是我提出这个问题的原因。但是，如果有关于相同问题的任何其他建议，以便在内存方面以更有效的方式保存图像，将不胜感激。

动机

我想将图像以blob.

我做了什么

我目前正在将dataURI其转换为blob. 此外，我将该 blob 附加到formData并尝试使用 ajax 将其发送到服务器端/php。

爪哇脚本：

function convertURIToImageData(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
  var byteString;
  if (dataURI.split(',')[0].indexOf('base64') >= 0)
    byteString = atob(dataURI.split(',')[1]);
  else
    byteString = unescape(dataURI.split(',')[1]);

// separate out the mime component
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

// write the …

我正在关注有关 Angular 的离子/电容器的教程，这部分给我带来了一些问题：

Plugins.Camera.getPhoto({
  quality: 50,
  source: CameraSource.Prompt,
  correctOrientation: true,
  width: 200,
  resultType: CameraResultType.Base64
})
  .then(image => {
    this.selectedImage = image.base64String;

使用模板非常简单地访问 selectedImage，如下所示：

  <ion-img
          role="button"
          class="image"
          (click)="onImagePicked()"
          [src]="selectedImage"
          *ngIf="selectedImage"
  ></ion-img>

特别是，我在拍照时收到此运行时/浏览器错误：net::ERR_CONNECTION_RESET 431 (Request Header Fields Too Large)ionic 调用的 URL 为http://localhost:4200/HUGE_BASE64_STRING

现在我认为问题可能是将图像存储为 base64 而不是内存中的 blob。但后来我遇到了这个问题：

将 blob 转换为 base64

所以如果我这样做了

 var reader = new FileReader();
 reader.readAsDataURL(blob); 
 reader.onloadend = function() {
     var base64data = reader.result;                
 }

我仍然会用这种方式将图像转换为一个巨大的 URL，不是吗？那么在本地存储大图像的正确方法是什么？

我认为这是一个一般的 JS 问题，而不是特定的离子问题，因此 JS 标签

有这个module.exports从 API 端点获取图像的文件。然后将 API 结果解析为 blob。解析后的 Blob 对象如下所示：

Blob {
  [Symbol(type)]: 'image/jpeg',
  [Symbol(buffer)]:
   <Buffer ff d8 ff db 00 43 00 08 06 06 07 06 05 08 07 07 07 09 09 08 0a 0c 14
0d 0c 0b 0b 0c 19 12 13 0f 14 1d 1a 1f 1e 1d 1a 1c 1c 20 24 2e 27 20 22 2c 23 1c
 ... > }

这是代码：

// Pre Configuration
const fetch = require('node-fetch')

module.exports = async …

长话短说

我正在尝试将fetch图像转换为 base64，并将数据 urlimg放入的属性中src，但它不起作用：

async function ajax(id) {
  const tag = document.getElementById(id);
  const path = tag.getAttribute("data-src");
  const response = await fetch(path);
  const blob = await response.blob();
  const base64 = window.btoa(blob);
  const content = `data:image/jpeg;base64,${base64}`;
  tag.setAttribute("src", content);
}

详细信息以及其他一些有效的方法如下。

我一直在尝试不同的延迟加载方法：

$ mkdir lazy
$ cd lazy
$ wget https://upload.wikimedia.org/wikipedia/commons/7/7a/Lone_Ranger_and_Silver_1956.jpg # any other example image

现在创建一个名为index.html以下内​​容的文件：

<script>
  // this works
  function setAttribute(id) {
    const tag = document.getElementById(id);
    const path = tag.getAttribute("data-src"); …