将图片URL转换为base64 - CORS问题

Question

我正在尝试使用pdfmake将一些图像嵌入PDF中。为此，我需要为这些图像使用dataURIs。

this.getDataUri = (url) => {
  var defer = $q.defer();

  var image = new Image();
  image.setAttribute('crossOrigin', '');
  image.src = url;

  image.onload = function() {
    var canvas = document.createElement('canvas');
    canvas.width = this.naturalWidth;
    canvas.height = this.naturalHeight;

    canvas.getContext('2d').drawImage(this, 0, 0);
    defer.resolve(canvas.toDataURL('image/png'));
  };

  image.onerror = function() {
    defer.reject();
  };

  return defer.promise;
}

我有一个将图片url转换为所需格式的函数，在最近之前这个函数一直能够正常工作。现在我遇到了以下错误：

来自“https://bucketeer-....s3.amazonaws.com”的图像因跨域资源共享策略而被阻止加载：请求的资源上没有“Access-Control-Allow-Origin”标头。因此，“http://localhost:3000”不允许访问。

这是我S3存储桶的CORS设置：

{
  "CORSRules": [
    {
      "AllowedHeaders": [
        "*"
      ],
      "AllowedMethods": [
        "HEAD",
        "GET",
        "PUT",
        "POST"
      ],
      "AllowedOrigins": [
        "*"
      ]
    }
  ]
}

我能做些什么来解决这个问题吗？

- m0ngr31

---

你需要在S3存储桶上添加CORS策略.... <AllowedOrigin>http://localhost:3000</AllowedOrigin> - Rakesh Chand

我仍然得到相同的错误。 - m0ngr31

@m0ngr31 你是怎么解决这个问题的？我也遇到了同样的问题，想把图片放到PDF中。 - gwalshington

Answer 1

和我一样，当尝试将来自s3.amazonaws的图像URL转换为base 64时，我遇到了CORS错误

试试这样

function getBase64FromImage(url, onSuccess, onError) {
    var proxyUrl = 'https://cors-anywhere.herokuapp.com/'
    url = proxyUrl + url 
    var xhr = new XMLHttpRequest();
 
    xhr.responseType = "arraybuffer";
    xhr.open("GET", url);
 
    xhr.onload = function () {
        var base64, binary, bytes, mediaType;
 
        bytes = new Uint8Array(xhr.response);
        //NOTE String.fromCharCode.apply(String, ...
        //may cause "Maximum call stack size exceeded"
        binary = [].map.call(bytes, function (byte) {
            return String.fromCharCode(byte);
        }).join('');
        mediaType = xhr.getResponseHeader('content-type');
        base64 = [
            'data:',
            mediaType ? mediaType + ';':'',
            'base64,',
            btoa(binary)
        ].join('');
        onSuccess(base64);
    };
    xhr.onerror = onError;
    xhr.send();
}

- Alauddin Afif Cassandra