无法在本地画布上绘制远方文件的图像

Question

我一直在阅读如何在服务器和crossdomain.xml上设置CORS以使.drawImage（）方法起作用。我一直在尝试实现所有这些，而且我认为我做得很好。

这是我尝试绘制的图像随附的HTTP标头：

Access-Control-Allow-Origin: *

这是crossdomain.xml：http://bew.ink/public/images/costum/crossdomain.xml

其中一张图片位于：http://bew.ink/public/images/costum/non_printable_background.png

对我来说，一切似乎都是正确的，但是当我尝试在画布上绘制这张图片时，它根本不起作用：

var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');

var img = new Image();

img.onload = function() {
    ctx.drawImage(img, 0, 0);
}

img.src = "http://bew.ink/public/images/costum/non_printable_background.png";
    

<canvas id="canvas1" width="500" height="500"></canvas>

Answer 1

好吧，这是一个非常愚蠢的问题，这要归功于@Kalido给出的解决方案。

我要绘制的图像具有较宽的透明表面，并且比画布大，因此绘制的只是透明表面。这就是为什么我看不到任何东西的原因。