Question

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

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;
}

我有这个功能将图像网址转换为我需要的功能，直到最近才能正常工作，现在我收到了这个错误：

Image from origin 'https://bucketeer-....s3.amazonaws.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

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

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

我能解决这个问题吗？

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

0 个答案: