failed crossOrigin Access for canvas toDataUrl

前端 未结 2 348
情书的邮戳
情书的邮戳 2021-01-14 04:33

I wanna create a litte page where people can create a kaleidoscope. I use an available script and added some image browse and Save-Funktionality. Now I have a weird problem

相关标签:
2条回答
  • 2021-01-14 05:24

    To complete CORS compatibility...

    On the client-side you must also set the crossOrigin property of your Image object.

    var img = new Image();
    img.crossOrigin="anonymous";
    img.src="yourImage.png";
    

    So you will need to set the crossOrigin property in your canvas2Image.js also (about line 158).

    Other good references

    Here's a good link to enable cross-domain transfers on your site:

    http://enable-cors.org/

    And after you've configured your site, use this to test CORS compatibility:

    http://client.cors-api.appspot.com/client#?client_method=GET&client_credentials=false&server_url=http%3A%2F%2Fatlantacodingcompany.com%2Fimages%2Fhouse1.jpg&server_enable=true&server_status=200&server_credentials=false&server_tabs=remote

    Until you get your own site CORS compliant, you can use dropbox.com to test your site.

    • Sign up for a free dropbox.com account.
    • Temporarily put your images in the "public" folder.
    • Right-click any public image and "copy public link" for that file.
    • On the client: load your images using the crossOrigin="anonymous" property.
    • Your images will temporarily be CORS compliant!
    0 讨论(0)
  • 2021-01-14 05:29

    The .htaccess entry on the server where the images come from has to be:

    Header add Access-Control-Allow-Origin "*"
    
    0 讨论(0)
提交回复
热议问题