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

时间:2018-08-26 09:46:57

标签: javascript canvas cors cross-domain drawimage

我一直在阅读如何在服务器和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>

1 个答案:

答案 0 :(得分:0)

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

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