如何从另一个域为画布加载 img src？答案

【问题标题】：How to load img src from another domain for canvas?如何从另一个域为画布加载 img src？
【发布时间】：2013-10-25 16:28:39
【问题描述】：

当我在画布中加载图像并指定其 src 时，我使用与 html 文件位于同一文件夹中的文件名，并加载 img。所以它会是这样的：

img.src = 'Untitled.png';

但是如果我尝试这个，img 不会加载

img.src = 'http://dgroover.wikispaces.com/file/view/bill-gates-car.jpg';

有谁知道怎么回事？

【问题讨论】：

是否有意在图片 URL 中包含两次 bill-gates-car.jpg？
为我加载。我建议您创建一个可重现的测试用例，例如jsfiddle.net （这个问题与画布或 HTML5 有什么关系？）
哦，是的，它应该是'dgroover.wikispaces.com/file/view/bill-gates-car.jpg'，但它仍然无法正常工作，图像无法加载。而且我认为将 img src 加载到画布中时可能会有所不同。这是因为图像在另一个域上吗？
如果我尝试这个，dgroover.wikispaces.com/file/view/bill-gates-car.jpg/66313096/…">，图像加载正常，但奇怪的是，如果为画布加载 img，它不会显示......跨度>
检查这个线程 stackoverflow.com/questions/10852514/… ，并在链接到那里的 jsfiddle 中测试你的图像 jsfiddle.net/ZZW5V

标签： html canvas image src

【解决方案1】：

使用此代码：

标记部分

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

脚本部分

var img = new Image();
img.onload = function(){
    document.getElementById("cnv").getContext("2d").drawImage(this,0,0);
};
img.src="http://dgroover.wikispaces.com/file/view/bill-gates-car.jpg";

DEMO

【讨论】：

我现在开始工作了，我错过了 onload 事件......我想我在 onload 事件发生之前做了一些事情，所以它搞砸了

【解决方案2】：

这样试试：

> var canvas = document.getElementById("myCanvas");
>         var ctx = canvas.getContext("2d");      
>         ctx.translate(0.5, 0.5);
>         ctx.strokeStyle = "#5F7FA2";
>         ctx.strokeRect(50, 50, 25, 25);
>         var img = new Image();
>         img.src = "http://www.cs.washington.edu/education/courses/csep576/05wi/projects/project4/web/artifact/liebling/average_face.gif";
>         img.onload = function(){
>         ctx.drawImage(img, 50, 50);}

【讨论】：