使用Javascript通過圖像發送消息

Question

我有兩個域，一個域包含一個圖像，另一個域正試圖訪問該圖片。 以下用於加載圖像：

image = new Image(); 
image.src = "someotherdomain.com/picture.png";

但是，我也想發回一些信息。 由於相同原產地政策，我無法使用AJAX。 這就是我想要做的：

image = new Image(); 
image.src = "someotherdomain.com/picture.png";

console.log(image.message); // How can I receive the message from the other server to here?

我無法啟用CORS或任何其他功能。

Answer 1

如果要將GET請求發送到服務器，則只需將路徑設置為文件

image.src = "http://example.com/some.php?message=" + encodeUriComponent("your string here");

現在，服務器可以返回一個1像素的gif，它將可以正常工作。

但是，現代的瀏覽器通過CORS支持Ajax調用，因此，如果服務器設置正確的標頭以允許您的域，則可以使用XMLHttpRequest對象。

---

如果您想發回數據，則需要發出JSONP request 。

function myCallback(obj) {
    console.log(obj);
}

var scr = document.createElement("script");
scr.src = "http://example.com/some.php?callback=myCallback&message=" + encodeUriComponent("your string here");
document.body.appendChild(scr);

服務器返回的腳本看起來像

myCallback({"hello" : "world"});

Answer 2

如果要在服務器端生成圖像，或者可以對其進行修改，則可以將消息添加到圖像exif數據中，然后可以使用如下所示的JS在客戶端解析和讀取該消息： https ：//github.com/jseidelin/exif-js 。 （當然，這可能不是發送消息的最聰明，最簡單的方法）。

Answer 3

但是，我也想發回一些信息。 由於相同原產地政策，我無法使用AJAX。

由於完全相同的Same-Origin-Policy確實禁止通過Ajax讀取數據，因此不允許從包含跨域的圖像讀取任何數據。 您只能通過為圖像文件啟用CORS來讀取圖像數據。

另請參閱規避同源政策的方法 。