Как загрузить img src из другого домена для холста?

Когда я загружаю изображение на свой холст и указываю его src, я использую имя файла, которое находится в той же папке, что и файл html, и загружает файл img. Так что это будет так:

img.src = 'Untitled.png';

Но если я попробую это, img не загружается

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

Кто-нибудь знает, что не так?


canvas image html src
person sneaky    schedule 20.06.2012    source источник
comment
Намеренно ли дважды иметь bill-gates-car.jpg в URL-адресе изображения?   -  person jsalonen    schedule 20.06.2012
comment
Нагрузки для меня. Я предлагаю вам создать воспроизводимый тестовый пример, например. на jsfiddle.net (и какое отношение этот вопрос имеет к холсту или HTML5?)   -  person Phrogz    schedule 20.06.2012
comment
о да, это должно быть 'dgroover.wikispaces.com/file/view/ bill-gates-car.jpg', но он по-прежнему не работает, изображение не загружается. И я подумал, что это может иметь значение при загрузке img src в холст. Это потому, что изображение находится на другом домене?   -  person sneaky    schedule 21.06.2012
comment
если я попробую это, ‹img src=dgroover.wikispaces.com/file/view/bill-gates-car.jpg/66313096/›, изображение загружается нормально, но странно, что при загрузке img для холста оно не отображается ...   -  person sneaky    schedule 21.06.2012
comment
проверьте эту тему stackoverflow.com/questions/10852514/ и проверьте свое изображение в jsfiddle, связанном там jsfiddle.net /ZZW5V   -  person User    schedule 21.06.2012
comment
@sneaky нужно больше кода. У меня есть подозрение, что это может быть проблема onload.   -  person Loktar    schedule 21.06.2012
comment
@lxx, я прочитал это и до сих пор не знаю, как это исправить. И изображение загружается в jsfiddle.   -  person sneaky    schedule 21.06.2012

Ответы (2)


arrow_upward
1
arrow_downward

Работает с этим кодом:

часть разметки

<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";​

ДЕМО

person Engineer    schedule 20.06.2012
comment
эта строка: img.src=dgroover.wikispaces.com/file/view /bill-gates-car.jpg;​ вызвал сбой для меня, и я работаю в среде sharepoint 2010, если это имеет значение. - person sneaky; 21.06.2012
comment
я заставил его работать сейчас, я пропустил событие загрузки ... я думаю, что делал что-то до того, как произошло событие загрузки, поэтому оно испортилось - person sneaky; 21.06.2012

arrow_upward
0
arrow_downward

Попробуйте таким образом:

> 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);}
person Vishwajeet Kulkarni    schedule 25.10.2013