使用javascript获取网页图像

有没有一种方法从javascript外部网页获取图像？使用javascript获取网页图像

我会解释一下：我有一个网站，可以说www.one.com，并且我想在这个网站的主页上显示另一个网站上存在的图像，可以说www.two.co.il

我可以做吗？

2012-06-18 benams

不，SOP不得在图像的情况下，限制最短途径。 –

显示图像确实有效！ – Amberlamps

试试这个：

var img = document.createElement("img"); 
    img.src = "http://www.two.co.il/image.jpg"; 
document.body.appendChild(img);

来源

2012-06-18 13:12:06 Amberlamps

该图像文件资源必须共享，否则它会给我拒绝访问拒绝。 – yogi

这是很自我解释是不是？你不能访问任何不公开的公共领域，你能吗？ – Amberlamps

@yogi - 如果它没有共享，那么该URL将是一个HTTP Forbidden响应，而不是图像。 – Quentin

是。

var image = document.createElement('img'); 
image.setAttribute('src', 'http://www.two.co.il/foo.jpeg'); 
image.setAttribute('alt', 'something suitable'); 
document.body.appendChild(image);

只要你不试图从其他网站内容为JS（你不是，你是建立在DOM一个img元素，JS没有进一步参与），你将不会遇到同源策略。

来源

2012-06-18 13:13:03 Quentin

我想你误解了我。我没有图像完整的网址，只是网页的网址 – benams

相同的原产地策略将阻止您解析HTML以查找img元素来找出URI。 – Quentin

或者干脆：

$("<img src='" + imgUrl + "' alt='" + altText + "'>").appendTo("body");

来源

2012-06-18 13:15:38

jQuery的+1，以便它可以在所有浏览器中工作。尽管如此，我会寻求一种不依赖字符串连接的解决方案，例如'.attr'或'$（''，{src：imgUrl，alt：altText}）''但我想这主要是一个问题的偏好。 –

追加到身体有意义显示一般方法，这是100％合法的，但在真实世界的应用程序中，您将占用大多数时间占位符，因为追加到BODY没有多大意义。 – Cranio

是的，我同意你@DavidHedlund，在某些情况下，你可能会这样做的准确和安全的编码，但有时速度是一个编码的问题，这种方法会更好，也建立整个HTML和一次追加所有是最有效的解决方案。 –

一个方便的事情是创造第一一个占位符，在您的HTML：

<div id='externalImage'></div>

，因为它不会破坏功能，如果布局的变化，并允许精确放置。

至于你如何把一个图像，真正的问题，从您使用jQuery的标签假设：

$("#externalImage").html("<img src=\"http://put.url.here/image.jpg\" />");

如果你想将其插入到上述占位符

。否则，要明白地将图像添加到文档中，您可以使用document.body.appendChild（如其他答案中所示）将其附加到已记录的BODY或其他位置。

来源

2012-06-18 13:21:26 Cranio

为什么你想添加另一个元素到你的源代码？ – Amberlamps

为什么**不** **？因为在现实世界的应用程序中，将会有一个占位符，它可以被CSS预先植入，并避免遍历文档，从而不会在布局更改时破坏其功能。我打赌追加BODY是一个不太可能的情况。 – Cranio

这是关于添加图像到您的网站。在哪里放置该图像取决于作者。你为什么想要估计超出原始问题的可能性？ – Amberlamps

让一个div，并给ID =“DIV1”用高度和宽度

<div id='div1' height='100' width='100'></div> 
    $('#div1').css('background-image, 'http://www.two.co.il/urImage.jpg');

它是应用图像

来源

2012-06-18 13:23:20

使用javascript获取网页图像

回答

相关问题