Question

我们已经用 a子储存图像。当我们试图将图像转换成基64时。从事精细 j工作的法典,但法典并非单体。

<javascript Code:

function getBase64Image(imgUrl, callback) {
    var img = new Image();
    // onload fires when the image is fully loadded, and has width and height
    img.onload = function(){
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0);
      var dataURL = canvas.toDataURL("image/png"),
          dataURL = dataURL.replace(/^data:image/(png|jpg);base64,/, "");

      callback(dataURL); // the base64 string

    };

    // set attributes and src 
    img.setAttribute( crossOrigin ,  anonymous ); //
    img.src = imgUrl;

}
this.getBase64Image("imageURL", function(base64image){
     console.log(base64image);
});

它是在javascript进行工作罚款的,但ular在错误之下。

Access to image at https://examplecros.s3.us-east-2.amazonaws.com/images5.jpg from origin http//localhost:4200 has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource. 5.jpg:1
Failed to load resource: net::ERR_FAILED

Answer 1

AWS S3 and your local are 2 different domains and you have already consider to set its corresponding property:

缩略语

此外,你还必须在你的支持下召集交叉领域:

CORS_ORIGIN_ALLOW_ALL = 真实。

如果问题仍然存在,则试图在你的形象中添加一个随机参数,以避免你从当地切身处获得 im:

g.src = imgUrl + ?r= + Math. Floor(Math.random()*100000);

我使用了上述步骤,并解决了我的问题。

参引

Answer 2

This is a security restriction from the browser because the origins are different. You can do the following workarounds to do this.

add,

img.crossOrigin =  *

and try using pre-signed URL for the object in s3(as image src) instead of direct url

友情链接